Javascript 地理编码和映射地址

我在使用谷歌地图上的街道地址时遇到了问题。我想放置插针，将缩放级别设置为显示所有放置的插针所需的最高级别（即在我的示例中放大了3个位置），并在插针上设置信息窗口，其中包含我阵列中的内容

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

这是我的代码：

<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>

变量位置=[
[，“加拿大不列颠哥伦比亚省温哥华佐治亚大街西350号”，1]，
[，“加拿大不列颠哥伦比亚省温哥华市第12大道西453号”，2]，
[“”，“加拿大不列颠哥伦比亚省温哥华霍恩比街750号”，3]
];
函数映射地址（currentLocation，bounds）{
var geocoder=new google.maps.geocoder（）；
var marker=new google.maps.marker（）；
var地址=当前位置[1]；
地理编码({
“地址”：地址
}，功能（结果、状态）{
if（status==google.maps.GeocoderStatus.OK）{
map.setCenter（结果[0].geometry.location）；
如果（标记）
marker.setMap（空）；
marker=新的google.maps.marker({
地图：地图，
位置：结果[0]。geometry.location，
可拖动：错误
});
扩展（标记位置）；
google.maps.event.addListener（标记，“单击”）（函数（标记，i）{
返回函数（）{
infowindow.setContent（currentLocation[0]）；
信息窗口。打开（地图、标记）；
}
})（marker，i））；
}否则{
警报（“地理编码因以下原因未成功：“+状态”）；
}
});
}
函数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（）；
对于（i=0；i

创建具有正确范围的

信息窗口

和

边界

变量。在JS中学习

我已经删除了

if（marker）marker.setMap（null）部分，因为我想不出您为什么使用它

我已将

map.fitBounds（bounds）

移动到geocoder回调，否则它将在创建所有标记之前执行（geocoder是异步的），换句话说，您在

for

循环完成后调用

fitBounds

，但当时，地理编码器尚未完成从API获取信息和/或创建标记

我已经移除了标记侦听器周围的闭包，因为它不是必需的

我已经删除了

map.panToBounds（边界）这是不必要的

我已经删除了您不必要的空

google.maps.Marker

声明

我已经删除了您的map

idle

事件，这是不必要的，因为适当的缩放级别将由

fitBounds

方法设置

您应该知道地理编码器每秒有50个请求的限制，因此如果您的位置列表大于50，那么您的代码很可能每秒发送50个以上的请求

var位置=[
[，“加拿大不列颠哥伦比亚省温哥华佐治亚大街西350号”，1]，
[，“加拿大不列颠哥伦比亚省温哥华市第12大道西453号”，2]，
[“”，“加拿大不列颠哥伦比亚省温哥华霍恩比街750号”，3]
];
var界限，信息窗口；
函数映射地址（currentLocation，bounds）{
var geocoder=new google.maps.geocoder（）；
var地址=当前位置[1]；
地理编码({
“地址”：地址
}，功能（结果、状态）{
if（status==google.maps.GeocoderStatus.OK）{
map.setCenter（结果[0].geometry.location）；
var marker=new google.maps.marker({
地图：地图，
位置：结果[0]。geometry.location，
可拖动：错误
});
扩展（标记位置）；
映射边界（bounds）；
google.maps.event.addListener（标记“单击”，函数（）{
infowindow.setContent（currentLocation[0]）；
信息窗口。打开（地图、标记）；
});
}否则{
警报（“地理编码因以下原因未成功：“+状态”）；
}
});
}
函数initMap（）{
window.map=new google.maps.map（document.getElementById（“地图画布”）{
mapTypeId:google.maps.mapTypeId.ROADMAP
});
infowindow=new google.maps.infowindow（）；
bounds=新的google.maps.LatLngBounds（）；
对于（i=0；i

#地图画布{
高度：180像素；
}

创建具有正确范围的

信息窗口

和

边界

变量。在JS中学习

我已经删除了

if（marker）marker.setMap（null）部分，因为我想不出您为什么使用它

我已将

map.fitBounds（bounds）

移动到geocoder回调，否则它将在创建所有标记之前执行（geocoder是异步的），换句话说，您在

for

循环完成后调用

fitBounds

，但当时，地理编码器尚未完成从API获取信息和/或创建标记

我已经移除了标记侦听器周围的闭包，因为它不是必需的

我已删除

map.panToBounds