放大和缩小后在地图上显示的计数标记答案

【问题标题】：count markers displayed on map after zoom in and out放大和缩小后在地图上显示的计数标记
【发布时间】：2012-05-05 21:47:29
【问题描述】：

我正在使用 google-maps-utility-library-v3。我正在尝试放大和缩小，如果点不再出现在屏幕上，我想看到计数 0。但它不起作用。如果我注释掉 mgr.addMarkers(markers,5);它有效....但它始终为 0，因为没有制造商由经理管理。谁能告诉我为什么？

<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="initial-scale=1.0, user-scalable=no" />
<style type="text/css">
  html { height: 100% }
  body { height: 100%; margin: 0; padding: 0 }
  #map_canvas { height: 100% }
</style>
<script type="text/javascript"
  src="http://maps.googleapis.com/maps/api/js?key=??????????????&sensor=false">
</script>
<script type="text/javascript" src="downloadxml.js"></script>
<script src="http://google-maps-utility-library-v3.googlecode.com/svn/tags/markermanager/1.0/src/markermanager.js"></script>
<script type="text/javascript">

  var map = null;
  function initialize() {

    var myOptions = {
        zoom: 8,
        center: new google.maps.LatLng(42.35428, -71.05525),
        mapTypeId: google.maps.MapTypeId.ROADMAP
    }

    map = new google.maps.Map(document.getElementById('map'), myOptions);

    //hard code a marker
    var lat = 42.35428;
    var lng = -71.05525;
    var point = new google.maps.LatLng(lat,lng);
    var html = "I am a hard-coded dot";
    var marker = new google.maps.Marker({
        map: map,
        position: point,
        icon: "http://www.google.com/mapfiles/arrow.png",
        shadow: "http://www.google.com/mapfiles/arrowshadow.png"
    });
    var markers = [];
    markers.push(marker);
    var mgr = new MarkerManager(map);
    mgr.addMarkers(markers,5);
    mgr.refresh();

    google.maps.event.addListener(map, 'zoom_changed', function() {
        var zoomLevel = map.getZoom();
        var count = mgr.getMarkerCount(zoomLevel);
        document.getElementById("Listing").innerHTML += count + "<BR>";
    });
  }

</script>

【问题讨论】：

没什么大不了的，但为了清楚起见，您实际上使用的是众多 v3 实用程序库之一：MarkerManager v1.0。

标签： google-maps-api-3

【解决方案1】：

您似乎在完全初始化之前使用 MarkerManager。以下是用于解决此问题的代码的更新部分：

var markers = [];
markers.push(marker);
var mgr = new MarkerManager(map);
google.maps.event.addListenerOnce(mgr, 'loaded', function(){
    mgr.addMarkers(markers, 5);
    mgr.refresh();
});

将此示例作为参考：http://google-maps-utility-library-v3.googlecode.com/svn/tags/markermanager/1.0/docs/examples.html

【讨论】：

非常感谢！这很好用！我对 javascript 很陌生，你能说几句来解释这里的执行顺序是什么，什么是 mgr 的“加载”事件？我很感激。
标记管理器库在地图上执行几个操作，这些操作只有在地图完全初始化后才有效。库编写者添加了“加载”事件，以便您可以确保在添加标记之前准备好操作地图。