地理编码和映射地址

Question

我在 Google 地图上的街道地址图钉上遇到问题。我想放置图钉，将缩放级别设置为显示所有放置的图钉所需的最高级别（即在我的示例中放大 3 个位置），并在图钉上显示包含数组内容的信息窗口。 =11=]

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

这是我的代码：

<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, Vancouver, BC, Canada", 2],
    ["<a href=\"https://example.com/building3/\">Art Gallery</a>", "750 Hornby St, Vancouver, BC, Canada", 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>

Answer 1

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

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, Vancouver, BC, Canada", 2],
  ["<a href=\"https://example.com/building3/\">Art Gallery</a>", "750 Hornby St, Vancouver, BC, Canada", 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;
}

<div id="map-canvas"></div>

<!-- Replace the value of the key parameter with your own API key. -->
<script src="https://maps.googleapis.com/maps/api/js?key=AIzaSyCkUOdZ5y7hMm0yrcCQoCvLwzdM6M8s5qk&callback=initMap" async defer></script>

地理编码和映射地址

Geocoding and mapping addresses

javascript

google-maps

google-maps-api-3

google-maps-markers

google-geocoding-api