Google Maps JavaScript API v3的标记

-1

我在Google Maps JS API中遇到问题，但可能是JS代码问题。Google Maps JavaScript API v3的标记

var buildingObject = [ 
    [1, 'Mongkok Commercial Centre', '16 Argyle Street, Mongkok', 'CCCCCC', '75.00'], 
    [2, 'Central Government Offices', '2 Tim Mei Ave, Admiralty', '999999', '70.00'] 
]; 

function initialize() { 

    var mapOptions = { 
     zoom: 10, 
     center: new google.maps.LatLng(22.352734, 114.1277) // Hong Kong 
    }; 

    var map = new google.maps.Map(document.getElementById('map-canvas'), mapOptions); 

    for(i = 0; i < buildingObject.length; i++) { 

     // Global Variables 
     var addressObject = null; 
     var iconLink = null; 
     var latLng = null; 
     var marker = null; 

     iconLink = "//chart.apis.google.com/chart?chst=d_map_spin&chld=0.6|0|" + encodeURIComponent(buildingObject[i][3]) + "|9|_|" + encodeURIComponent(buildingObject[i][4]); 

     $.ajax({ 
      "url": "//maps.googleapis.com/maps/api/geocode/json?address=" + encodeURIComponent(buildingObject[i][2]) + "&sensor=false&region=hk&language=en" 
     }).done(function(goc) { 
      if(goc.results && goc.results.length > 0 && goc.results[0].geometry && goc.results[0].geometry.location) { 
       addressObject = { 
        address:  goc.results[0].formatted_address, 
        coor: { 
         latitude: goc.results[0].geometry.location.lat, 
         longitude: goc.results[0].geometry.location.lng 
        }, 
       }; 

       latLng = new google.maps.LatLng(addressObject.coor.latitude, addressObject.coor.longitude); 
       marker = new google.maps.Marker({ 
        map:  map, 
        position: latLng, 
        icon:  iconLink, 
        title:  addressObject.address 
       }); 
      } 
     }); 
    } 
} 

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

我认为代码应该没问题，但它不能给我预期的结果，所以一定有问题。

正如您所看到的，该对象有5个属性。我希望Google地图执行搜索并将纬度和经度以及格式化的地址返回到地址对象中。然后，Google地图标记将根据buildingObject[3]中定义的背景以及buildingObject[4]中的索引，用iconLink标记位置。

iconLink = "//chart ..."将产生一个链接，并让标记类获取。

结果： 标记：尖头成功背景&指数：表现为不正确（这将只使用最后一个对象数据的价值>> 999999和70.00）

的jsfiddle这里：http://jsfiddle.net/dyp5hzh3/

来源

2015-04-20 AkiEru

您的jsfiddle不显示地图。 [更新小提琴（显示地图）]（http://jsfiddle.net/dyp5hzh3/1/） – geocodezip

@geocodezip，是的。我正在修改我的代码为stackoverflow，我没有注意到小提琴没有显示地图。感谢您更新的小提琴。 – AkiEru

在ajax调用返回之前，您正在更新循环中的索引，因此它总会为您提供最后一栋建筑物的图标链接。更新小提琴在这里更改代码的结构http://jsfiddle.net/brendaz/5xpn3m1v/

$.ajax({ 
     ... 
    }).done(function (goc) { 
     ... 
     getBuildingObject(index + 1); 
    }

来源

2015-04-21 01:18:24 brenzy

感谢您的帮助！解决了。 – AkiEru

Google Maps JavaScript API v3的标记

回答

相关问题