Googleマップでポリラインを作成しています。しかし、私はそれを見ることができません。コードは次のとおりです。
$('#mapdiv').html('<div id="map_convas" style="width:640px; height:427px; margin-left:auto; margin-right:auto"></div>');
var centerLatLng = new google.maps.LatLng(obj[i].centerlat, obj[i].centerlong);
var myOptions = {
center: centerLatLng,
zoom: 17,
mapTypeId: google.maps.MapTypeId.ROADMAP,
draggable: true
};
var map_polyline;
var map = new google.maps.Map(document.getElementById("map_convas"),
myOptions);
var marker = new google.maps.Marker({
clickable: true,
position: centerLatLng,
map: map,
zIndex: 1
});
marker.setIcon('http://localhost:8888/images/marker.png');
var locations = obj[0].locations;
// in my current case locations.length is 1
for(var p=0; p<locations.length; p++){
var triangleCoords = new Array();
var markerArray = locations[p];
for(var x=0;x<markerArray.length;x++){
triangleCoords.push(new google.maps.LatLng(markerArray[x].latitude, markerArray[x].longitude));
}
map_polyline = new google.maps.Polyline({
path: triangleCoords,
strokeColor: "#FF0000",
strokeOpacity: 1.0,
strokeWeight: 2
});
map_polyline.setMap(map);
}
// doing some stuff
google.maps.event.trigger(map, "resize");
私が解析してobjを作成しているJsonは次のとおりです。
[
{
"centerlat": 55.68369272317236,
"centerlong": 13.176000376097194,
"locations": [
[
{
"longitude": 13.17480473780369,
"latitude": 13.17480473780369
},
{
"longitude": 13.17456847989296,
"latitude": 13.17456847989296
},
{
"longitude": 13.17426541821395,
"latitude": 13.17426541821395
},
{
"longitude": 13.1741324253503,
"latitude": 13.1741324253503
},
{
"longitude": 13.17386236043011,
"latitude": 13.17386236043011
},
{
"longitude": 13.17352138460909,
"latitude": 13.17352138460909
}
]
]
}
]
そして、次のコード行を使用して解析しています:
var obj = jQuery.parseJSON(result);
マップの中心、マーカー、サイズなど、他のすべては正常に機能しています。唯一のことは、マップ上にポリラインが表示されないことです。私はmarkerArrayとtriangleCoordsの値をチェックするために警告を出しました。彼らは大丈夫です。ポリラインが表示されない理由を教えてください。以前より多くのマップ インスタンスを使用しています。それらのために問題はありますか?前もって感謝します。