Google Maps Polylinie klicken zwischen den Punkten

-1

Mit Google Maps API 3, habe ich eine Polylinie mit einem Klick-Ereignis. Ich muss herausfinden, zwischen welchen zwei Punkten in dem Pfad der Benutzer geklickt hat. Idealerweise der Index der Punkte.Google Maps Polylinie klicken zwischen den Punkten

Im Folgenden finden Sie eine Beispielseite, die größtenteils direkt von Google Docs stammt, aber das Klickereignis hinzugefügt wurde. Die eigentliche App hat viel komplexere Polylinien.

Gibt es eine Möglichkeit, dies zu tun?

Vielen Dank

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

Quelle

2017-11-17 pbs

Die folgende quick and dirty-Code kann nicht die beste und mürrische optimiert werden kann, aber ich seit Jahr arbeiten mit es.

Dieser Code i im Poly Click-Ereignis haben:

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

Ich benutze es den Punkt vor und den Punkt nach der Markierung auf dem Linienzug zu markieren. Im Anschluss an die Funktion:

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

Vielleicht hat jemand mit einem besseren js und Mathematik. Wissen kann einspringen und den Code verbessern. Aber wie gesagt funktioniert es für mich, wobei meine Track-Punkte für meine Radtouren sehr selten über 2-3-tsd liegen. Punkte

Quelle

2017-11-18 11:03:08 ReFran

Ich habe diesen Pfad gestartet, aber es verursacht Probleme, wenn es eine Kürzungsstraße gibt. Der "nächstgelegene" Punkt befindet sich möglicherweise auf einer Straße, auf der Sie an dieser Stelle nicht gerade sind –

Versuchen:

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

};

Quelle

2017-11-17 10:57:40

Vielen Dank - aber das gibt nur den Pfad aus. Ich muss wissen, dass der Benutzer zwischen Punkten 0 und 1, oder 2 und 3 etc. geklickt hat. – pbs

Google Maps Polylinie klicken zwischen den Punkten

Antwort

Verwandte Themen