Gmap3多个标记正在缓慢加载。怎么解决？

Question

我正在使用Gmap3加载谷歌地图到我的网站。在这张地图中有100+标记。问题是地图加载非常慢，加载整个地图需要超过一分钟的时间。

如何加快地图的加载速度？

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

我试图将缩放级别更改为更近一点的视图，但这不起作用。我也删除了绿色标志，但这也没有加快速度。

我想知道，将方法从地址更改为纬度和经度是否有助于加快速度，但如果它几乎没有或没有好处，那就需要花费大量的时间。

从我使用Firebug可以看到的情况来看，脚本似乎正在请求每个标记，获取所有标记，然后显示标记。每个标记平均100毫秒(大致)，这需要超过一分钟的时间。

有办法加快速度吗？也许一次要求一个以上的标记？

编辑

在Gmap3 3的网站上研究这个问题时，我偶然发现了集群。我实现了下载文件中提供的示例，但是加载速度仍然非常缓慢。

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();
        }
      } */
    }
   }
  });
});

Answer 1

事实证明，从使用地址到经度/纬度的变化是可行的。我也在与聚类特征 of Gmap3一起使用它，现在它正在快速、顺利地工作。

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

这是：

{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.

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