Google地图:在折线上选择上一个标记

本文介绍了Google地图:在折线上选择上一个标记的处理方法，对大家解决问题具有一定的参考价值，需要的朋友们下面随着小编来一起学习吧！

问题描述

我正在使用带有JSON(带有标记坐标)的google maps API的应用程序.然后，我在标记之间绘制折线.我还实现了带有onclick事件的函数，该事件在折线内部创建了一个新标记.此标记必须显示折线中上一个标记的信息(采用JSON而不是单击的).但是我不知道如何获取所选折线的上一个顶点(标记).

I'm doing an application with google maps API that have a JSON with the marker's coordinates. Then I draw polylines between the markers. I also implemented a function with a onclick event that creates a new marker inside the polyline. This marker has to show information of the previous marker in the polyline (the one taked of the JSON, not a clicked one). But I don't know how to take the previous vertex(marker) of a selected polyline.

代码:

(function() {

window.onload = function() {

var options = {
zoom: 3,
center: new google.maps.LatLng(37.09, -95.71),
mapTypeId: google.maps.MapTypeId.HYBRID,
noClear: true,
panControl: true,
scaleControl: false,
streetViewControl:false,
overviewMapControl:false,
rotateControl:false,
mapTypeControl: true,
zoomControl: false,
};
var map = new google.maps.Map(document.getElementById('map'), options);

// JSON
$.getJSON("loc.js", function(json) {
    console.log(json);
});

//Marker type
var markers = [];
var arr = [];
var pinColor = "FE7569";
var pinImage = new google.maps.MarkerImage("http://labs.google.com/ridefinder/images/mm_20_red.png" + pinColor,
    new google.maps.Size(21, 34),
    new google.maps.Point(0,0),
    new google.maps.Point(10, 34));

// JSON loop
for (var i = 0, length = json.length; i < length; i++) {
    var data = json[i],
    latLng = new google.maps.LatLng(data.lat, data.lng);
    arr.push(latLng);

    // Create markers
    var marker = new google.maps.Marker({
        position: latLng,
        map: map,
        icon: pinImage,
    });
    infoBox(map, marker, data);

    //Polylines
    var flightPath = new google.maps.Polyline({
        path: json,
        geodesic: true,
        strokeColor: '#FF0000',
        strokeOpacity: 1.0,
        strokeWeight: 2,
        map:map
    });
      infoPoly(map, flightPath, data);

    //Calculate polylines distance
    google.maps.LatLng.prototype.kmTo = function(a){
        var e = Math, ra = e.PI/180;
        var b = this.lat() * ra, c = a.lat() * ra, d = b - c;
        var g = this.lng() * ra - a.lng() * ra;
        var f = 2 * e.asin(e.sqrt(e.pow(e.sin(d/2), 2) + e.cos(b) * e.cos
        (c) * e.pow(e.sin(g/2), 2)));
        return f * 6378.137;
    }
    google.maps.Polyline.prototype.inKm = function(n){
        var a = this.getPath(n), len = a.getLength(), dist = 0;
        for (var i=0; i < len-1; i++) {
           dist += a.getAt(i).kmTo(a.getAt(i+1));
        }
        return dist;
    }
}

function infoBox(map, marker, data) {
    var infoWindow = new google.maps.InfoWindow();
    google.maps.event.addListener(marker, "click", function(e) {
        salta(data.tm);
    });

    (function(marker, data) {
      google.maps.event.addListener(marker, "click", function(e) {
        salta(data.tm);
      });
    })(marker, data);
}
//Create onclick marker on the polyline
function  infoPoly(map, flightPath, data){
google.maps.event.addListener(flightPath, 'click', function(event) {
      mk = new google.maps.Marker({
        map: map,
        position: event.latLng,

      });
      markers.push(mk);
      map.setZoom(17);
      map.setCenter(mk.getPosition());
    });
    }

    function drawPath() {
       var coords = [];
       for (var i = 0; i < markers.length; i++) {
        coords.push(markers[i].getPosition());
       }
       flightPath.setPath(coords);
    }

//  Fit these bounds to the map
var bounds = new google.maps.LatLngBounds();
for (var i = 0; i < arr.length; i++) {
    bounds.extend(arr[i]);
}

map.fitBounds(bounds);
//dist polylines
distpoly = flightPath.inKm();
distpolyround = Math.round(distpoly);
};
})();

如果单击蓝色箭头，则会在折线的该点创建一个标记.在那个标记中，它采用了上一个标记的值.

If I click in the blue arrow, I create a marker on that point of the polyline. I that marker it takes the values of the previous one.

推荐答案

您可以使用几何库.poly名称空间isLocationOnEdge 方法，用于确定单击点(新标记)位于多段线的哪个段上.

You can use the geometry library .poly namespace isLocationOnEdge method to determine which segment of the polyline the clicked point (new marker) is on.

