Google Maps API 3 - 根据缩放级别显示/隐藏标记

Posted 2023-02-23

【中文标题】Google Maps API 3 - 根据缩放级别显示/隐藏标记

【英文标题】：Google Maps API 3 - Show/ Hide markers depending on zoom level

【发布时间】：2013-12-01 09:32:59

【问题描述】：

我正在尝试根据缩放级别显示/隐藏一些谷歌地图标记。我在这里查看了答案，虽然我对自己的目标有了更好的了解，但我没有任何运气能够将其实施到我的谷歌地图中。

var infowindow = new google.maps.InfoWindow();
var marker, i;
var locations = [
    ['<div style="width: 170px;">Title1</div>', 50.794785, -1.116947, image],
    ['<div style="width: 190px;">Title2</div>', 50.797, -1.109, image],
    ['<div style="width: 120px;">Title3', 50.796928, -1.107119, '../images/map-pointer.png'],
    ['<div style="width: 150px;">Title4</div>', 50.794703, -1.117880, '../images/map-pointer.png']
];
/* Get the markers from the array */
for (i = 0; i < locations.length; i++)   
    marker = new google.maps.Marker(
        position: new google.maps.LatLng(locations[i][1], locations[i][2]), 
        map: map,
        icon: locations[i][3],
        zIndex: 10
    ); 
    /* Open marker on mouseover */
    google.maps.event.addListener(marker, 'mouseover', (function(marker, i) 
    return function() 
        infowindow.setContent(locations[i][0]);
        infowindow.open(map, marker);
    
    )(marker, i));

/* Change markers on zoom */
google.maps.event.addListener(map, 'zoom_changed', function() 
var zoom = map.getZoom();

    if (zoom <= 15) 
        marker.setMap(null);
     else                            
        marker.setMap(map);
    
);

标记绘制正常，但我尝试执行的缩放功能似乎根本不起作用 - 我做错了吗？

【参考方案1】：

您需要将标记保存在数组中并对其进行迭代以在缩放事件中显示/隐藏它们。您只是将最后一个标记保存在 marker 变量中。您需要一个 markers 数组。此外，您可以使用标记的setVisible 方法而不是使用setMap。

var infowindow = new google.maps.InfoWindow();
var marker, i;
var markers = [];
var locations = [
    ['<div style="width: 170px;">Title1</div>', 50.794785, -1.116947, image],
    ['<div style="width: 190px;">Title2</div>', 50.797, -1.109, image],
    ['<div style="width: 120px;">Title3', 50.796928, -1.107119, '../images/map-pointer.png'],
    ['<div style="width: 150px;">Title4</div>', 50.794703, -1.117880, '../images/map-pointer.png']
];
/* Get the markers from the array */
for (i = 0; i < locations.length; i++)   
    marker = new google.maps.Marker(
        position: new google.maps.LatLng(locations[i][1], locations[i][2]), 
        map: map,
        visible: true, // or false. Whatever you need.
        icon: locations[i][3],
        zIndex: 10
    ); 
    /* Open marker on mouseover */
    google.maps.event.addListener(marker, 'mouseover', (function(marker, i) 
    return function() 
        infowindow.setContent(locations[i][0]);
        infowindow.open(map, marker);
    
    )(marker, i));
    markers.push(marker); // save all markers


/* Change markers on zoom */
google.maps.event.addListener(map, 'zoom_changed', function() 
    var zoom = map.getZoom();
    // iterate over markers and call setVisible
    for (i = 0; i < locations.length; i++) 
        markers[i].setVisible(zoom <= 15);
    
);

【讨论】：

非常感谢您！我更改了它，以便它们会在缩放 >=15 时显示 - 唯一的问题是地图加载时图标在那里，直到您放大/缩小。起初我希望它们隐藏起来，然后当用户放大它们时它们会出现。还有一种方法可以让某些图标以不同的缩放比例显示吗？还是我必须使用标记聚类器？

您可以使用集群器。或者，如果您想自己做这一切，您可以拥有多个标记数组并根据缩放级别调整它们的可见性:) 我不知道您正在处理多少个标记（和标记组），所以很难说哪种方法最适合您。

感谢您的快速回复 :) 我只有 4 个要显示的标记。理想情况下，如果我能够，我希望在缩小地图时显示两个，然后在放大地图时显示所有这些。要拥有两个数组，我是否必须拥有两个 var 位置（例如 var locations1、var locations2）？此外，似乎在加载标记的那一刻，只有当用户更改缩放比例时，它们才会显示/隐藏。如果应该显示标记，我是否必须使用 if 函数从一开始就确定它？

将visible: false 属性添加到您的标记选项中，标记从一开始就是不可见的。检查MarkerOptions 文档。我更新了我发布的代码以添加 visible 选项。