如何使用谷歌地图获取折线中的坐标？答案

【问题标题】：How to get coordinates in polyline using google map?如何使用谷歌地图获取折线中的坐标？
【发布时间】：2020-10-26 04:29:07
【问题描述】：

我试图在谷歌地图中创建一条折线。它已创建并且折线也可以正常工作。但我需要什么时候点击折线来获取坐标。我的场景（我在google map.so中有三个标记，用于连接折线markerA的三个标记连接到markerB连接到markerC。当我单击markerA和makrerB之间的折线时。我需要两个标记纬度和经度）。如何实现这个场景。

我的代码

<!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: 11.0168,lng: 76.9558},{lat: 11.6643,lng: 78.1460},{lat:11.2189,lng:78.1674}];
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);
var infowindow = new google.maps.InfoWindow();
var codeStr=''
google.maps.event.addListener(flightPath, 'click', function(event) {
  infowindow.setContent("content");
//         var pathArr = flightPath.getPath()
//         for (var i = 0; i < pathArr.length; i++){
//     codeStr = '{lat: ' + pathArr.getAt(i).lat() + ', lng: ' + pathArr.getAt(i).lng() + '}' ;
//     console.log(codeStr)
  

// };
console.log(event.latLng)
var length = this.getLength();
                                        var mid = Math.round( length / 2 );
                                        var pos = this.getAt( mid );
console.log(pos)
        // infowindow.position = event.latLng;
        infowindow.setPosition(event.latLng);
        infowindow.open(map);
    });
}  
</script>

<script src="https://maps.googleapis.com/maps/api/js?key=AIzaSyCHmYOxkvd4u3rbHqalUSlGOa-b173lygA&callback=myMap"></script>

</body>
</html>

谷歌地图

【问题讨论】：

标签： google-maps google-maps-api-3 google-maps-markers google-maps-api-2

【解决方案1】：

最简单的方法：

包括谷歌地图几何库。
使用poly namespace isLocationOnEdge 方法来检测点击在折线的哪一段。输出该段的两端坐标。

isLocationOnEdge(point, poly[, tolerance])
参数：
point: LatLng
poly: Polygon|Polyline
tolerance: number optional
返回值：布尔值
计算给定点是否位于或靠近折线或多边形的边缘，在指定的容差范围内。当提供的点的纬度和经度与边缘上最近的点之间的差小于容差时，返回 true。公差默认为 10-9 度。

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)]
    });
    // check to see if the clicked point is along that segment
    if (google.maps.geometry.poly.isLocationOnEdge(event.latLng, segmentPolyline,10e-3)) {
      // output the segment number and endpoints in the InfoWindow
      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);
    }
  }
});

proof of concept fiddle

代码 sn-p：

/* Always set the map height explicitly to define the size of the div
       * element that contains the map. */

#googleMap {
  height: 80%;
}


/* Optional: Makes the sample page fill the window. */

html,
body {
  height: 100%;
  margin: 0;
  padding: 0;
}

<h1>My First Google Map</h1>

<div id="googleMap"></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: 11.0168,
      lng: 76.9558
    }, {
      lat: 11.6643,
      lng: 78.1460
    }, {
      lat: 11.2189,
      lng: 78.1674
    }];
    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: 'Golden Gate Bridge'
      });
      bounds.extend(goldenGatePosition[i]);
    }
    var flightPath = new google.maps.Polyline({
      path: goldenGatePosition,
      strokeColor: "#0000FF",
      strokeOpacity: 0.8,
      strokeWeight: 2
    });
    flightPath.setMap(map);
    map.fitBounds(bounds);

    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)]
        });
        // check to see if the clicked point is along that segment
        if (google.maps.geometry.poly.isLocationOnEdge(event.latLng, segmentPolyline, 10e-3)) {
          // output the segment number and endpoints in the InfoWindow
          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=AIzaSyCkUOdZ5y7hMm0yrcCQoCvLwzdM6M8s5qk&callback=myMap"></script>

【讨论】：