javascript - 在特定缩放级别更改标记 - Google Maps API 3

Question

我有一张 map ，可以加载并(正确)显示一堆标记。标记的数量是无限的，因此它们是在 map 初始化之前通过在 JavaScript 中运行一些 PHP 代码创建的(标记来自数据库)。

我想知道，当达到一定的缩放级别时，是否可以将标记从简单的点更改为其他内容？

这是一些代码:

<script>
    var <?php echo $clinic_string; ?>; //string with marker names
    var map;

    function initialize() {
        var kzn = new google.maps.LatLng(-28.459033,30.217037);
        var mapOptions = {
            zoom: 7,
            center: kzn,
            mapTypeId: google.maps.MapTypeId.ROADMAP 
        }
        map = new google.maps.Map(document.getElementById('map-canvas'), mapOptions);

        <?php foreach($jsdata as $data) : ?>
            marker_<?php echo $data['id'];?> = new google.maps.Marker({
                position: new google.maps.LatLng(<?php echo $data['location'];?>),
                map: map,
                icon: 'images/reddot.gif'
            });
        <?php endforeach; ?>
    }
    google.maps.event.addDomListener(window, 'load', initialize);
</script>

假设我的缩放级别达到15级，它需要将icon更改为images/clinic.gif。

这可能吗？如果是这样，我怎样才能实现这一目标？

Answer 1

不太难。您需要一个用于 map 对象的 Zoom_changed 事件的事件监听器。您可以使用标记的 setIcon 函数更改标记图标。像这样的东西:

    <?php foreach($jsdata as $data) : ?>
        marker_<?php echo $data['id'];?> = new google.maps.Marker({
            position: new google.maps.LatLng(<?php echo $data['location'];?>),
            map: map,
            icon: 'images/reddot.gif'
        });

        map.addListener('zoom_changed', function() {
            if (map.getZoom() >= 15) {
                marker_<?php echo $data['id'];?>.setIcon('images/clinic.gif');
            } else {    // assuming you want to change it back if they zoom back out
                marker_<?php echo $data['id'];?>.setIcon('images/reddot.gif');
            }
        });
    <?php endforeach; ?>

事实上，我认为我宁愿为所有标记使用一个数组，而不是拥有 X 个“zoom_changed”事件监听器。然后只需一个事件监听器函数，它会循环遍历所有这些标记。

    markers = [];

    <?php foreach($jsdata as $data) : ?>
        marker_<?php echo $data['id'];?> = new google.maps.Marker({
            position: new google.maps.LatLng(<?php echo $data['location'];?>),
            map: map,
            icon: 'images/reddot.gif'
        });

        markers.push(marker_<?php echo $data['id'];?>);
    <?php endforeach; ?>

    map.addListener('zoom_changed', function() {
        var image;
        if (map.getZoom() >= 15) {
            image = 'images/clinic.gif';
        else {  // assuming you want to change it back if they zoom back out
            image = 'images/reddot.gif';
        }

        for (var i = 0; i < markers.length; i++) {
            markers[i].setIcon(image);
        }
    });