Google 地图 API JS - MarkerClusterer - 无法读取未定义的属性 'maxZoom'

Question

我有 google 个带有选项的地图对象：

$(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)

有人知道发生了什么事吗？

更新

由于问题是因为 MarkerClusterer，正如下面评论中提到的@geocodezip，这是我加载的脚本：

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

Answer 1

您应该将此函数包装在 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);
}

Answer 2

尝试全局设置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：

Fiddle

Answer 3

好的，我解决了！显然，正如@geocodezip 在问题下提到的那样，这是 masterclusterer 问题，我导入的库已过时。不得不下载 newer。完美运行。

另外不要忘记在 MarkerClusterer 选项中设置 maxZoom：

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

在明确问题期间，为未来的访问者更新标题和问题。

Answer 4

对我来说，只有在为 google map 对象定义 mapTypes 集合后问题才得到解决： this.googleMapOptions = { zoom: 5, center: {lat: -28.643387, lng: 153.612224}, disableDefaultUI: true, styles: MapStyle.json, maxZoom: 18, mapTypeId: google.maps.MapTypeId.ROADMAP, mapTypeControl: false, zoomControl: false }

初始化Google地图：

        this.gmap = new google.maps.Map(jqueryElement[0],
            this.googleMapOptions);

        this.googleMapType = new google.maps.MapTypeRegistry();

        this.roadMapType = new google.maps.StyledMapType(MapStyle.json, { alt: "roadmap", maxZoom: 18, name : "roadmap" })

        this.googleMapType.set("roadmap", this.roadMapType);

        this.gmap.mapTypes = this.googleMapType;
        this.gmap.setMapTypeId("roadmap");

MapStyle json 对象可以在 https://mapstyle.withgoogle.com/

生成

Answer 5

与@Taras 类似，我可以通过稍微调整 markerclusterer.js 文件来解决这个问题。将 'zoom_changed' 侦听器替换为以下...

// Add the map event listeners
  var that = this;
  google.maps.event.addListener(this.map_, 'zoom_changed', function() {
    // Determines map type and prevent illegal zoom levels
        var zoom = that.map_.getZoom();
        var minZoom = that.map_.minZoom || 0;
        var mapType = that.map_.mapTypes[that.map_.getMapTypeId()];
        var maxZoom = null;
        if (mapType !== null && mapType !== undefined) {
            maxZoom = Math.min(that.map_.maxZoom || 100, mapType.maxZoom);
        } else {
            maxZoom = that.map_.maxZoom || 100;
        }

        zoom = Math.min(Math.max(zoom,minZoom),maxZoom);

        if (that.prevZoom_ != zoom) {
            that.prevZoom_ = zoom;
            that.resetViewport();
        }
  });

Answer 6

我在 Angular 8 项目中遇到了同样的问题。将以下内容添加到我的 index.html 文件中可以解决我的问题：

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

Google 地图 API JS - MarkerClusterer - 无法读取未定义的属性 'maxZoom'

Google Maps API JS - MarkerClusterer - Cannot read property 'maxZoom' of undefined

javascript

google-maps

zooming

google-maps-api-3

Google 地图 API JS - MarkerClusterer - 无法读取未定义的 属性 'maxZoom'

Google Maps API JS - MarkerClusterer - Cannot read property 'maxZoom' of undefined

javascript

google-maps

zooming

google-maps-api-3

Google 地图 API JS - MarkerClusterer - 无法读取未定义的属性 'maxZoom'