Google 地图：Select 折线上的上一个标记

Question

我正在做一个带有 google 地图 API 的应用程序，其中 JSON 带有标记的坐标。然后我在标记之间绘制多段线。我还实现了一个带有 onclick 事件的函数，该事件在多段线内创建了一个新标记。该标记必须显示折线中前一个标记的信息（取自 JSON 的标记，而不是单击的标记）。但是我不知道如何获取选定多段线的前一个顶点（标记）。

代码：

(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);
};
})();

如果单击蓝色箭头，则会在多段线的那个点上创建一个标记。 I that marker it takes the values of the previous one.

Answer 1

正在初始化
当您在 for 循环中创建这些标记时，将它们添加到您在循环之前定义（空）的 map [数据结构]。在地图标记将被存储。他们的密钥 - 串联 lat/lng.

var initial_markers = {}; //before for loop
initial_markers[data.lat+"-"+data.lng] = marker; //after each marker initialization
数一下，这样你就知道有多少initial_marker_count，因为你无法获得map[数据结构]

检测
当你点击了一条折线时，我认为你不能准确地得到被点击的那部分折线，所以你需要自己得到它。步骤为：

获取点击事件坐标
遍历标记
取他们的坐标
检查地图上的点击点是否在这两点之间的线上
如果是，取这两点中的第一个

检测伪代码

var prev_marker;
for (var i=initial_markers; i<initial_marker_count-2; i++) {
    if( isPointOnLine(initial_markers[i], initial_markers[i+1], clicked_point) {
        prev_marker = initial_markers[i];
        break;
    }
}

我说这是伪代码的唯一原因是因为我不知道如何找到 点是否在 [=59= 中的两点 之间的线上] 地图。你应该编写 isPointOnLine() 函数。除此之外-给出了想法。希望你欣赏它。

Answer 2

您可以使用geometry library .poly namespace isLocationOnEdge方法来确定点击点（新标记）在多段线的哪一段上。

//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');
  });

proof of concept fiddle

代码片段：

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 地图：Select 折线上的上一个标记

Google Maps: Select previous Marker on Polyline

javascript

json

google-maps

polyline

marker