地圖標記集羣工作不

-1

地圖集羣不能與許多地方工作..地圖標記集羣工作不

在這裏var location超過300個地點，這就是爲什麼地圖不工作。如果我改變它只有3/4的位置，它可以很好地工作，但對於更多的位置它不會加載...

我認爲這是由於超時。如何解決這個

function initMap() { 

    var map = new google.maps.Map(document.getElementById('map'), { 
    zoom: 12, 
    center: { 
     lat: 49.3150, 
     lng: -123.1507 
    } 
    }); 
    var infoWin = new google.maps.InfoWindow(); 


    var oms = new OverlappingMarkerSpiderfier(map, 
     {markersWontMove: true, markersWontHide: true, basicFormatEvents: true,keepSpiderfied: true}); 

    var markers = locations.map(function(location, i) { 
    var marker = new google.maps.Marker({ 
     position: location, 
     icon: "http://www.makeyourselfathome.com/blog/wp-content/uploads/2017/04/small-logo.png" 
    }); 
    google.maps.event.addListener(marker, 'spider_click', function(evt) { 


     infoWin.setContent(location.city); 
     infoWin.open(map, marker); 
    }); 

    oms.addMarker(marker); 

    return marker; 
    }); 

    var markerCluster = new MarkerClusterer(map, markers, { 
    imagePath: 'https://developers.google.com/maps/documentation/javascript/examples/markerclusterer/m',maxZoom:15 
    }); 

} 
var locations = [{lat: 49.280502, lng: -123.109558, city : '<div class="mapwindow"><a href="listing.html&371"> <strong>#371 Available May<br/> Rate $4800</strong><br/><img src="./listings/371/1.jpg" width="200px" /></a></div>' },{lat: 49.257283, lng: -123.152987, city : '<div class="mapwindow"><a href="listing.html&505d"> <strong>#505d Available May<br/> Rate $245</strong><br/><img src="./listings/505d/1.jpg" width="200px" /></a></div>' }]; 

google.maps.event.addDomListener(window, "load", initMap);

來源

2017-08-01 Champ Decay

在MarkerClusterer中使用300多個位置應該沒有任何問題。這聽起來對我來說更可能是某個地方的數據出現問題，請嘗試驗證您的JSON並查看是否有任何問題。控制檯中的任何JS錯誤？任何無效的座標？上傳一整套位置供我們查看。 – duncan

我做的代碼演示。您可以使用您的位置。

 



var locations = [{lat: 49.280502, lng: -123.109558},{lat: 49.257283, lng: -123.152987}]; 
function initMap() { 

     var map = new google.maps.Map(document.getElementById('map'), { 
      zoom: 12, 
    center: { 
     lat: 49.3150, 
     lng: -123.1507 
    } 
     }); 

     // Create an array of alphabetical characters used to label the markers. 
     var labels = 'ABCDEFGHIJKLMNOPQRSTUVWXYZ'; 

     // Add some markers to the map. 
     // Note: The code uses the JavaScript Array.prototype.map() method to 
     // create an array of markers based on a given "locations" array. 
     // The map() method here has nothing to do with the Google Maps API. 
     var markers = locations.map(function(location, i) { 
      return new google.maps.Marker({ 
      position: location, 
      icon: "http://www.makeyourselfathome.com/blog/wp-content/uploads/2017/04/small-logo.png" 
      }); 
     }); 

     // Add a marker clusterer to manage the markers. 
     var markerCluster = new MarkerClusterer(map, markers, 
      {imagePath: 'https://developers.google.com/maps/documentation/javascript/examples/markerclusterer/m'}); 
     }

來源

2017-08-01 08:28:07 shangzhouwan

在這裏你是演示[鏈接]（https://plnkr.co/edit/0w08p7zUz8KpjV7bCJMe?p=preview） – shangzhouwan

我的代碼適用於像10或20這樣較少數量的位置，但不適用於200/250個位置。 ... –

JSON數據存在問題。代碼正在工作完美。

來源

2017-08-01 11:49:33

地圖標記集羣工作不

回答

相關問題