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的標記

回答

相關問題