如何访问我的所有谷歌地图标记

时间:2016-04-05 07:14:41

标签: javascript google-maps google-maps-api-3 google-maps-markers

我没有看到它我想如果你们其中一个看着它可以立即告诉我我该做什么。现在我调整我的标记,但它只需要数组的最后一个标记。

这里代码I&#l;循环通过对象标记数组:

var locations = [
    [{id: 1, lat: 51.523229192354066, lng: 5.139241042480535, content: 'Title A'}],
    [{id: 2, lat: 51.52309568310267, lng:  5.139251771316594, content: 'Title B'}],
    [{id: 3, lat: 51.5229888754197, lng:  5.139434161529607, content: 'Title C'}],
    [{id: 4, lat: 51.52284868995566,  lng:  5.139487805709905, content: 'Title D'}],
    [{id: 5, lat: 51.522715179588666,  lng:  5.139670195922918, content: 'Title E'}],
    [{id: 6, lat: 51.52258166883027,  lng:  5.1397989419556325, content: 'Title F'}],
    [{id: 7, lat: 51.52242813097418,  lng:  5.139927687988347, content: 'Title G'}],
    [{id: 8, lat: 51.52227793039666,  lng:   5.139927687988347, content: 'Title H'}],
    [{id: 9, lat: 51.522625059869696, lng:     5.138688507423467, content: 'Title I'}]
];

for (i = 0; i < locations.length; i++) {
        var myLatLng = {lat: locations[i][0].lat, lng: locations[i][0].lng};

    marker = new google.maps.Marker({
        position: myLatLng,
        icon: icon1,
        map: map
    });


    map.addListener('zoom_changed', function() {
        if (map.getZoom() === 17) {
            marker.icon.scaledSize = new google.maps.Size(32, 32);
            marker.icon.size = new google.maps.Size(32, 32);
            marker.setMap(map);
        }
        if (map.getZoom() === 18) {
            console.log(marker[i]);
            marker.icon.scaledSize = new google.maps.Size(90, 90);
            marker.icon.size = new google.maps.Size(90, 90);
            marker.setMap(map);
        }
    });

如果我尝试访问marker [i] .icon,则未定义。请有人帮我使用尺寸所有标记。

这是一个更好的视图放大和缩小的小提琴,以查看只有一个标记更改的大小: https://jsfiddle.net/sylvanR/a8z0yyeq/10/

1 个答案:

答案 0 :(得分:1)

问题在于:您循环遍历所有标记,为地图的zoom_changed事件添加新的事件侦听器。在每个事件侦听器中,您指的是变量marker。此事件侦听器函数在您定义它时不会执行,它只会在缩放明显变化时发生。所以在这一点上,变量marker将等于for循环最后一次迭代时的变量。

相反,您需要更改设置此事件侦听器的方式,如下所示:

for (i = 0; i < locations.length; i++) {
        var myLatLng = {lat: locations[i][0].lat, lng: locations[i][0].lng};

    marker = new google.maps.Marker({
        position: myLatLng,
        icon: icon1,
        map: map
    });

    setMarkerSize(marker);
}

function setMarkerSize(marker) {
    var icon = marker.icon;
    map.addListener('zoom_changed', function() {
        if (map.getZoom() === 16) {
            icon.scaledSize = new google.maps.Size(15, 15);
            icon.size = new google.maps.Size(15, 15);
            marker.setIcon(icon);
            console.log(marker.icon.size);
        }
        if (map.getZoom() === 17) {
            icon.scaledSize = new google.maps.Size(32, 32);
            icon.size = new google.maps.Size(32, 32);
            marker.setIcon(icon);
            console.log(marker.icon.size);
        }
        if (map.getZoom() === 18) {
            icon.scaledSize = new google.maps.Size(90, 90);
            icon.size = new google.maps.Size(90, 90);
            marker.setIcon(icon);
            console.log(marker.icon.size);
        }
    });
}

在这种情况下,marker函数中的setMarkerSize是一个局部变量,每次调用函数时都会有所不同。