地理编码和映射地址

如何解决地理编码和映射地址

我在使用街道地址在 Google 地图上定位时遇到问题。我想放置引脚，将缩放级别设置为显示所有放置的引脚所需的最高级别（即在我的示例中放大 3 个位置），并在引脚上使用 infoWindows 和我的阵列中的内容。

我有一个地址数组（位置）[1]，以及我想放在信息窗口中的信息[0]。我有地理编码工作，我的图钉放在地图上。地图不会放大我的图钉，也不会显示 infoWindows。

这是我的代码：

<div id="map" style="background:#db7093;height:600px;width:auto;"></div>

<script type="text/javascript">
var locations = [
    ["<a href=\"https://example.com/building1/\">Library</a>"," 350 W Georgia St,Vancouver,BC,Canada",1],["<a href=\"https://example.com/building2/\">City Hall</a>","453 W 12th Ave,2],["<a href=\"https://example.com/building3/\">Art gallery</a>","750 Hornby St,3]
];
</script>
<script type="text/javascript">
function mapAddress(currentLocation,bounds) {
    var geocoder = new google.maps.Geocoder();
    var marker = new google.maps.Marker();

    var address = currentLocation[1];

    geocoder.geocode({
        "address": address
    },function(results,status) {
        if (status == google.maps.GeocoderStatus.OK) {
            map.setCenter(results[0].geometry.location);
            if (marker)
                marker.setMap(null);
            marker = new google.maps.Marker({
                map: map,position: results[0].geometry.location,draggable: false
            });

            bounds.extend(marker.position);

            google.maps.event.addListener(marker,"click",(function(marker,i) {
                return function() {
                    infowindow.setContent(currentLocation[0]);
                    infowindow.open(map,marker);
                }
            })(marker,i));
        } else {
            alert("Geocode was not successful for the following reason: " + status);
        }
    });
}

function initMap() {
    window.map = new google.maps.Map(document.getElementById("map"),{
        mapTypeId: google.maps.MapTypeId.ROADMAP
    });

    var infowindow = new google.maps.InfoWindow();

    var bounds = new google.maps.LatLngBounds();

    for (i = 0; i < locations.length; i++) {
        var currentLocation = locations[i];

        mapAddress(currentLocation,bounds);
    }

    map.fitBounds(bounds);
    map.panToBounds(bounds);

    var listener = google.maps.event.addListener(map,"idle",function() {
        map.setZoom(14); // Manually setting zoom level,as fitBounds isn't working
        google.maps.event.removeListener(listener);
    });
}
</script>
<script async defer src="https://maps.googleapis.com/maps/api/js?key=[MyGoogleMapsAPIKeyHasBeenRemoved]&callback=initMap"></script>

解决方法

1. 创建具有正确范围的 infowindow 和 bounds 变量。了解 JS 中的 variables scope。
2. 我已经删除了 if (marker) marker.setMap(null); 部分，因为我想不出你为什么使用它。
3. 我已将 map.fitBounds(bounds) 移至地理编码器回调，否则它会在创建所有标记之前执行（地理编码器是异步的），换句话说，您在 {{1} 之后调用 fitBounds } 循环已完成，但此时地理编码器尚未完成从 API 获取信息和/或创建标记。
4. 我删除了标记侦听器周围的闭包，因为它不需要。
5. 我删除了不必要的 for。
6. 我删除了您不需要的空 map.panToBounds(bounds); 声明。
7. 我已删除您的地图 google.maps.Marker 事件，这是不必要的，因为 idle 方法将设置适当的缩放级别。
8. 您应该知道，地理编码器每秒有 50 个请求的限制，因此如果您的位置列表超过 50 个，那么您的代码可能会每秒发送超过 50 个请求。

fitBounds

var locations = [
  ["<a href=\"https://example.com/building1/\">Library</a>"," 350 W Georgia St,Vancouver,BC,Canada",1],["<a href=\"https://example.com/building2/\">City Hall</a>","453 W 12th Ave,2],["<a href=\"https://example.com/building3/\">Art Gallery</a>","750 Hornby St,3]
];

var bounds,infowindow;

function mapAddress(currentLocation,bounds) {
  var geocoder = new google.maps.Geocoder();
  var address = currentLocation[1];

  geocoder.geocode({
    "address": address
  },function(results,status) {
    if (status == google.maps.GeocoderStatus.OK) {
      map.setCenter(results[0].geometry.location);
      var marker = new google.maps.Marker({
        map: map,position: results[0].geometry.location,draggable: false
      });

      bounds.extend(marker.position);
      map.fitBounds(bounds);

      google.maps.event.addListener(marker,"click",function() {
        infowindow.setContent(currentLocation[0]);
        infowindow.open(map,marker);
      });
    } else {
      alert("Geocode was not successful for the following reason: " + status);
    }
  });
}

function initMap() {
  window.map = new google.maps.Map(document.getElementById("map-canvas"),{
    mapTypeId: google.maps.MapTypeId.ROADMAP
  });

  infowindow = new google.maps.InfoWindow();
  bounds = new google.maps.LatLngBounds();

  for (i = 0; i < locations.length; i++) {
    var currentLocation = locations[i];
    mapAddress(currentLocation,bounds);
  }
}

#map-canvas {
  height: 180px;
}