Fatal编程技术网
  • google-maps/
  • Google maps 如何使用google map api在多段线中指定信息窗口

Google maps 如何使用google map api在多段线中指定信息窗口

google-maps google-maps-api-3

Google maps 如何使用google map api在多段线中指定信息窗口,google-maps,google-maps-api-3,google-maps-api-2,Google Maps,Google Maps Api 3,Google Maps Api 2,我的设想。我有五个标记并连接到多段线。当我单击标记a以在多段线之间标记b时，它将显示一个信息窗口。在信息中，窗口有标记a地址和标记b地址。我使用google Maps API中的islocationedge概念实现了这个场景。但是这个概念我面临一个问题。当我单击标记a以标记b多段线时，它将显示标记b和标记c地址，因为我使用了段多段线。我需要如何在单个多段线中指定信息窗口 我的代码 <!DOCTYPE html> <html> <body> <h1>

我的设想。我有五个标记并连接到多段线。当我单击标记a以在多段线之间标记b时，它将显示一个信息窗口。在信息中，窗口有标记a地址和标记b地址。我使用google Maps API中的islocationedge概念实现了这个场景。但是这个概念我面临一个问题。当我单击标记a以标记b多段线时，它将显示标记b和标记c地址，因为我使用了段多段线。我需要如何在单个多段线中指定信息窗口

我的代码

<!DOCTYPE html>
<html>
<body>

<h1>My First Google Map</h1>

<div id="googleMap" style="width:100%;height:400px;"></div>

<script>
function myMap() {
var mapProp= {
  center:new google.maps.LatLng(51.508742,-0.120850),
  zoom:5,
};
var map = new google.maps.Map(document.getElementById("googleMap"),mapProp);
var goldenGatePosition = [{lat: 30.2179130,lng: -81.5628150, address: 'Tamil Nadu'},{lat: 30.2179140,lng: -81.5627480, address: 'India'},{lat:30.2177650,lng:-81.5629100,address: 'America'},{lat: 30.2844080,lng: -81.5633900, address: 'Tamil Nadu'},{lat: 30.2843840,lng: -81.5633890, address: 'Tamil Nadu'}];
for(let i=0;i<goldenGatePosition.length;i++){
  var marker = new google.maps.Marker({
            position: goldenGatePosition[i],
            map: map,
            title: 'Golden Gate Bridge'
            });
}
var flightPath = new google.maps.Polyline({
  path:goldenGatePosition,
  strokeColor:"#0000FF",
  strokeOpacity:0.8,
  strokeWeight:2
});
flightPath.setMap(map);
let poly, geodesicPoly;
var infowindow = new google.maps.InfoWindow();
var codeStr=''
google.maps.event.addListener(flightPath, 'click', function(event) {
      // make polyline for each segment of the input line
      for (var i = 0; i < this.getPath().getLength() - 1; i++) {
        var segmentPolyline = new google.maps.Polyline({
          path: [this.getPath().getAt(i), this.getPath().getAt(i + 1)]
        });
        console.log(segmentPolyline)
        // check to see if the clicked point is along that segment
        if (google.maps.geometry.poly.isLocationOnEdge(event.latLng, segmentPolyline, 10e-3)) {
          console.log(' I ', i)
          // output the segment number and endpoints in the InfoWindow
          var origin = new Array()
          var destination = new Array()
          console.log('****************')
            for(let i=0;i<goldenGatePosition.length; i++){
              console.log(goldenGatePosition[i])
            }
            console.log('****************')
          console.log(segmentPolyline.getPath().getAt(0).address)
          origin.push(segmentPolyline.getPath().getAt(0).toUrlValue(6))
          destination.push(segmentPolyline.getPath().getAt(1).toUrlValue(6))
          const service = new google.maps.DistanceMatrixService(); // instantiate Distance Matrix service
      const matrixOptions = {
        origins: origin, // technician locations
        destinations: destination, // customer address
        travelMode: 'DRIVING',
        unitSystem: google.maps.UnitSystem.IMPERIAL
      };
      // Call Distance Matrix service
      service.getDistanceMatrix(matrixOptions, callback);

      // Callback function used to process Distance Matrix response
      function callback(response, status) {
        console.log(response)
        console.log(status)
        if (status !== "OK") {
          alert("Error with distance matrix");
          return;
        }
        console.log(response);        
      }
          var content = "segment " + i + "<br>";
          content += "start of segment=" + segmentPolyline.getPath().getAt(0).toUrlValue(6) + "<br>";
          content += "end of segment=" + segmentPolyline.getPath().getAt(1).toUrlValue(6) + "<br>";
          infowindow.setContent(content);
          infowindow.setPosition(event.latLng);
          infowindow.open(map);
        }
      }
    });
}  
</script>

