Google地图地理编码和循环中的标记 [英] Google Maps geocoding and markers in loop
问题描述
但出于某种原因，只有一个标记出现。我想这与我在其他线程中看到的关闭问题有关，但我似乎无法将解决方案应用于我所拥有的。
我的代码如下：
var map = new google.maps.Map（document.getElementById（map_canvas），myOptions ）;
map.fitBounds（bounds）;
（var item in list）{
var geocoder = new google.maps.Geocoder（）;
var geoOptions = {
address：item.location，
bounds：bounds，
region：NO
};
geocoder.geocode（geoOptions，function（results，status）{
if（status == google.maps.GeocoderStatus.OK）{
addMarker（map，item，results [0]）。 geometry.location）;
} else {
console.log（Geocode failed+ status）;
}
}）;
function addMarker（map，item，location）{
var marker = new google.maps.Marker（{map：map，position：location}）;
marker.setTitle（item.title）;
var infowindow = new google.maps.InfoWindow（{
content：item.body，
size：new google.maps.Size（100，300）
}）;
（函数（map，marker））{
new google.maps.event.addListener（marker，click，function（）{
infowindow.open（map，marker）;
}）;
}）（map，marker）;
}
任何帮助表示感谢。
更新：为了避免在第一个回答中建议的循环中关闭，我已将代码更改为：
//这是条目
函数codeLocations（list，map）{
for（var i = 0; i< list.length; i ++）{
console .log（Looping+ list [i] .location）;
var geocoder = new google.maps.Geocoder（）;
var geoOptions = {
address：list [i] .location，
bounds：getBounds（），
region：NO
};
geocoder.geocode（geoOptions，createGeocodeCallback（list [i]，map））;
函数createGeocodeCallback（item，map）{
console.log（生成+ item.location的地理编码回调）;
return function（results，status）{
if（status == google.maps.GeocoderStatus.OK）{
console.log（Geocoding+ item.location +OK） ;
addMarker（map，item，results [0] .geometry.location）;
} else {
console.log（Geocode failed+ status）;
$ b函数addMarker（map，item，location）{
console.log（设置标记为+ item.location +（location：+ location +））;
var marker = new google.maps.Marker（{map：map，position：location}）;
marker.setTitle（item.title）;
var infowindow = new google.maps.InfoWindow（{
content：item.body，
size：new google.maps.Size（100，300）
}）;
new google.maps.event.addListener（marker，click，function（）{
infowindow.open（map，marker）;
}）;
}
根据日志语句，我现在在正确的地方有正确的对象，这意味着每次设置标记时项目和位置对象都不同，但我仍然只在地图上获得一个标记。这怎么可能？
不要在循环中创建闭包。 那根本行不通。这可能是问题的解决方案：
$ p $ function callback（）{
return function（results，status）{
if（status == google.maps.GeocoderStatus.OK）{
addMarker（map，item，results [0] .geometry.location）;
} else {
console.log（Geocode failed+ status）;
}
};
（var list in list）{
var geocoder = new google.maps.Geocoder（）;
var geoOptions = {
address：item.location，
bounds：bounds，
region：NO
};
geocoder.geocode（geoOptions，callback（））;
}
I'm completely puzzled here. I have a list of objects each containing a location. I look up this location using the google.maps.geocoder and afterwards I put a marker for that location on a map.
But for some reason only one marker appears. I guess this has to do with the closures problem I've seen in other threads around here but I just can't seem to apply the solution to what I have.
My code is as follows:
var map = new google.maps.Map(document.getElementById("map_canvas"), myOptions);
map.fitBounds(bounds);
for (var item in list) {
var geocoder = new google.maps.Geocoder();
var geoOptions = {
address: item.location,
bounds: bounds,
region: "NO"
};
geocoder.geocode(geoOptions, function(results, status) {
if (status == google.maps.GeocoderStatus.OK) {
addMarker(map, item, results[0].geometry.location);
} else {
console.log("Geocode failed " + status);
}
});
}
function addMarker(map, item, location) {
var marker = new google.maps.Marker({ map : map, position : location});
marker.setTitle(item.title);
var infowindow = new google.maps.InfoWindow( {
content : item.body,
size : new google.maps.Size(100, 300)
});
(function(map, marker) {
new google.maps.event.addListener(marker, "click", function() {
infowindow.open(map, marker);
});
})(map, marker);
}
Any help is appreciated.
Update: To avoid closures in loops as suggested in first answer, I have changed the code to this:
//This is the entry
function codeLocations(list, map) {
for (var i = 0; i < list.length; i++) {
console.log("Looping " + list[i].location);
var geocoder = new google.maps.Geocoder();
var geoOptions = {
address: list[i].location,
bounds: getBounds(),
region: "NO"
};
geocoder.geocode(geoOptions, createGeocodeCallback(list[i], map));
}
}
function createGeocodeCallback(item, map) {
console.log("Generating geocode callback for " + item.location);
return function(results, status) {
if (status == google.maps.GeocoderStatus.OK) {
console.log("Geocoding " + item.location + " OK");
addMarker(map, item, results[0].geometry.location);
} else {
console.log("Geocode failed " + status);
}
}
}
function addMarker(map, item, location) {
console.log("Setting marker for " + item.location + " (location: " + location + ")");
var marker = new google.maps.Marker({ map : map, position : location});
marker.setTitle(item.title);
var infowindow = new google.maps.InfoWindow( {
content : item.body,
size : new google.maps.Size(100, 300)
});
new google.maps.event.addListener(marker, "click", function() {
infowindow.open(map, marker);
});
}
According to the log statements, I now have the correct objects at the correct places, meaning the item and location objects are different for every time the marker is set, but I still only get one marker on my map. How can this be?
Don't create closures in loops. That just won't work. This might be a solution for the problem:
function callback() {
return function(results, status) {
if (status == google.maps.GeocoderStatus.OK) {
addMarker(map, item, results[0].geometry.location);
} else {
console.log("Geocode failed " + status);
}
};
}
for (var item in list) {
var geocoder = new google.maps.Geocoder();
var geoOptions = {
address: item.location,
bounds: bounds,
region: "NO"
};
geocoder.geocode(geoOptions, callback());
}
这篇关于Google地图地理编码和循环中的标记的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
