javascript 与 Google Maps API 的标记数组作斗争

声明:本页面是StackOverFlow热门问题的中英对照翻译,遵循CC BY-SA 4.0协议,如果您需要使用它,必须同样遵循CC BY-SA许可,注明原文地址和作者信息,同时你必须将它归于原作者(不是我):StackOverFlow 原文地址: http://stackoverflow.com/questions/5819379/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me): StackOverFlow

提示:将鼠标放在中文语句上可以显示对应的英文。显示中英文
时间:2020-10-25 18:28:31  来源:igfitidea点击:

Struggling with array of markers for Google Maps API

javascriptgoogle-maps

提问by DarrylGodden

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.

谢谢。

采纳答案by RedBlueThing

In your loop you are accessing the hotels array at fixed indexes (1, 0 & 2) rather than the array elements at index i:

在您的循环中,您访问的是固定索引(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]
        });
    }

Hereis a working example with the fix.

是一个带有修复程序的工作示例。

回答by u476945

Here's the JSFiddle Demo:

这是JSFiddle 演示:

First of all you are not accessing your hotels array correctly. It should be hotels[i][0]for title hotels[i][1]and hotels[i][2]for lat and lng and hotels[i][3]for z-index. Secondly, position takes the google.maps.LatLngobject with lat and lng as the param.

首先,您没有正确访问您的酒店数组。它应该hotels[i][0]用于标题hotels[i][1]hotels[i][2]纬度和经度以及hotels[i][3]z-index。其次,position 以google.maps.LatLnglat 和 lng 为参数的对象。

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;