Google Maps Polylineポイント間をクリック

-1

Google Maps API 3を使用すると、クリックイベントが発生したポリラインがあります。ユーザーがクリックしたパスの2つのポイントの間を調べる必要があります。理想的にはポイントのインデックス。Google Maps Polylineポイント間をクリック

以下は、主にGoogleドキュメントから直接取得されたサンプルページですが、clickイベントが追加されました。実際のアプリにははるかに複雑なポリラインがあります。

これを行う方法はありますか？

感謝

<!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>

出典

2017-11-17 pbs

は、以下の迅速かつ汚いコードが最高と無愛想に最適化することができないかもしれませんが、私は年以来、仕事しますそれ。

私はポリクリックイベントに持ってこのコード：

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以上です。ポイント

出典

2017-11-18 11:03:08 ReFran

私はこのパスを開始しましたが、カットバック道路があると問題が発生します。「最も近い」ポイントは、あなたのルートのその時点で実際にはいない道路にある可能性があります –

試してみてください。

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); 

};

出典

2017-11-17 10:57:40

多くのありがとう - しかし、これはパスを出力します。ユーザーがポイント0と1、または2と3などの間をクリックしたことを知る必要があります。 – pbs

Google Maps Polylineポイント間をクリック

答えて

関連する問題