我有以下代码循环遍历一系列标记;
地方数组：
var map_markers = [['Windsor Road, Salisbury, SP2 7NF <br/> 2nd Line', 'Windsor Road, Salisbury,', 1],['Bishopdown Road, Salisbury, SP1 3DT <br/> 2nd Line', 'Bishopdown Road, Salisbury,', 2],['Gainsborough Close, Salisbury, SP2 9HD <br/> 2nd Line', 'Gainsborough Close, Salisbury,', 3],['Montgomery Gardens, Salisbury, SP2 7UQ <br/> 2nd Line', 'Montgomery Gardens, Salisbury,', 4],['Manor Court, Salisbury, SP1 1LN <br/> 2nd Line', 'Manor Court, Salisbury,', 5],];
显然以上所有都需要地理编码以便我可以在地图上为每个放置一个引脚，我为此构建了以下功能：
function init_map(map_id, center_address, markers) {
geocoder = new google.maps.Geocoder();
geocoder.geocode( { 'address': center_address, 'region': 'uk' }, function(results, status) {
if (status == google.maps.GeocoderStatus.OK) {
//Init Map Options
var mapOptions = {
zoom: 11,
center: results[0].geometry.location,
mapTypeId: google.maps.MapTypeId.ROADMAP
}
var map = new google.maps.Map(document.getElementById(map_id), mapOptions);
var infowindow = new google.maps.InfoWindow();
var marker, i;
for (i = 0; i < markers.length; i++) {
var marker_address = markers[i][1];
var marker_content = markers[i][0];
geocoder.geocode( { 'address': marker_address , 'region': 'uk' }, function(results, status) {
if (status == google.maps.GeocoderStatus.OK) {
marker = new google.maps.Marker({
position: new google.maps.LatLng(results[0].geometry.location.lat(), results[0].geometry.location.lng()),
map: map
});
google.maps.event.addListener(marker, 'click', (function(marker, i) {
return function() {
infowindow.setContent(marker_content);
infowindow.open(map, marker);
}
}) (marker, i));
} else {
alert("There was a issue getting the property information.")
}
});
}
} else {
alert("Unable to find address: " + status);
}
});
}
使用上面的代码，标记正确放置在地图上，当我单击一个标记时，infoWindow会出现，但是，它似乎卡在循环上，只显示所有标记上的最终数组元素内容。有人可以推荐修复吗？
答案 0 :(得分：1)
问题是你在循环中创建marker_content，但你的事件监听器函数只会知道它的最终值。这是我写这个怎么写的：
...
for (i = 0; i < markers.length; i++) {
var marker_address = markers[i][1];
var marker_content;
geocoder.geocode( { 'address': marker_address , 'region': 'uk' }, function(results, status) {
if (status == google.maps.GeocoderStatus.OK) {
marker = new google.maps.Marker({
position: new google.maps.LatLng(results[0].geometry.location.lat(), results[0].geometry.location.lng()),
map: map
});
marker_content = markers[i][0];
bindInfoWindow(marker, map, infowindow, marker_content);
} else {
alert("There was a issue getting the property information.")
}
});
}
...
// new global function, NOT nested in init_map
function bindInfoWindow(marker, map, infowindow, content) {
google.maps.event.addListener(marker, 'click', function() {
infowindow.setContent(content);
infowindow.open(map, marker);
}
}
答案 1 :(得分：0)
以下是我用来对所有这些进行排序的示例代码。它具有更高级的信息框设置，因此您可能对此不感兴趣。但请注意我的var标记和微调器。这仅适用于代码的标记段...
var data = { "count": 10785236,
"locationstuff": [{"photo_id": 27932, "photo_title": "Atardecer en Embalse", "photo_url": "http://www.panoramio.com/photo/27932", "photo_file_url": "http://mw2.google.com/mw-panoramio/photos/medium/27932.jpg", "longitude": -64.404945, "latitude": -32.202924, "width": 500, "height": 375, "upload_date": "25 June 2006", "owner_id": 4483, "owner_name": "Miguel Coranti", "owner_url": "http://www.panoramio.com/user/4483"}
,
{"photo_id": 522084, "photo_title": "In Memoriam Antoine de Saint Exupéry", "photo_url": "http://www.panoramio.com/photo/522084", "photo_file_url": "http://mw2.google.com/mw-panoramio/photos/medium/522084.jpg", "longitude": 17.470493, "latitude": 47.867077, "width": 500, "height": 350, "upload_date": "21 January 2007", "owner_id": 109117, "owner_name": "Busa Péter", "owner_url": "http://www.panoramio.com/user/109117"}
,
{"photo_id": 1578881, "photo_title": "Rosina Lamberti,Sunset,Templestowe , Victoria, Australia", "photo_url": "http://www.panoramio.com/photo/1578881", "photo_file_url": "http://mw2.google.com/mw-panoramio/photos/medium/1578881.jpg", "longitude": 145.141754, "latitude": -37.766372, "width": 500, "height": 474, "upload_date": "01 April 2007", "owner_id": 140796, "owner_name": "rosina lamberti", "owner_url": "http://www.panoramio.com/user/140796"}
,
{"photo_id": 97671, "photo_title": "kin-dza-dza", "photo_url": "http://www.panoramio.com/photo/97671", "photo_file_url": "http://mw2.google.com/mw-panoramio/photos/medium/97671.jpg", "longitude": 30.785408, "latitude": 46.639301, "width": 500, "height": 375, "upload_date": "09 December 2006", "owner_id": 13058, "owner_name": "Kyryl", "owner_url": "http://www.panoramio.com/user/13058"}
,
{"photo_id": 25514, "photo_title": "Arenal", "photo_url": "http://www.panoramio.com/photo/25514", "photo_file_url": "http://mw2.google.com/mw-panoramio/photos/medium/25514.jpg", "longitude": -84.693432, "latitude": 10.479372, "width": 500, "height": 375, "upload_date": "17 June 2006", "owner_id": 4112, "owner_name": "Roberto Garcia", "owner_url": "http://www.panoramio.com/user/4112"}
,
{"photo_id": 57823, "photo_title": "Maria Alm", "photo_url": "http://www.panoramio.com/photo/57823", "photo_file_url": "http://mw2.google.com/mw-panoramio/photos/medium/57823.jpg", "longitude": 12.900009, "latitude": 47.409968, "width": 500, "height": 333, "upload_date": "05 October 2006", "owner_id": 8060, "owner_name": "Norbert MAIER", "owner_url": "http://www.panoramio.com/user/8060"}
]}
var markers = [];
for (var i = 0; i < data.count; i++) {
spinnerUp(i);
}
function spinnerUp() {
var data_mapper = data.locationstuff[i];
var latLng = new google.maps.LatLng(data_mapper.latitude,data_mapper.longitude);
var boxText = "<div class='mapLocationBox'>";
boxText += "<h2>" + data_mapper.title + "</h2>" + "<p>" + data_mapper.address + "<br>" + data_mapper.city + ", " + data_mapper.zip + "</p>";
boxText += "</div>";
switch (data_mapper.iconSpecial)
{
case 0:
var iconColorSpecial = "http://www.google.com/intl/en_us/mapfiles/ms/micons/red-dot.png";
break;
case 1:
var iconColorSpecial = "http://www.google.com/intl/en_us/mapfiles/ms/micons/blue-dot.png";
break;
}
var marker = new google.maps.Marker({position: latLng,icon:iconColorSpecial});
var infowindow = new google.maps.InfoWindow({
content: boxText
,disableAutoPan: false
,maxWidth: 0
,pixelOffset: new google.maps.Size(0, 0)
,zIndex: null
,closeBoxMargin: "10px 2px 2px 2px"
,closeBoxURL: "http://www.google.com/intl/en_us/mapfiles/close.gif"
,infoBoxClearance: new google.maps.Size(1, 1)
,isHidden: false
,pane: "floatPane"
,enableEventPropagation: false});
google.maps.event.addListener(marker, 'click', function() {infowindow.open(map, this);});
markers.push(marker);
}
我有一个文件可以提供这些地址。它可以是动态的也可以是静态的。
在通过循环旋转位置之前，我还想到了地理定位的东西。
此方法可以帮助您重构您的方法。
希望它有所帮助，祝你好运！