//Create onclick marker on the polyline
function infoPoly(map, flightPath, data) {
  google.maps.event.addListener(flightPath, 'click', function(event) {
    mk = new google.maps.Marker({
      map: map,
      position: event.latLng,

    });
    markers.push(mk);
    map.setZoom(17);
    map.setCenter(mk.getPosition());

    // find line segment.  Iterate through the polyline checking each line segment.
    // isLocationOnEdge takes a google.maps.Polyline as the second argument, so make one,
    // then use it for the test.  The default value of 10e-9 for the tolerance didn't work,
    // a tolerance of 10e-6 seems to work.
    var betweenStr = "result no found";
    var betweenStr = "result no found";
    for (var i=0; i<flightPath.getPath().getLength()-1; i++) {
       var tempPoly = new google.maps.Polyline({
         path: [flightPath.getPath().getAt(i), flightPath.getPath().getAt(i+1)]
       })
       if (google.maps.geometry.poly.isLocationOnEdge(mk.getPosition(), tempPoly, 10e-6)) {
          betweenStr = "between "+i+ " and "+(i+1);
       }
    }

    (function(mk, betweenStr) {
      google.maps.event.addListener(mk, "click", function(e) {
        infowindow.setContent(betweenStr+"<br>loc:" + this.getPosition().toUrlValue(6));
        infowindow.open(map, mk);
        // salta(data.tm);
      });
    })(mk, betweenStr);

    google.maps.event.trigger(mk,'click');
  });

概念证明小提琴

代码段:

var infowindow = new google.maps.InfoWindow();
(function() {

  window.onload = function() {

    var options = {
      zoom: 3,
      center: new google.maps.LatLng(37.09, -95.71),
      mapTypeId: google.maps.MapTypeId.HYBRID,
    };
    var map = new google.maps.Map(document.getElementById('map'), options);

    //Marker type
    var markers = [];
    var arr = [];
    var pinColor = "FE7569";
    var pinImage = "http://labs.google.com/ridefinder/images/mm_20_red.png";

    // JSON loop
    for (var i = 0, length = json.length; i < length; i++) {
      var data = json[i],
        latLng = new google.maps.LatLng(data.lat, data.lng);
      arr.push(latLng);

      // Create markers
      var marker = new google.maps.Marker({
        position: latLng,
        map: map,
        icon: pinImage,
      });
      infoBox(map, marker, data);

      //Polylines
      var flightPath = new google.maps.Polyline({
        path: json,
        geodesic: true,
        strokeColor: '#FF0000',
        strokeOpacity: 1.0,
        strokeWeight: 2,
        map: map
      });
      infoPoly(map, flightPath, data);
    }

    function infoBox(map, marker, data) {
        var infoWindow = new google.maps.InfoWindow();
        google.maps.event.addListener(marker, "click", function(e) {
          infowindow.setContent("tm:" + data.tm + "<br>loc:" + this.getPosition().toUrlValue(6));
          infowindow.open(map, marker);
          // salta(data.tm);
        });

        (function(marker, data) {
          google.maps.event.addListener(marker, "click", function(e) {
            infowindow.setContent("tm:" + data.tm + "<br>loc:" + this.getPosition().toUrlValue(6));
            infowindow.open(map, marker);
            // salta(data.tm);
          });
        })(marker, data);
      }
      //Create onclick marker on the polyline

    function infoPoly(map, flightPath, data) {
      google.maps.event.addListener(flightPath, 'click', function(event) {
        mk = new google.maps.Marker({
          map: map,
          position: event.latLng,

        });
        markers.push(mk);
        map.setZoom(17);
        map.setCenter(mk.getPosition());

        // find line segment.  Iterate through the polyline checking each line segment.
        // isLocationOnEdge takes a google.maps.Polyline as the second argument, so make one,
        // then use it for the test.  The default value of 10e-9 for the tolerance didn't work,
        // a tolerance of 10e-6 seems to work.
        var betweenStr = "result no found";
        for (var i = 0; i < flightPath.getPath().getLength() - 1; i++) {
          var tempPoly = new google.maps.Polyline({
            path: [flightPath.getPath().getAt(i), flightPath.getPath().getAt(i + 1)]
          })
          if (google.maps.geometry.poly.isLocationOnEdge(mk.getPosition(), tempPoly, 10e-6)) {
            betweenStr = "between " + i + " and " + (i + 1);
          }
        }

        (function(mk, betweenStr) {
          google.maps.event.addListener(mk, "click", function(e) {
            infowindow.setContent(betweenStr + "<br>loc:" + this.getPosition().toUrlValue(6));
            infowindow.open(map, mk);
            // salta(data.tm);
          });
        })(mk, betweenStr);

        google.maps.event.trigger(mk, 'click');
      });
    }

    function drawPath() {
      var coords = [];
      for (var i = 0; i < markers.length; i++) {
        coords.push(markers[i].getPosition());
      }
      flightPath.setPath(coords);
    }

    //  Fit these bounds to the map
    var bounds = new google.maps.LatLngBounds();
    for (var i = 0; i < arr.length; i++) {
      bounds.extend(arr[i]);
    }

    map.fitBounds(bounds);
    //dist polylines
    distpoly = flightPath.inKm();
    distpolyround = Math.round(distpoly);
  };
})();

var json = [{
  lat: 38.931808,
  lng: -74.906606,
  tm: 0
}, {
  lat: 38.932442,
  lng: -74.905147,
  tm: 1
}, {
  lat: 38.93311,
  lng: -74.903473,
  tm: 2
}, {
  lat: 38.933777,
  lng: -74.901671,
  tm: 3
}, {
  lat: 38.930739,
  lng: -74.912528,
  tm: 1000
}];

html,
body,
#map {
  height: 100%;
  width: 100%;
  margin: 0px;
  padding: 0px
}

<script src="https://maps.googleapis.com/maps/api/js?libraries=geometry"></script>
<div id="map"></div>

这篇关于Google地图:在折线上选择上一个标记的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持！