我如何访问我所有的Google地图标记 [英] How do i access all my google maps markers

查看:110
本文介绍了我如何访问我所有的Google地图标记的处理方法,对大家解决问题具有一定的参考价值,需要的朋友们下面随着小编来一起学习吧!

问题描述

我没有看到它,我会认为如果你们其中一人看到它,可以立即告诉我我该做什么。现在我调整了我的标记,但它只接受数组的最后一个标记。



这里代码我将通过对象标记数组循环:



pre $ $ $ $ $ $ $ $ $ $ $ $ $ $ $ $ $ $ $ $ $ $ $ $ $ $ $ $ $ $ $ $
[{id:2,lat:51.52309568310267,lng:5.139251771316594,内容:'标题B'}],
[{id:3,lat:51.5229888754197,lng:5.139434161529607,内容:'标题C '}],
[{id:4,lat:51.52284868995566,lng:5.139487805709905,内容:'Title D'}],
[{id:5,lat:51.522715179588666,lng:5.139670195922918,content :'Title E'}],
[{id:6,lat:51.52258166883027,lng:5.1397989419556325,内容:'Title F'}],
[{id:7,lat:51.52242813097418,lng :5.139927687988347,content:'Title G'}],
[{id:8,lat:51.52227793039666,lng:5.139927687988347,内容:'Title H'}],
[{id:9,lat :51.522625059869696,lng:5 .138688507423467,内容:'Title I'}]
];

(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/

解决方案

问题是这样的:您正在循环所有标记,为地图的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);
}

函数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(图标);
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);
}
});

$ / code>

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


I am not seeing it i'll think if one of you looks at it can immediately tell me what i have to do. Now i resize my marker but it only takes the last marker of the array.

here the code I'll loop trough the array of object markers:

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

If i try to access marker[i].icon it is undefined. Please can somebody help me out to use size ALL the markers.

Here is a fiddle for a better view zoom in and out to see what happens only one marker change in size: https://jsfiddle.net/sylvanR/a8z0yyeq/10/

解决方案

The problem is this: you're looping over all your markers, adding a new event listener for the map's zoom_changed event. In each of those event listeners, you're referring to the variable marker. This event listener function doesn't get executed at the moment you define it, it only happens when the zoom changes obviously. So at that point, the variable marker will equal whatever it was at the very last iteration of your for loop.

Instead you need to change how you setup this event listener, something like this:

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

In this case, marker inside the setMarkerSize function is a local variable that will be different each time you call the function.

这篇关于我如何访问我所有的Google地图标记的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持IT屋!

查看全文
登录 关闭
扫码关注1秒登录
发送“验证码”获取 | 15天全站免登陆