谷歌地圖API的JS - MarkerClusterer - 不能讀取的不確定

財產「MAXZOOM」我有選擇谷歌地圖對象：谷歌地圖API的JS - MarkerClusterer - 不能讀取的不確定

$(document).ready(function() { 
    var mapOptions = { 
     zoom: 4, 
     minZoom: 3, 
     maxZoom: 12, 
     center: new google.maps.LatLng(39.484973, -0.364126), 
     mapTypeControl: false, 
     streetViewControl: false 
    }; 

    var mapElement = document.getElementById('#map'); 

    map = new google.maps.Map(mapElement, mapOptions); 

    markers = [...]; 
    markerCluster = new MarkerClusterer(map, markers, { 
     averageCenter: true, 
     styles: [{ 
      url: '/cluster.png', 
      width: 64, 
      height: 64, 
      textColor: 'white', 
      backgroundPosition: 'center' 
     }] 
    }); 

    ... 
}

現在初始化地圖後，我想通過運行改變縮放級別：

var location = ... 

map.setCenter(location); // works fine 
map.setZoom(7);`,

，但我在控制檯得到一個錯誤：

Uncaught TypeError: Cannot read property 'maxZoom' of undefined 
at Ag.<anonymous> (markerclusterer.js:163) 
at Object._.z.trigger (js?key=AIzaSyBpuEnTxOHtdmlMllM_Qd2SL_Q2t45o3_0:99) 
at Hb (js?key=AIzaSyBpuEnTxOHtdmlMllM_Qd2SL_Q2t45o3_0:38) 
at Ag._.k.set (js?key=AIzaSyBpuEnTxOHtdmlMllM_Qd2SL_Q2t45o3_0:101) 
at Ag.setZoom (js?key=AIzaSyBpuEnTxOHtdmlMllM_Qd2SL_Q2t45o3_0:56) 
at OfferMap.setBounds (offers_offer-map_1.js:1) 
at HTMLDocument.<anonymous> (offers_trainee-offers_3.js:1) 
at i (jquery.min.js:2) 
at Object.fireWith [as resolveWith] (jquery.min.js:2) 
at Function.ready (jquery.min.js:2)

任何人有任何想法是怎麼回事？

UPDATE

既然問題是因爲MarkerClusterer作爲@geocodezip在下面的評論中提到，這裏是我在加載腳本：

<script type="text/javascript" src="https://developers.google.com/maps/documentation/javascript/examples/markerclusterer/markerclusterer.js"></script>

來源

2017-05-04 Ignas Damunskis

你有工作小提琴嗎？ – Mazz

項目太複雜，無法複製爲小提琴，抱歉：/ –

您是否在''標籤之前或之後放置了js？ – Mazz

好吧，我決定了！顯然，正如@geocodezip在問題中提到的那樣是masterclusterer問題，我的導入庫已經過期。必須下載newer。完美的作品。

也不要忘記設置MAXZOOM在MarkerClusterer選項：

this.markerCluster = new MarkerClusterer(this.map, this.markers, { 
    maxZoom: 12, 
    averageCenter: true, 
    styles: [{ 
     url: this.clusterIcon, 
     width: 64, 
     height: 64, 
     textColor: 'white', 
     backgroundPosition: 'center' 
    }] 
});

在明確的問題，更新的標題和問題，對未來的遊客。

來源

2017-05-04 14:25:15

你應該把這個包功能window.onload，使確保dom已加載。

window.onload = function() { 

    var mapOptions = { 
     zoom: 4, 
     minZoom: 3, 
     maxZoom: 12, 
     center: new google.maps.LatLng(39.484973, -0.364126), 
     mapTypeControl: false, 
     streetViewControl: false 
    }; 

    var mapElement = document.getElementById('#map'); 

    map = new google.maps.Map(mapElement, mapOptions); 
}

來源

2017-05-04 13:32:46 Mazz

我把它放在jquery下，並在'setZoom'和'setCenter'工作之前調用'setCenter'。查看更新 –

嘗試設置map全球和呼叫update功能與map.setZoom(7);

Fiddle演示

更新變焦JS

var map; 
function initMap() { 
var mapOptions = { 
    zoom: 4, 
    minZoom: 3, 
    maxZoom: 12, 
    center: new google.maps.LatLng(39.484973, -0.364126), 
    mapTypeControl: false, 
    streetViewControl: false 
}; 

var mapElement = document.getElementById('map'); 

map = new google.maps.Map(mapElement, mapOptions); 
} 
function updateMap(){ 
map.setZoom(7); 
}

HTML

<button onclick="updateMap()"> 
set zoom 
</button> 
<div id="map"></div>

更新小提琴：

Fiddle

來源

2017-05-04 13:33:34

地圖是全局設置的，我打電話給setCenter功能，它工作正常，查看更新 –

檢查更新的小提琴 –

谷歌地圖API的JS - MarkerClusterer - 不能讀取的不確定

回答

相關問題