我正在尝试为谷歌地图添加多个标记。
我的代码:
function createMarkers(myArray) {
var myOptions = {
zoom:6,
center: new google.maps.LatLng(28.704059, 77.102490)
};
var map = new google.maps.Map(document.getElementById("map_canvas"), myOptions);
//shows the object in console with length of 3
console.log(myArray);
//but here length return is 0 so no Entry on FOR Loop
console.log(myArray.length);
for(var x=0;x<myArray.length;x++){
var marker = new google.maps.Marker({
position: myArray[i],
map: map,
title: 'Hello World!'
});
}
}
function initialize(){
var geocoder = new google.maps.Geocoder();
var cityArray = ['Agra','Delhi','Varanasi'];
var myLatLng = [];
for(var i=0;i<cityArray.length;i++){
geocoder.geocode({
'address': cityArray[i]+', India'
}, function(results, status) {
if (status == google.maps.GeocoderStatus.OK) {
var Lat = results[0].geometry.location.lat();
var Lng = results[0].geometry.location.lng();
myLatLng.push({'lat': Lat, 'lng': Lng});
} else {
alert("Something got wrong " + status);
}
});
}
//console.log(myLatLng);
createMarkers(myLatLng);
}
google.maps.event.addDomListener(window, "load", initialize);
<style>
html,
body,
#map_canvas {
height: 100%;
width: 100%;
margin: 0px;
padding: 0px
}
</style>
<div id="map_canvas"></div>
我在对象数组中得到了记录和逻辑。现在我想在createMarkers(myLatLng)函数中迭代它。但在此函数中,我能够将此对象记录到控制台并显示长度为3。但是当想要获得循环的长度时,它总是返回0;
答案 0 :(得分:-1)
如评论中所述,您的问题在于异步回调。
当JS预先形成&#34; async&#34;操作(如jQuery ajax
和geocoder.geocode
)操作需要一些时间,但此请求下面的代码无需等待即可执行。
这就是为什么geocoder.geocode
里面有这个函数检查它是否成功的原因,这个:
function(results, status) {
if (status == google.maps.GeocoderStatus.OK) {
var Lat = results[0].geometry.location.lat();
var Lng = results[0].geometry.location.lng();
myLatLng.push({'lat': Lat, 'lng': Lng});
createMarkers(myLatLng); // THIS IS A NEW LINE
} else {
alert("Something got wrong " + status);
}
仅在您的通话完成后执行。
只需在callback function
内传递createMarkers(myLatLng);
,它就可以按计划运行。