gMap 및 jQuery를 사용하여 폴리선을 그리는 방법은 무엇입니까?

Question

내 프로젝트에 gMap jQuery 플러그인을 사용하고 싶습니다. 내가 성공적으로 Google지도를 표시하고 일부 마커를 표시 할 수 있지만 폴리 라인을 그리는 방법을 찾을 수 없습니다.

당신은 또한 내부 GMAP의 일부 기능을 사용할 수 있습니다 gMap documentation에서

$(window).ready(function() { 
    var data = { 
    'latitude': 0.000000, 
    'longitude': -180.000000, 
    'zoom': 3, 
    'maptype': "terrain", 
    }; 
    var gps_coordinates = { 
    strokeColor: "#FF0000", 
    strokeOpacity: 1.0, 
    strokeWeight: 2, 
    path: [ 
     {'latitude':37.772323,'longitude':-122.214897}, 
     {'latitude':21.291982,'longitude':-157.821856}, 
     {'latitude':-18.142599,'longitude':178.431000}, 
     {'latitude':-27.467580,'longitude':153.027892} 
    ] 
    }; 

    $('#map').gMap(data); 
    $('#map').gMap("Polyline", gps_coordinates); 
}); 

이 주 :

나는이 코드를 JS 있습니다.

그래서 나는 google.maps.Polyline 함수를 사용하여 폴리 라인을 그릴 수 있습니다. 그러나 어떻게?

Answer 1

gMap 플러그인에 익숙하지 않습니다. 난 그냥 구글지도 API 셋을 사용하여이 작업을 수행 한 경우 그러나, 나는 이런 식으로 뭔가를 할 거라고 :

var homeLatlng= new google.maps.LatLng(0, -180); 

var myOptions = { 
    zoom: 3, 
    center: homeLatlng, 
    mapTypeId: google.maps.MapTypeId.TERRAIN 
}; 
var map = new google.maps.Map(document.getElementById("map_canvas"), myOptions); 

var pathLatLng; 

var paths = [ 
     {'latitude':37.772323,'longitude':-122.214897}, 
     {'latitude':21.291982,'longitude':-157.821856}, 
     {'latitude':-18.142599,'longitude':178.431000}, 
     {'latitude':-27.467580,'longitude':153.027892} 
    ]; 

for (var i = 0; i < paths.length; i++) { 
    pathLatLng = new google.maps.LatLng(paths[i].latitude, paths[i].longitude); 

    path = new google.maps.Polyline({ 
     path: [homeLatlng, pathLatLng], 
     strokeColor: "##FF0000", 
     strokeOpacity: 1.0, 
     strokeWeight: 2, 
     geodesic: true, 
     map: map 
    }); 
} 

이지도는 두 대상 사이의 진정한 최단 경로를 나타내는 곡선을 그립니다. 직선 만 원하면 geodesic 속성을 false로 설정하십시오.

Answer 2

Gmap에는 폴리 라인과 같은 도형을 추가 할 수있는 오버레이 확장 (jquery.ui.map.overlays.js)이 있습니다. 여기

은 예입니다 (avlMarkers가 된 LatLng의 배열입니다) : 당신이 위도를 혼동하는 것처럼 그것이 나에게 보이는 또한

var colour = '#0000FF'; 
var polyline = { 
    path: avlMarkers, 
    strokeColor: colour, 
    strokeOpacity: 1.0, 
    strokeWeight: 4 
}; 
$('#map_canvas').gmap('addShape', 'Polyline', polyline);