谷歌地图折线点击点之间答案

【问题标题】：Google Maps Polyline click between points谷歌地图折线点击点之间
【发布时间】：2018-05-01 02:52:35
【问题描述】：

使用 Google Maps api 3，我有一条带有点击事件的折线。我需要找出用户单击了路径中的哪两个点之间。理想情况下是点的索引。

下面是一个示例页面，大部分是直接取自谷歌文档，但添加了点击事件。实际应用中的折线要复杂得多。

有没有办法做到这一点？

非常感谢

<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="initial-scale=1.0, user-scalable=no">
<meta charset="utf-8">
<title>Polylines</title>
<style>    
  #map {
    height: 100%;
  }
  /* Optional: Makes the sample page fill the window. */
  html, body {
    height: 100%;
    margin: 0;
    padding: 0;
  }
  </style>
 </head>
 <body>
      <div id="map"></div>
      <script>
      function initMap() {
          var map = new google.maps.Map(document.getElementById('map'), {
          zoom: 3,
          center: {lat: 0, lng: -180},
          mapTypeId: 'terrain'
      });

      var flightPlanCoordinates = [
         {lat: 37.772, lng: -122.214},
         {lat: 21.291, lng: -157.821},
         {lat: -18.142, lng: 178.431},
         {lat: -27.467, lng: 153.027}
      ];

      var poly = new google.maps.Polyline({
         path: flightPlanCoordinates,
         geodesic: true,
         strokeColor: '#FF0000',
         strokeOpacity: 1.0,
         strokeWeight: 2
       });

       poly.setMap(map);


       google.maps.event.addListener(poly, 'click', function(e) {            
         alert(JSON.stringify(e));
       });

     }
</script>
<script async defer
src="https://maps.googleapis.com/maps/api/js?key=MYAPIKEY&callback=initMap">
</script>

【问题讨论】：

一开始我什至无法触发该事件，这是什么原因？

标签： javascript google-maps google-maps-api-3 polyline

【解决方案1】：

以下快速而肮脏的代码可能不是最好的，并且可以进行优化，但我从一年开始就使用它。

我在 poly click 事件中有这段代码：

    rc = getNearestVertex(poly, event.latLng);
    x = rc.split(":");  //rc = "index:minDiff"
    vertIndex = x[0] *1;
    markerIndexes = vertIndex + ',' +(vertIndex + 1);

我用它来标记折线上的标记之前和之后的点。跟随函数：

function getNearestVertex(poly, pLatLng) {
    // test to get nearest point on poly to the pLatLng point
    // click is on poly, so the nearest vertex is the smallest diff between
    var minDist = 9999999999;
    var minDiff = 9999999999;
    var path = poly.getPath();
    var count = path.length || 0;

    for (var n = 0; n < count - 1; n++) {
        if (n == 0) {
            point = path.getAt(n); 
            dist = g.geometry.spherical.computeDistanceBetween(pLatLng, point);
        }
        //g.geometry.spherical.computeDistanceBetween(aLatLng, bLatLng)
        var pointb = path.getAt(n + 1);
        distb =  g.geometry.spherical.computeDistanceBetween(pLatLng, pointb);
        distp2p = g.geometry.spherical.computeDistanceBetween(point, pointb);
        var pdiff = dist + distb - distp2p;

        //alert(n + " / " +dist +" + " +distb +" - " +distp2p +" = " +pdiff);
        if (pdiff < minDiff) {
            minDiff = pdiff.toFixed(3);
            index = n;
        }
        point = pointb;
        dist = distb;
    } //-> end for
    //alert(index +":" + minDiff);
    return index +":" + minDiff;
} //-> end of getNearestVertex

也许有人有更好的 js 和数学。知识可以跳入并改进代码。但是，正如所说的那样，它对我有用，因此我的自行车旅行的跟踪点很少超过 2-3-tsd。点数

【讨论】：

我是从这条路开始的，但是当有一条小路时它会引起问题。 “最近”点可能位于您路线中实际不在该点的道路上

【解决方案2】：

试试：

    poly.addListener('click', function () {
         getPathVariableCode(poly);
     });
 poly.setMap(map);

    function getPathVariableCode(line){
    var codeStr = '  var linePath = [\n';
    var pathArr = line.getPath();
    for (var i = 0; i < pathArr.length; i++){
        codeStr += '    {lat: ' + pathArr.getAt(i).lat() + ', lng: ' + pathArr.getAt(i).lng() + '}' ;
        if (i !== pathArr.length-1) {
            codeStr += ',\n';
        };

    };

    codeStr += '\n  ];';

    //the coordinates path it´s print on the console of the browser

    console.log (codeStr);
    console.log(pathArr.length);

};

【讨论】：

非常感谢 - 但这只是输出路径。我需要知道用户点击了点 0 和 1，或 2 和 3 等。