Wie Google Map Api Polylinie mit Pin machen?

Question

Ich habe Linienzug Karten wie diese

aber ich möchte setzen Stift in jedem Punkt erstellt worden ... wie diese:

Wie kann ich das tun?

dieser Code mein Javascript das ist ...

<script> 
     latawal = <?php echo json_encode($locationawal['lat'])?>; 
     longawal = <?php echo json_encode($locationawal['lon'])?>; 

     var GoogleMaps = function() { 
      var mapPolylines = function() { 
       var map = new GMaps({ 
        div: '#gmap_polylines', 
        lat: latawal, 
        lng: longawal, 
        click: function(e){ 
         console.log(e); 
        } 
        }); 

        path = [ 
         <?php foreach ($locationawal10 as $row){ ?> 
          [<?php echo json_encode($row['lat'])?>, <?php echo json_encode($row['lon'])?>], 
         <?php } ?> 
        ]; 

        map.drawPolyline({ 
        path: path, 
        strokeColor: 'Red', 
        strokeOpacity: 0.6, 
        strokeWeight: 4 
       }); 
      } 
      return { 
       //main function to initiate map samples 
       init: function() { 
        mapPolylines(); 
       } 

      }; 

     }(); 
    </script> 

Dank vor .... ich hoffe, jemand kann mir diesen ... sorry für mein schlechtes Englisch ..

Answer 1

Es kann helfen scheint, dass Sie mehrere Marker machen müssen. Sie verwenden die Latlang-Werte aus Ihrenund longawal JSON-Dateien für jeden Marker als LatLng Werte für die Marker. Überprüfen Sie diese SO thread für zusätzliche Referenz. Ich habe eine kurze Demo für Sie gemacht, um die Idee zu vermitteln. Sie müssen möglicherweise Teile ändern, die eine sauberere Codierung benötigen. Dies ist der relevante Teil:

function initMap() { 
     var map = new google.maps.Map(document.getElementById('map'), { 
      zoom: 3, 
      center: {lat: 0, lng: -180}, 
      mapTypeId: google.maps.MapTypeId.TERRAIN 
     }); 

     var flightPlanCoordinates = [ 
      {lat: -32.342841, lng: 119.882813}, 
      {lat: -32.194209, lng: 144.492188}, 
      {lat: -19.248922, lng: 145.546875}, 
      {lat: -18.916680, lng: 124.804688} 
     ]; 

     var markerCoordinates = [ 
      [-32.342841, 119.882813], 
      [-32.194209, 144.492188], 
      [-19.248922, 145.546875], 
      [-18.916680, 124.804688] 
     ]; 

     var marker, i; 

    for (i = 0; i < markerCoordinates.length; i++) { 

     var marker = new google.maps.Marker({ 
      position: new google.maps.LatLng(markerCoordinates[i][i-i], markerCoordinates[i][1]), 
      map: map, 
      title: 'Hello World!' 
     }); 
    } 

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

     flightPath.setMap(map); 
     } 

Dies ist, wie es aussieht:

Es wäre auf jeden Fall helfen, wenn Sie die Dokumentation zu Markers zu lesen.

Answer 2

Einfachste Lösung ist die path zu bearbeiten und Marker an jedem Eckpunkt hinzufügen.

for (var i=0; i<path.length; i++) { 
    map.addMarker({ 
    lat: path[i].lat, 
    lng: path[i].lng, 
    }) 
} 

proof of concept fiddle

Code-Schnipsel:

function initialize() { 
 
    latawal = 41.5; 
 
    longawal = -72.4; 
 

 
    var GoogleMaps = function() { 
 
    var mapPolylines = function() { 
 
     var map = new GMaps({ 
 
     div: '#gmap_polylines', 
 
     lat: latawal, 
 
     lng: longawal, 
 
     zoom: 8, 
 
     click: function(e) { 
 
      console.log(e); 
 
     } 
 
     }); 
 

 
     path = [{ 
 
     lat: 42, 
 
     lng: -72 
 
     }, { 
 
     lat: 41, 
 
     lng: -72.4 
 
     }, { 
 
     lat: 41.5, 
 
     lng: -72.6 
 
     }]; 
 

 
     map.drawPolyline({ 
 
     path: path, 
 
     strokeColor: 'Red', 
 
     strokeOpacity: 0.6, 
 
     strokeWeight: 4 
 
     }); 
 
     for (var i = 0; i < path.length; i++) { 
 
     map.addMarker({ 
 
      lat: path[i].lat, 
 
      lng: path[i].lng, 
 
     }) 
 
     } 
 
    } 
 
    return { 
 
     //main function to initiate map samples 
 
     init: function() { 
 
     mapPolylines(); 
 
     } 
 
    }; 
 
    }(); 
 
    GoogleMaps.init(); 
 
} 
 
google.maps.event.addDomListener(window, "load", initialize);

html, 
 
body, 
 
#gmap_polylines { 
 
    height: 100%; 
 
    width: 100%; 
 
    margin: 0px; 
 
    padding: 0px 
 
}

<script src="https://maps.googleapis.com/maps/api/js"></script> 
 
<script src="https://cdnjs.cloudflare.com/ajax/libs/gmaps.js/0.4.12/gmaps.min.js"></script> 
 
<div id="gmap_polylines"></div>