Gmap3 多个标记加载缓慢。怎么解决？答案

【问题标题】：Gmap3 Multiple Markers is Loading Slowly. How to solve?Gmap3 多个标记加载缓慢。怎么解决？
【发布时间】：2014-06-13 07:16:17
【问题描述】：

我正在使用 Gmap3 将 Google 地图加载到我的网站上。在这张地图中有 100 多个标记。问题是地图加载速度很慢，加载整个地图需要一分钟多的时间。

如何加快具有大量标记的地图的加载速度？

我使用的是最新版本的 Gmap3 (v6)，并且我使用的是 jQuery 2.1。

我尝试将缩放级别更改为更近的视图，但没有奏效。我还删除了绿色标记，但这也没有加快速度。

我想知道将方法从地址更改为纬度和经度是否有助于加快处理速度，但是如果这样做几乎没有好处或没有好处，那么这样做会很费时间。

从我使用 Firebug 看到的情况来看，脚本似乎正在请求每个标记，将它们全部获取，然后显示标记。每个标记的平均时间为 100 毫秒（大约），这需要一分钟以上的时间。

有没有办法加快速度？可能一次请求多个标记？

编辑

在 Gmap3 的网站上对此进行研究时，我遇到了集群问题。我实现了下载文件中提供的示例，但它的加载速度仍然非常缓慢。

var RetailList = [
  {address:'5555 Brighton Blvd., Denver, CO 80216', data:'<a href="#id1" class="fancybox rls">Store Location 1</a>'},
  //Additional locations using same markup as above.
];

$(function() {

    $("#rec-map").gmap3({
  map:{
    options:{
      center:[39.739, -104.9847],
      zoom: 9
    }
  },
 marker: {
            values: RetailList,
            cluster:{
              radius:100,
              0: {
                content: "<div class='cluster cluster-1'>CLUSTER_COUNT</div>",
                width: 53,
                height: 52
              },
              20: {
                content: "<div class='cluster cluster-2'>CLUSTER_COUNT</div>",
                width: 56,
                height: 55
              },
              50: {
                content: "<div class='cluster cluster-3'>CLUSTER_COUNT</div>",
                width: 66,
                height: 65
              },
              events: {
                click: function(cluster) {
                  var map = $(this).gmap3("get");
                  map.setCenter(cluster.main.getPosition());
                  map.setZoom(map.getZoom() + 1);
                }
              }
            },
            options: {
              icon: new google.maps.MarkerImage("http://maps.gstatic.com/mapfiles/icon_green.png"),
              draggable: false
            },
    events:{
      mouseover: function(marker, event, context){
        var map = $(this).gmap3("get"),
          infowindow = $(this).gmap3({get:{name:"infowindow"}});
        if (infowindow){
          infowindow.open(map, marker);
          infowindow.setContent(context.data);
        } else {
          $(this).gmap3({
            infowindow:{
              anchor:marker,
              options:{content: context.data}
            }
          });
        }
      } /* ,
      mouseout: function(){
        var infowindow = $(this).gmap3({get:{name:"infowindow"}});
        if (infowindow){
          infowindow.close();
        }
      } */
    }
   }
  });
});

【问题讨论】：

标签： javascript jquery google-maps google-maps-api-3 jquery-gmap3

【解决方案1】：

事实证明，从使用地址更改为经度/纬度是有效的。我也将它与 Gmap3 的clustering feature 结合使用，它现在可以快速流畅地工作。

上面的代码可以工作，但是改变这一行：

这个：

{address:'5555 Brighton Blvd., Denver, CO 80216', data:'<a href="#id1" class="fancybox rls">Store Location 1</a>'},
 //Additional locations using same markup as above.

成为：

{lat:39.777648,lng:-104.969998, data:'<a href="#id1" class="fancybox rls">Store Location 1</a>'},
 //Additional locations using same markup as above.

我相信这是因为脚本必须使用地址来查找地址并返回正确的位置。使用经度和纬度只有一个位置，它可以快速绘制位置。

【讨论】：