与Google Maps API的标记阵列拼搏

Question

我开始为自己的Google地图单独列出我的标记，但很快意识到这是效率低下的 。我试图创建一个数组来把标记放到我的地图上，但它没有显示任何东西，你能看到我出错的地方吗？

function initialize() { 
     var latlng = new google.maps.LatLng(52.474, -1.868); 

     var myOptions = { 
      zoom: 11, 
      center: latlng, 
      mapTypeId: google.maps.MapTypeId.ROADMAP 
     }; 

     var map = new google.maps.Map(document.getElementById("map_canvas"), myOptions); 
     var image = 'i/hotel-map-pin.png'; 

     var hotels = [ 
      ['ibis Birmingham Airport', 52.452656, -1.730548, 4], 
      ['ETAP Birmingham Airport', 52.452527, -1.731644, 3], 
      ['ibis Birmingham City Centre', 52.475162, -1.897208, 2] 
     ]; 

     for (var i = 0; i < hotels.length; i++) { 
      var marker = new google.maps.Marker({ 
       position: hotels[1], 
       map: map, 
       icon: image, 
       title: hotels[0], 
       zIndex: hotels[2] 
      }); 
     } 
    } 

谢谢。

Answer 1

在你的循环要访问的酒店阵列以固定的索引（1,0 & 2），而不是在索引数组元素I：

for (var i = 0; i < hotels.length; i++) { 
     var hotel = hotels [i] 
     var marker = new google.maps.Marker({ 
      position: new google.maps.LatLng (hotel[1], hotel[2]), 
      map: map, 
      icon: image, 
      title: hotel[0], 
      zIndex: hotel[3] 
     }); 
    } 

Here是工作示例与修复。

Answer 2

这里就是你没有正确访问您的酒店阵列的JSFiddle Demo:

第一。对于lat和lng，标题hotels[i][1]和hotels[i][2]应该是hotels[i][0]，对于z-index应该是hotels[i][3]。其次，位置以lat和lng为参数的google.maps.LatLng对象。

function initialize() { 
    var latlng = new google.maps.LatLng(52.474, -1.868); 

    var myOptions = { 
     zoom: 11, 
     center: latlng, 
     mapTypeId: google.maps.MapTypeId.ROADMAP 
    }; 

    var map = new google.maps.Map(document.getElementById("map_canvas"), myOptions); 
    var image = 'i/hotel-map-pin.png'; 

    var hotels = [ 
     ['ibis Birmingham Airport', 52.452656, -1.730548, 4], 
     ['ETAP Birmingham Airport', 52.452527, -1.731644, 3], 
     ['ibis Birmingham City Centre', 52.475162, -1.897208, 2] 
     ]; 

    for (var i = 0; i < hotels.length; i++) { 
     var marker = new google.maps.Marker({ 
      position: new google.maps.LatLng(hotels[i][1], hotels[i][2]), 
      map: map, 
      // icon: image, 
      title: hotels[i][0], 
      zIndex: hotels[i][3] 
     }); 
    } 
} 

window.onload = initialize;