javascript – 谷歌地图循环中的地理编码和标记

前端之家收集整理的这篇文章主要介绍了javascript – 谷歌地图循环中的地理编码和标记前端之家小编觉得挺不错的,现在分享给大家,也给大家做个参考。
我在这里完全不解.我有一个对象列表,每个对象包含一个位置.我使用google.maps.geocoder查找此位置,然后我在地图上放置了该位置的标记.

但由于某种原因,只出现一个标记.我想这与我在这里的其他线程中看到的闭包问题有关,但我似乎无法将解决方案应用于我所拥有的.

我的代码如下:

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,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);
  }

任何帮助表示赞赏.

更新:为了避免第一个答案中建议的循环闭包,我已将代码更改为:

//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(),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,results[0].geometry.location);
    } else {
      console.log("Geocode Failed " + status);
    }
  }
}

function addMarker(map,location) {
  console.log("Setting marker for " + item.location + " (location: " + location + ")");
  var marker = new google.maps.Marker({ map : map,300)
  });
  new google.maps.event.addListener(marker,function() {
    infowindow.open(map,marker);
  });
}

根据日志语句,我现在在正确的位置有正确的对象,这意味着每次设置标记时项目和位置对象都不同,但我仍然只在地图上得到一个标记.怎么会这样?

解决方法

不要在循环中创建闭包. That just won’t work.这可能是解决问题的方法
function callback() {
    return function(results,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,callback());
  }

猜你在找的JavaScript相关文章