如何使用Google Map API在折线中分配信息窗口

分类：编程问答

如何解决如何使用Google Map API在折线中分配信息窗口

我的场景。我有五个标记并连接到折线。当我在折线之间单击标记a到标记b时，它将显示一个信息窗口。在信息中，该窗口具有标记地址和标记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,{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>

当我单击折线时。如何从多义线的一端到另一端获取标记坐标。

解决方法

您致电isLocationOnEdge的容忍度太小。

isLocationOnEdge isLocationOnEdge（point，poly [，tolerance]）
参数：
要点： LatLng
多边形：多边形|折线
公差：数字可选
返回值：布尔值
计算给定点是在指定公差范围内是位于折线上还是折线附近或多边形的边缘上。当所提供点的经纬度与边缘上最近的点之间的纬度和经度之差小于公差时，返回true。公差默认为10-9度。

您的代码：

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

工作价值：

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

（当它太大时，它将为段0上的所有位置提取段1，据我所知，所有其他段都可以正确地使用您的值）

proof of concept fiddle

screenshot showing correct infowindow on segment 0

代码段： 

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 bounds = new google.maps.LatLngBounds();
  for (let i = 0; i < goldenGatePosition.length; i++) {
    var marker = new google.maps.Marker({
      position: goldenGatePosition[i],map: map,title: goldenGatePosition[i].address
    });
    if (i == 0 || i == 1) bounds.extend(marker.getPosition());
  }
  map.fitBounds(bounds);
  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,10e-7)) {
        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);
        console.log("break")

        // 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);
      }
    }
  });
}
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,{
  lat: 30.2843840,lng: -81.5633890,address: 'Tamil Nadu'
}];
html,body,#googleMap {
  height: 100%;
  width: 100%;
  padding: 0;
  margin: 0;
}
<div id="googleMap"></div>
<script src="https://maps.googleapis.com/maps/api/js?key=AIzaSyCkUOdZ5y7hMm0yrcCQoCvLwzdM6M8s5qk&callback=myMap&libraries=geometry" defer></script>

版权声明：本文内容由互联网用户自发贡献，该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容， 请发送邮件至 dio@foxmail.com 举报，一经查实，本站将立刻删除。

相关推荐

Selenium Web驱动程序和Java元素在(x，y)点处不可单击其他元素将获得点击?
Selenium Web驱动程序和Java。元素在(x，y)点处不可单击。其他元素将获得点击?
Python-如何使用点“” 访问字典成员？
Python-如何使用点“。” 访问字典成员？
Java 字符串是不可变的到底是什么意思？
Java 字符串是不可变的。到底是什么意思？
Java中的“ final”关键字如何工作？我仍然可以修改对象
Java中的“ final”关键字如何工作？（我仍然可以修改对象。）
“loop:”在Java代码中这是什么，为什么要编译？
“loop:”在Java代码中。这是什么，为什么要编译？
java.lang.ClassNotFoundException：sun.jdbc.odbc.JdbcOdbcDriver发生异常为什么？
java.lang.ClassNotFoundException：sun.jdbc.odbc.JdbcOdbcDriver发生异常。为什么？
这是用Java进行XML解析的最佳库
这是用Java进行XML解析的最佳库。
Java的PriorityQueue的内置迭代器不会以任何特定顺序遍历数据结构为什么？
Java的PriorityQueue的内置迭代器不会以任何特定顺序遍历数据结构。为什么？
如何在Java中聆听按键时移动图像
如何在Java中聆听按键时移动图像。
Java“Program to an interface”这是什么意思？
Java“Program to an interface”。这是什么意思？
pythonJavaScriptjavaHTMLPHPreactjsC#AndroidCSSNode.jssqlrpython-3.xMysqLjQueryc++pandasFlutterangularIOSdjangolinuxswifttypescript路由器JSON路由器设置无线路由器h3c华三华三路由器设置华三路由器电脑软件教程arraysdocker软件图文教程Cvue.jslaravelspring-boot