![](/img/trans.png)
[英]using google map geocoder.geocode before initializing the map
[英]Google map (geocoder.geocode) breaks the markers list while using address instead of LatLng
小伙子,請看看我的Google地圖。 當我使用LatLng顯示位置時,它可以工作。 問題是使用地理編碼將地址轉換為LatLng。
盡管標記僅顯示第一個地址,但Infowindow不會附加到該地址。 同樣,在循環中到達第一個地址后,它會中斷,並且不再顯示其他位置或地址。 它顯示所有帶有latLng的位置,但是到達地址時會錯過行為(使用地址解析)
鏈接到完整的代碼,位於: 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);
您的代碼有兩個問題。
首先,在for
循環結束時,您要調用addListenerMarkerList(infowindow[i], map, marker[i]);
。 但是,如果您要對位置進行地理編碼,則只會在地理編碼器返回后(在function(results, status)
回調中)創建marker[i]
。 要解決此問題,您需要在if
分支以及地理編碼回調中調用addListenerMarkerList
。
其次,在您的地址解析回調function(results, status)
,您正在訪問循環變量i
。 但是, for
循環不會創建新的作用域。 這意味着i
的值不包含在您的回調中。 當執行回調時, for
循環將結束,因此, i
將等於clients_details.length
。 解決方法是使用函數閉包。
從概念上講,固定代碼看起來像這樣( 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.