핀으로 Google Map Api 폴리 라인을 만드는 방법은 무엇입니까?

Question

나는이

같은 폴리 라인 맵을 생성했지만 나는 하나 같이 ... 모든 지점에서 핀을 설정하려는 :

내가 그렇게 할 수 있습니까? 이 내 자바 스크립트의 코드

...

<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에 대한 문서를 읽으면 그것은 defintely 도움이 될 것이다.

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>