标记消失，具体取决于标记的比例和类型

Question

我想让某种类型的标记消失，这取决于我实现的规模，所有标记都将以<= 14的比例关闭。告诉我如何正确地写一个禁用标记的条件，类型为“ps1”比例<= 14

<script>

var markerType = {
    "ps1": [], "tp1": [], "rtp0": []
};

  function initMap() {
  var map = new google.maps.Map(document.getElementById('map'), {
  center: new google.maps.LatLng(47.82034163, 31.19833049),
  zoom: 14,
        });
          var image =  {
          rtp0: {
          url: './image/rtp0.png',scaledSize: new google.maps.Size(28, 40)},
          ps1: {
          url: './image/ps1.png',scaledSize: new google.maps.Size(28, 40)},
          tp1: {
          url: './image/tp1.png',scaledSize: new google.maps.Size(28, 40)},
};
          downloadUrl('phpsqlinfo.php', function(data) {
            var xml = data.responseXML;
            var markers = xml.documentElement.getElementsByTagName('marker');
            Array.prototype.forEach.call(markers, function(markerElem) {
              var point = new google.maps.LatLng(
                  parseFloat(markerElem.getAttribute('lat')),
                  parseFloat(markerElem.getAttribute('lng')));
              var type = markerElem.getAttribute('type');

                var icon = image[type] || {};              
                var marker = new google.maps.Marker({
                icon: icon,
                map: map,
                position: point,
              });

    markerType[type].push(marker);

    google.maps.event.addListener(map, 'zoom_changed', function() {
    zoomLevel = map.getZoom();

    for (var i = 0; i < markerType[type].length; i++) {
    var markers = markerType[type][i];

    if (zoomLevel <= 14) {
    (!markers.getVisible())
     markers.setVisible(false);
      } 
    else {
    markers.setVisible(true);
     }
    }

});
  });
     });

 }

 </script>

Answer 1

当setMap(null)事件触发时，您需要将标记的方法设置为setMap(map)和zoom_changed。

将要过滤的标记（例如ps1）存储在变量中：

var markersToShowHide = markerType.ps1;

然后添加两个函数，一个用于显示标记，另一个用于隐藏它们：

function showMarkers() {
    for (var i = 0; i < markersToShowHide.length; i++) {
        markersToShowHide[i].setMap(map);
    }
}   

function hideMarkers() {
    for (var i = 0; i < markersToShowHide.length; i++) {
        markersToShowHide[i].setMap(null);
    }
}

完整代码：

var markerType = {
 "ps1": [],
 "tp1": [],
 "rtp0": []
};

function initMap() {
var map = new google.maps.Map(document.getElementById('map'), {
    center: new google.maps.LatLng(47.82034163, 31.19833049),
    zoom: 14,
});
var image = {
    rtp0: {
        url: './image/rtp0.png',
        scaledSize: new google.maps.Size(28, 40)
    },
    ps1: {
        url: './image/ps1.png',
        scaledSize: new google.maps.Size(28, 40)
    },
    tp1: {
        url: './image/tp1.png',
        scaledSize: new google.maps.Size(28, 40)
    },
};

    var markersToShowHide = markerType.ps1;

function showMarkers() {
    for (var i = 0; i < markersToShowHide.length; i++) {
        markersToShowHide[i].setMap(map);
    }
}   

function hideMarkers() {
    for (var i = 0; i < markersToShowHide.length; i++) {
        markersToShowHide[i].setMap(null);
    }
}

downloadUrl('phpsqlinfo.php', function(data) {
    var xml = data.responseXML;
    var markers = xml.documentElement.getElementsByTagName('marker');
    Array.prototype.forEach.call(markers, function(markerElem) {
        var point = new google.maps.LatLng(
            parseFloat(markerElem.getAttribute('lat')),
            parseFloat(markerElem.getAttribute('lng')));
        var type = markerElem.getAttribute('type');

        var icon = image[type] || {};
        var marker = new google.maps.Marker({
            icon: icon,
            map: map,
            position: point
        });

        markerType[type].push(marker);

        google.maps.event.addListener(map, 'zoom_changed', function() {
                        if (map.getZoom() <= 14) {
            hideMarkers();                              
                        } else {
                            showMarkers();  
                        }
        });
    });
});

}