谷歌地图+ JavaScript的仅呈现正确时警报在

-2

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

数组PARAMS是[ “标题”， “位置”， “用zIndex”， “图像”]

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

当我取消注释警报，并单击警告框上的“确定”时，标记都会正确显示，并带有自己的标题和自己的图标。

我在挠我的脑袋，想知道如何找到正确的位置，但没有找到正确的标题或图标图像......！

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

我最终打算从一个大型数据库构建数组，因此可能会有100个标记。

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

非常感谢。

来源

2014-05-21 webcraftniray

它发生，因为你不等待地址解析器响应，改变可变位置地理编码返回其响应之前。你应该有这样的事情：

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

这样你会为每个标记不同的局部变量位置。

来源

2014-05-21 11:37:43

谷歌地图+ JavaScript的仅呈现正确时警报在

回答

相关问题