代码之家  ›  专栏  ›  技术社区  ›  fiskeben

Google地图地理编码和循环标记

  •  6
  • fiskeben  · 技术社区  · 15 年前

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

    我的代码如下:

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

    如有任何帮助,我们将不胜感激。

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

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

    1 回复  |  直到 15 年前
        1
  •  8
  •   Bryan Downing    14 年前

    不要在循环中创建闭包。 That just won't work . 这可能是解决问题的方法:

      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());
      }
    
    推荐文章