Question

我有Google Map，目前在一个变量中包含5个引脚。

为什么如果我在var中有很多位置，那么地图加载速度很慢？

我的观点是： 如果同一张地图上有超过100个图钉，该如何加快我的Google地图的加载速度？

代码：

<div id='main_map'></div>
<script>
var map;
var markers = [];
var locations = [['content of the popup', 51.248016, 22.567579, '3'],'content of the popup', 21.248016, 22.567579, '3'],'content of the popup', 31.248016, 22.567579, '2'],'content of the popup', 41.248016, 22.567579, '7'],'content of the popup', 71.248016, 22.567579, '3'],];
var labels = 'ABCDEFGHIJKLMNOPQRSTUVWXYZ';
var pinBase = '/static/img/user/pin-';

function initMap() {

  var map = new google.maps.Map(document.getElementById('main_map') {
    zoom: 2, center: new google.maps.LatLng(0, 0),
    mapTypeId: 'terrain'
  });

  for (var i = 0; i < locations.length; i++) {

    markers[i] = new google.maps.Marker({
      position: {lat:locations[i][1], lng:locations[i][2]},
      map: map,
      html: locations[i][0],
      id: i,
      icon: pinBase + locations[i][3] + '.png'
    });

    google.maps.event.addListener(markers[i], 'click', function(){
      var infowindow = new google.maps.InfoWindow({
        id: this.id,
        content: this.html,
        position: this.getPosition()
      });
      map.panTo(this.getPosition());
      smoothZoom(this.getMap(), 13, map.getZoom());

      google.maps.event.addListenerOnce(infowindow, 'closeclick', function(){
        markers[this.id].setVisible(true);
      });

      this.setVisible(true);
      infowindow.open(map);
    });

    let toggleMarkers = (checkbox) => {
      var isChecked = checkbox.checked;
      markers.map((elem) => {
        elem.setVisible(isChecked);
      });
    }

  }

}

initMap();
</script>

如何更快地加载Google Map Pins

0 个答案: