谷歌地图 + javascript 仅在警报被编码时正确呈现

Posted 2023-02-23

【中文标题】谷歌地图 + javascript 仅在警报被编码时正确呈现

【英文标题】：Google maps + javascript only rendering correctly when alerts are coded in

【发布时间】：2014-05-21 11:33:04

【问题描述】：

我正在使用这个例子：

https://developers.google.com/maps/documentation/javascript/examples/icon-complex

基于数据数组变量呈现多标记谷歌地图。

这是我的代码：

geocoder = new google.maps.Geocoder();

var locations = [
    ["Title1", "Ballyblack Road, Portaferry, United Kingdom", 0, "/images/pins/1.png"],
    ["Title2", "Coach Road, Portaferry, United Kingdom", 1, "/images/pins/2.png"],
    ["Title3", "Cook Street, Portaferry, United Kingdom", 2, "/images/pins/2.png"],
    ["Title4", "Ballyfounder Road, Portaferry, United Kingdom", 3, "/images/pins/1.png"],
    ["Title5", "Shore Road, Strangford, United Kingdom", 4, "/images/pins/3.png"],
    ["Title6", "Cook Street, Portaferry, United Kingdom", 5, "/images/pins/1.png"],
    ["Title7", "Windmill Hill, Portaferry, United Kingdom", 6, "/images/pins/4.png"],
    ["Title8", "BT32", 7, "/images/pins/TownlandsandGateways.png"],
    ["Title9", "Shore Road, Strangford, United Kingdom", 8, "/images/pins/4.png"],
    ["Title10", "Windmill Lane, Portaferry, United Kingdom", 9, "/images/pins/1.png"],
    ["Title11", "The Saltpans, Portaferry, United Kingdom", 10, "/images/pins/3.png"],
    ["Title12", "Cuan View, Portaferry, United Kingdom", 11, "/images/pins/4.png"],
    ["Title13", "Lough Shore Road, Portaferry, United Kingdom", 12, "/images/pins/3.png"],
    ["Title14", "Castleward Road, Down, United Kingdom", 13, "/images/pins/1.png"],
    ["Title15", "Bar Hall Road, Portaferry, United Kingdom", 14, "/images/pins/2.png"],
    ["Title16", "Bar Hall Road, Portaferry, United Kingdom", 15, "/images/pins/1.png"]
];

function initialize() 
    var mapOptions = center: new google.maps.LatLng(54.380357, -5.542774), zoom: 14;
    var map = new google.maps.Map(document.getElementById("map-canvas"), mapOptions);
    setMarkers(map, locations);


function setMarkers(map, locations) 
    for (var i = 0; i < locations.length; i++) 

        var location = locations[i];

        geocoder.geocode('address': location[1], function(results, status) 
            if (status == google.maps.GeocoderStatus.OK) 
                markers = new google.maps.Marker(
                    position: results[0].geometry.location,
                    map: map,
                    icon: location[3],
                    title: location[0],
                    zIndex: location[2]
                );
            
        );
// alert(location[1]);
    

google.maps.event.addDomListener(window, 'load', initialize); 

数组参数为["Title", "Location", "zIndex", "Image"]

你会看到我已经注释掉了接近底部的警报。当我运行此代码时，它会呈现所有 16 个引脚，但它们都是 16 引脚 - 尽管它确实为它们找到了正确的位置，但标记图像都相同，标题也都相同。

当我取消注释警报并单击警报框上的“确定”时，标记都正确呈现，具有自己的标题和自己的图标。

我摸不着头脑，想知道如何为每个找到正确的位置，但不是正确的标题或图标图像...！

我的猜测是代码正在快速运行，以便地图找到正确的值......但我的直觉是......真的吗？？？太快了？？？

我最终计划从一个大型数据库构建阵列，因此可能会有 100 个标记。

关于我可能做错的任何建议？

非常感谢。

【参考方案1】：

发生这种情况是因为您没有等待 geocoder 响应，而是在地理编码返回其响应之前更改了变量 location。 你应该有这样的东西：

function setMarkers(map, locations) 
    for (var i = 0; i < locations.length; i++) 

        setMarker( map, locations[i] );

    



function setMarker( map, location ) 
    geocoder.geocode('address': location[1], function(results, status) 
        if (status == google.maps.GeocoderStatus.OK) 
            markers = new google.maps.Marker(
                position: results[0].geometry.location,
                map: map,
                icon: location[3],
                title: location[0],
                zIndex: location[2]
            );
        
    );

通过这种方式，每个标记都有一个不同的局部变量location。