ピンを使ってGoogle Map Apiポリラインを作成するには？

Question

私はこの

などの作成したポリラインマップしてきたが、私はすべての点で設定した端子が欲しい...このような ： 私はそれを行うことができますどのように

？

これが私のjavascriptのコードです...

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

おかげで前に....私は誰かがこのことについて私を助けることを願って...私の悪い英語のため申し訳ありません..

Answer 1

それ複数のマーカーを作成する必要があるようです。各マーカーのlatawalとlongawal jsonファイルのlatlangの値は、LatLngというマーカーの値として使用されます。詳細については、SO threadをご確認ください。 アイデアを伝えるためのデモをあなたのためにしました。よりクリーンなコーディングが必要な部品を修正する必要があるかもしれません。これは、関連する部分である：

これは、それがどのように見えるかです

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

：

あなたもMarkersに関するドキュメントを読めば、それはよっぽど役立つだろう。

Answer 2

最も簡単な解決策は、pathを処理し、各頂点にマーカーを追加することです。

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

proof of concept fiddle

コードスニペット：

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>