动态标记 - Google Maps API - 标记在i循环中不会递增 [英] Dynamic Markers - Google Maps API - Markers not incrementing with i value in loop
问题描述
我已经在下面创建了map api,并且有一个来自数据库的地址数组。
地图加载正确,但是我有以下问题。
I have created the maps api below and have an array of addresses that come from a database. The map loads correctly, however I have the following issue.
-
动态标记不会以i的值递增,所以地图显示所有标记为1而不是1,2,3,4,5
The dynamic Markers are not incrementing with the value of "i".. so the map displays all markers with "1" and not "1,2,3,4,5"
// Define Vars
var pinColor = "FE7569";
var marker, i;
// Set default map center location
var latlng = new google.maps.LatLng(-27.79014,153.18049);
// Create pinShadow for each marker
var pinShadow = new google.maps.MarkerImage("http://chart.apis.google.com /chart?chst=d_map_pin_shadow",
new google.maps.Size(40, 37),
new google.maps.Point(0, 0),
new google.maps.Point(12, 35));
// Function to create the dynamic marker
function pinImage(i){
return image = new google.maps.MarkerImage("http://www.googlemapsmarkers.com/v1/"+i+"/"+pinColor+"/", new google.maps.Size(21, 34), new google.maps.Point(0,0), new google.maps.Point(10, 34));
}
// Function to run once page has loaded
function initialize(){
// Set Default settigns for google map
var settings = {
zoom: 10,
center: latlng,
mapTypeControl: true,
mapTypeControlOptions: {style: google.maps.MapTypeControlStyle.DROPDOWN_MENU},
navigationControl: true,
navigationControlOptions: {style: google.maps.NavigationControlStyle.SMALL},
mapTypeId: google.maps.MapTypeId.ROADMAP};
// Start Google Maps and assign it to div on site
var map = new google.maps.Map(document.getElementById("map_canvas"), settings);
// loop though total numner of address in array
for (i = 1; i < total; i++) {
// Use geocoder to grab latlong for user inputed address
geocoder.geocode( { 'address': address[i]}, function(results, status) {
if (status == google.maps.GeocoderStatus.OK) {
// Redefine map center location
if (i = 1){ map.setCenter(results[0].geometry.location); }
// Create dynamic markers on map as per the address array
var marker = new google.maps.Marker({
map: map,
position: results[0].geometry.location,
title:address[i],
zIndex: i,
// PROBLEM CODE --- Using the function below it creates all Markers with a "1" instead of the "i" value..??
icon: pinImage(i),
shadow: pinShadow
});
}
});
}
}
推荐答案
旧的函数范围包装技巧(function(i){...})(i)
在这里工作。没有它,执行取i的最终值。另外,如果(i = 1)应该是 if(i == 1)
The old "function scope wrapper" trick (function(i) {...})(i)
works here. Without it, the execution takes the final value of i. Also, if(i = 1)
should be if(i == 1)
要玩耍: http://jsfiddle.net/BK8vv/ 对于(var i = 1; i< total; i ++){
To play around: http://jsfiddle.net/BK8vv/
for (var i = 1; i < total; i++) {
(function(i) {
// Use geocoder to grab latlong for user inputed address
geocoder.geocode( { 'address': address[i]}, function(results, status) {
if (status == google.maps.GeocoderStatus.OK) {
// Redefine map center location
if (i == 1){ map.setCenter(results[0].geometry.location); }
// Create dynamic markers on map as per the address array
alert(i);
var marker = new google.maps.Marker({
map: map,
position: results[0].geometry.location,
title:address[i],
zIndex: i,
// PROBLEM CODE --- Using the function below it creates all Markers with a "1" instead of the "i" value..??
icon: pinImage(i),
shadow: pinShadow
});
}
});
})(i);
}
}
这篇关于动态标记 - Google Maps API - 标记在i循环中不会递增的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持IT屋!