谷歌地图加载超过 1000 个标记浏览器没有响应

Question

我是 Google 地图的新手，我正在将 gps 数据绘制到 Google 地图上，它可以正常工作到 500 点。如果数据超过 500 则速度会变慢是否有其他方法可以在地图上绘制标记。

我只是在谷歌地图上标记特定时间段的gps数据。

稍后我需要在谷歌地图中绘制数十万个gps数据，下面的方法会减慢并退出firefox或chrome（它会超时）。

如何在谷歌地图上绘制更多数据，而且应该很快

我的javascript代码，销售数据将是json数据：

 function show_map_all_data(sale_data)
    {
 init_map();
    var count_actual=sale_data.length;
    var locations=[];

                for (var i=0;i<count_actual;i++)
        {
                var temp=[]
                temp.push(sale_data[i]['GPS_latitude'],sale_data[i]['GPS_longitude'])
                locations.push(temp);
                }
//console.log(locations);

   var infowindow = new google.maps.InfoWindow();

    var marker, i;
    for (i = 0; i < locations.length; i++) {
      marker = new google.maps.Marker({
        position: new google.maps.LatLng(locations[i][0], locations[i][1]),
          icon: {
          path: google.maps.SymbolPath.CIRCLE,
                strokeColor: '#8e2014',
                scale: 4,
                strokeOpacity: 1.0,
              strokeWeight: 10,
              fillColor: '#8e2014',
              animation: google.maps.Animation.DROP,
    },
        map: map
      });

      google.maps.event.addListener(marker, 'click', (function(marker, i) {
        return function() {
          infowindow.setContent(locations[i][0] + "," + locations[i][1]);
          infowindow.open(map, marker);
        }
      })(marker, i));

    }

    }

Answer 1

您可能需要研究标记聚类以加快页面加载时间（并避免超时）。在客户端呈现多个标记可能是许多地图应用程序性能方面的失败。很难进行基准测试、修复，在某些情况下甚至确定存在问题（由于浏览器实现差异、客户端可用的硬件、移动设备等等）。

开始解决此问题的最简单方法是使用标记聚类解决方案。基本思想是将地理上相似的位置分组到一个组中，并显示点数。当用户放大地图时，这些组会展开以显示下方的各个标记。

也许最简单的实现是markerclusterer 库。一个基本的实现如下（在库导入之后，不反映你的代码，这只是我能想到的最简单的例子）：

<script type="text/javascript">
  function initialize() {
    var center = new google.maps.LatLng(37.4419, -122.1419);

    var map = new google.maps.Map(document.getElementById('map'), {
      zoom: 3,
      center: center,
      mapTypeId: google.maps.MapTypeId.ROADMAP
    });

    var markers = [];
    for (var i = 0; i < 100; i++) {
      var location = yourData.location[i];
      var latLng = new google.maps.LatLng(location.latitude,
          location.longitude);
      var marker = new google.maps.Marker({
        position: latLng
      });
      markers.push(marker);
    }
    var markerCluster = new MarkerClusterer(map, markers);
  }
  google.maps.event.addDomListener(window, 'load', initialize);
</script>

标记不是直接添加到地图中，而是添加到数组中。然后将该数组传递给为您处理复杂计算的库并附加到地图上。

这些实现不仅极大地提高了客户端性能，而且在许多情况下，它们还导致 UI 更简单、更简洁，并且更容易消化更大规模的数据。

其他实现可从Google获得。

编辑以回复评论

如果您查看此处：http://gmaps-utility-library.googlecode.com/svn/trunk/markerclusterer/1.0/docs/reference.html 并查找名为 maxZoom 的属性，您可以在集群选项对象中设置缩放级别，之后将关闭集群以允许绘制所有标记。