与Google Maps API的各种标记一起苦苦挣扎 [英] Struggling with array of markers for Google Maps API

问题描述

我开始为我的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伯明翰机场'，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] 
}）; 
 
 
 $ / code $ / pre 
 $ b $ p感谢。
 <在您的循环中，您正在以固定索引（1,0和2）访问酒店数组，而不是位于索引i处的数组元素：
 

b
$ b

  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：
 icon： image，
 title：hotel [0]，
 zIndex：hotel [3] 
}）; 
} 
  

这里是一个修复的实例。

I started to list my markers individually for my Google Map, but quickly realised this was inefficient. I have tried to create an array to put the markers onto my map, but it is not showing anything, can you see where I have gone wrong?

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

Thanks.

解决方案

In your loop you are accessing the hotels array at fixed indexes (1, 0 & 2) rather than the array elements at index 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 is a working example with the fix.

这篇关于与Google Maps API的各种标记一起苦苦挣扎的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！