[英]Google map (geocoder.geocode) breaks the markers list while using address instead of LatLng
Chaps, Please Have a look at my google map from. 小伙子,请看看我的Google地图。 It works while I am using LatLng for showing the location. 当我使用LatLng显示位置时,它可以工作。 the problem is using Geocode to convert address to LatLng. 问题是使用地理编码将地址转换为LatLng。
although the marker shows up for only the first address , the Infowindow wont get attached to it. 尽管标记仅显示第一个地址,但Infowindow不会附加到该地址。 Also after the first address is reached in the loop it breaks and no more location or addresses are being shown. 同样,在循环中到达第一个地址后,它会中断,并且不再显示其他位置或地址。 It shows all the location with latLng but miss behaves when reaches addresses ( using geocode) 它显示所有带有latLng的位置,但是到达地址时会错过行为(使用地址解析)
Link to the complete code is on : http://jsfiddle.net/6cs2uLrL/8/ 链接到完整的代码,位于: http : //jsfiddle.net/6cs2uLrL/8/
var clients_details;
var infowindow =[];
var content =[
'QLD marker','SA marker','WA marker','VIC marker','random marker'
];
var geocoder;
var map;
var clients_details =
[
{location:"-26.6719304,153.0889225,17z",address: null},
{location:"-34.927883,138.610688,17",address: null},
{location: null ,address:"Perth, WA"},
{location: null ,address:"Melbourne, VIC"},
{location:"-39.927883,150.610688,17",address: null}
];
/**
*
* Draw google map with markers
*/
function initialize()
{
geocoder = new google.maps.Geocoder();
// Sydney
var defaultLatlng = new google.maps.LatLng(-34.397, 150.644);
var mapOptions =
{
center: defaultLatlng ,
//disableDefaultUI:true,
mapTypeControl: false,
zoomControl: true,
zoomControlOptions: {
style: google.maps.ZoomControlStyle.SMALL
},
zoom: 3
};
map = new google.maps.Map(document.getElementById('map-canvas'), mapOptions);
// Makes sure clients_details is populated
if (clients_details != null)
showMarkers(clients_details);
} // initialize
/**
* Asigning info to the markers on the map
* @param {list} clients_details
*
*/
function showMarkers(clients_details)
{
var marker = [];
for (var i = 0; i < clients_details.length; i++)
{
infowindow[i] = new google.maps.InfoWindow({ content: content[i] });
var client_location='';
if (clients_details[i]['location'] !== null)
{
// Geting Lat and Lng from the database string
LatLng = clients_details[i]['location'].split(',');
// Making number from string
Lat = Number (LatLng[0]);
Lng = Number(LatLng[1]);
client_location = new google.maps.LatLng (Lat,Lng);
marker[i] = new google.maps.Marker({
position: client_location,
map: map,
title: 'LatLng'
});
}
else
{
client_address = clients_details[i]['address'];
geocoder.geocode(
{ 'address': client_address},
function(results, status)
{
debugger;
if (status == google.maps.GeocoderStatus.OK)
{
client_location = results[0].geometry.location;
marker[i] = new google.maps.Marker({
position: client_location,
map: map,
title: 'address'
});
}
else
alert('Geocode was not successful for the following\n\
reason: ' + clients_details[i]['name']+'\n' + status);
});
}
// Add 'click' event listener to the marker
addListenerMarkerList(infowindow[i], map, marker[i]);
}// for
}// function
/*
* Adds a click listner to the marker object
*
* */
function addListenerMarkerList(infowindow, map, marker )
{
google.maps.event.addListener(marker, 'click', function() {
infowindow.open(map,marker);
});
}
google.maps.event.addDomListener(window, 'load', initialize);
There are two problems with your code. 您的代码有两个问题。
First, at the end of the for
loop you're calling addListenerMarkerList(infowindow[i], map, marker[i]);
首先,在for
循环结束时,您要调用addListenerMarkerList(infowindow[i], map, marker[i]);
. 。 However, if you're geocoding the location, marker[i]
will only be created after the geocoder has returned (in your function(results, status)
callback). 但是,如果您要对位置进行地理编码,则只会在地理编码器返回后(在function(results, status)
回调中)创建marker[i]
。 To resolve this, you need to call addListenerMarkerList
in the if
branch as well as in the geocoding callback. 要解决此问题,您需要在if
分支以及地理编码回调中调用addListenerMarkerList
。
Second, in your geocoding callback function(results, status)
, you're accessing the loop variable i
. 其次,在您的地址解析回调function(results, status)
,您正在访问循环变量i
。 A for
loop does, however, not create a new scope. 但是, for
循环不会创建新的作用域。 That means that the value of i
is not wrapped with your callback. 这意味着i
的值不包含在您的回调中。 When the callback is executed, the for
loop will have finished and, hence, i
will be equal to clients_details.length
. 当执行回调时, for
循环将结束,因此, i
将等于clients_details.length
。 The workaround is to use a function closure. 解决方法是使用函数闭包。
Conceptually, the fixed code looks like this ( JSFiddle ). 从概念上讲,固定代码看起来像这样( JSFiddle )。
for (var i = 0; i < clients_details.length; i++) {
...
if (clients_details[i]['location'] !== null) {
...
marker[i] = new google.maps.Marker(...);
addListenerMarkerList(infowindow[i], map, marker[i]);
} else {
....
geocoder.geocode(..., (function(i) {
return function(results, status) {
...
marker[i] = new google.maps.Marker(...);
addListenerMarkerList(infowindow[i], map, marker[i]);
}
})(i));
}
//addListenerMarkerList(infowindow[i], map, marker[i]); // Will not work
}
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.