Google地图加载超过1000个标记浏览器无响应

时间:2014-02-11 10:38:33

标签: javascript google-maps google-maps-api-3

我是谷歌地图的新手,我正在将gps数据绘制到谷歌地图上,它可以正常工作500分。如果数据超过500,那么减速是否有任何替代方法将标记绘制到地图上。

我只是在特定时间段内在Google地图中标记gps数据。

稍后我需要在Google地图中绘制成千上万的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));

    }

    }

1 个答案:

答案 0 :(得分: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>

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

这些实现不仅大大提高了客户端的性能,而且在许多情况下,它们还可以实现更简单,更简洁的用户界面,并且更容易在更大范围内消化数据。

其他实施可从Google获得。

编辑以回答评论

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