Warning: file_get_contents(/data/phpspider/zhask/data//catemap/9/javascript/369.json): failed to open stream: No such file or directory in /data/phpspider/zhask/libs/function.php on line 167

Warning: Invalid argument supplied for foreach() in /data/phpspider/zhask/libs/tag.function.php on line 1116

Notice: Undefined index: in /data/phpspider/zhask/libs/function.php on line 180

Warning: array_chunk() expects parameter 1 to be array, null given in /data/phpspider/zhask/libs/function.php on line 181
Javascript Google Maps多段线单击检测行号_Javascript_Google Maps_Google Maps Api 3 - Fatal编程技术网

Javascript Google Maps多段线单击检测行号

Javascript Google Maps多段线单击检测行号,javascript,google-maps,google-maps-api-3,Javascript,Google Maps,Google Maps Api 3,我创建了一条谷歌地图多段线 var flightPlanCoordinates = [new google.maps.LatLng(-27.46758, 153.027892), new google.maps.LatLng(37.772323, -122.214897), new google.maps.LatLng(29.46758, 88.027892), new google.maps.LatLng(20.46758, 97.027892), new google.maps.LatLng

我创建了一条谷歌地图多段线

var flightPlanCoordinates = [new google.maps.LatLng(-27.46758, 153.027892), new google.maps.LatLng(37.772323, -122.214897), new google.maps.LatLng(29.46758, 88.027892), new google.maps.LatLng(20.46758, 97.027892), new google.maps.LatLng(17.772323, 78.214897)];
    var flightPath = new google.maps.Polyline({
        path: flightPlanCoordinates,
        strokeColor: "rgba(255,0,0, .5)",
        strokeOpacity: 1.0,
        strokeWeight: 4
    });
我创建了一个事件(例如单击),它显示一个包含信息的框。示例代码:

google.maps.event.addListener(flightPath, 'click', function(el) {
        var curLat = el.latLng.lat();
        var curLng = el.latLng.lng();
        var myLatlng = new google.maps.LatLng(curLat,curLng);
        infowindow.content = "<div style= ' width: 200px'>STRING HERE<div>";
        infowindow.setPosition(myLatlng);
        infowindow.open(map);
    });
google.maps.event.addListener(flightPath,'click',函数(el){
var curLat=el.latLng.lat();
var curLng=el.latLng.lng();
var myLatlng=新的google.maps.LatLng(curLat,curLng);
infowindow.content=“此处字符串”;
infowindow.setPosition(myLatlng);
打开(地图);
});
我已经全局定义了
infowindow
,因此可以重新定位它


现在的问题是,无论我在哪里单击,它总是显示相同的信息。基本上,我想做的是点击行号(从0开始,1..),我可以使用它来获得适当的数据

此信息无法通过API获得

可以使用geometryy库(isLocationOnEdge)并在单行上迭代以检测单击发生在哪条线上,但我认为对每个线段使用单个多段线更容易:

  var flightPlanCoordinates = [
    new google.maps.LatLng(-27.46758, 153.027892), 
    new google.maps.LatLng(37.772323, -122.214897), 
    new google.maps.LatLng(29.46758, 88.027892), 
    new google.maps.LatLng(20.46758, 97.027892), 
    new google.maps.LatLng(17.772323, 78.214897)
  ],i=0,infowindow=new google.maps.InfoWindow;


  while(flightPlanCoordinates.length>1){
    (function(i){
      var segment= new google.maps.Polyline({
        path: [flightPlanCoordinates.shift(),flightPlanCoordinates[0]],
        strokeColor: "rgba(255,0,0, .5)",
        strokeOpacity: 1.0,
        strokeWeight: 4,
        map:map
      });
      google.maps.event.addListener(segment, 'click', function(e){
        infowindow.setOptions({map:map,position:e.latLng,content:'Line#'+i});
      });
    })(i++)
  }

回答得很好,谢谢。您是否建议使用单线而不是内置多段线(在我的情况下,每个显示地图可能需要多达1000条线)?使用单线时可能会影响性能(尤其是拖动/缩放),但在需要访问特定线段时,我看不到更好的方法。