<script src="https://maps.googleapis.com/maps/api/js?key=AIzaSyAiybKuHI544-t5XPZzBGjQOBCO4MZFCwM&callback=myMap&libraries=geometry"></script>

</body>
</html>


我的第一张谷歌地图
函数myMap（）{
var mapProp={
中心：新google.maps.LatLng（51.508742，-0.120850），
缩放：5，
};
var map=new google.maps.map（document.getElementById（“googleMap”），mapProp）；
var goldenGatePosition=[{lat:30.2179130，液化天然气：-81.5628150，地址：“泰米尔纳德邦”}，{lat:30.2179140，液化天然气：-81.5627480，地址：“印度”}，{lat lat:30.21776650，液化天然气：-81.5629100，地址：“美国”}，{lat lat 30.2844080，液化天然气：-81.5633900，地址：“泰米尔纳德邦”}，{lat 30.2843840，液化天然气：-81.5633890，地址：“泰米尔纳德邦”}；

对于（设i=0；i调用
isLocationOnEdge
时的容差太小


isLocationOnEdge（点、多边形[、公差]）

参数：

点：LatLng

多边形：多边形|多段线

公差：数字可选

返回值：*布尔值

计算给定点是否位于指定公差范围内的多段线或多边形边上或附近。当提供点的纬度和经度与边上最近点之间的差值小于公差时，返回true。默认公差为10-9度

您的代码：


if (google.maps.geometry.poly.isLocationOnEdge(event.latLng, segmentPolyline, 10e-3)) {


工作价值：


if (google.maps.geometry.poly.isLocationOnEdge(event.latLng, segmentPolyline, 10e-7)) {


（当它太大时，它会为段0上的所有位置拾取段1，据我所知，所有其他段都能正确使用您的值）





代码片段：



函数myMap（）{
var mapProp={
中心：新google.maps.LatLng（51.508742，-0.120850），
缩放：5，
};
var map=new google.maps.map（document.getElementById（“googleMap”），mapProp）；
var bounds=new google.maps.LatLngBounds（）；
for（设i=0；i”；
content+=“段的开始=“+segmentPolyline.getPath（）.getAt（0）.toUrlValue（6）+”
”；
content+=“段尾=“+segmentPolyline.getPath（）.getAt（1）.toUrlValue（6）+”
”；
infowindow.setContent（content）；
infowindow.setPosition（event.latLng）；
打开（地图）；
}
}
});
}
变量goldenGatePosition=[{
纬度：30.2179130，
液化天然气：-81.5628150，
地址：泰米尔纳德邦
}, {
纬度：30.2179140，
液化天然气：-81.5627480，
地址：印度
}, {
纬度：30.2177650，
液化天然气：-81.5629100，
地址：美国
}, {
拉脱维亚：30.2844080，
液化天然气：-81.5633900，
地址：泰米尔纳德邦
}, {
纬度：30.2843840，
液化天然气：-81.5633890，
地址：泰米尔纳德邦
}]；


html，
身体，
#谷歌地图{
身高：100%；
宽度：100%；
填充：0；
保证金：0；
}




当我使用发布的代码时，当我单击每个多段线线段时，我会得到它的起点和终点坐标。（）有什么问题？@geocodezip。你能检查一下我的代码吗？我会更新坐标。这就是问题所在。我仍然不明白问题所在。你现在在两组位置中有5个标记，每个标记之间有一条多段线。Wh