[英]Google maps api v3 not showing polylines
I'm using google maps v3. 我正在使用Google Maps v3。 I created some markers, with info from json file.
我创建了一些标记,其中包含来自json文件的信息。 I'm trying to put some routelines on my map, but this isn't working and I have no idea why not.
我正在尝试在地图上放置一些路线,但这是行不通的,我也不知道为什么不这样做。
Here is my jQuery code: 这是我的jQuery代码:
var positions = [];
var map;
$(function () {
map = initializeMap();
loadMarkers();
var flightPath = new google.maps.Polyline({
path: positions,
strokeColor: "#FF0000",
strokeOpacity: 1.0,
strokeWeight: 2
});
flightPath.setMap(map);
});
function initializeMap() {
var myOptions = {
center: new google.maps.LatLng(41.376809, -37.441406),
zoom: 3,
mapTypeId: google.maps.MapTypeId.ROADMAP
};
var map = new google.maps.Map(document.getElementById("map_canvas"),
myOptions);
return map;
};
function loadMarkers() {
var latlng;
var marker;
var image = 'img/praline.png';
$.getJSON('json/markers.json', function (data) {
$(data).each(function (index, value) {
latlng = new google.maps.LatLng(value.x, value.y);
marker = new google.maps.Marker({
position: latlng,
map: map,
title: value.title,
icon: image
});
positions[value.id - 1] = latlng;
});
});
}
And here my json file: 这是我的json文件:
[
{
"class":"marker",
"id":1,
"x":"47.175303",
"y":"7.064539",
"title":"Camille Bloch",
"date":"21/10/2010",
"details":"<h1>Camille Bloch</h1><h4>Courtelary, CH</h4><img src='img/camille_bloch.gif' alt='Camille Bloch' width='100px'>"
},
{
"class":"marker",
"id":2,
"x":"51.903421",
"y":"4.483248",
"title":"Haven Rotterdam",
"date":"22/10/2010",
"details":"<h1>Haven Rotterdam</h1><h4>Rotterdam, NL</h4><img src='img/camille_bloch.gif' alt='Camille Bloch' width='100px'>"
}
]
Thanks in advance. 提前致谢。
Since AJAX is asynchronous, you need to put the polyline inside that getJSON callback (after the LatLngs are actually created), like below, or some variation. 由于AJAX是异步的,因此您需要将折线放入getJSON回调中(在实际创建LatLng之后),如下所示,或进行一些修改。 Otherwise the code is just setting an empty positions array to the polyline.
否则,代码只是将空位置数组设置为折线。
$.getJSON('json/markers.json', function(data) {
function(data) {
$(data).each(function(index, value) {
alert(value.x);
latlng = new google.maps.LatLng(value.x, value.y);
marker = new google.maps.Marker({
position: latlng,
map: map,
title: value.title,
icon: image
});
positions[value.id - 1] = latlng;
});
var flightPath = new google.maps.Polyline({
path: positions,
strokeColor: "#FF0000",
strokeOpacity: 1.0,
strokeWeight: 2
});
flightPath.setMap(map);
});
}
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.