Javascript 谷歌地图API JS-MarkerClusterer-无法读取属性'；maxZoom'；未定义的

我有谷歌地图对象和选项：

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

Uncaught TypeError:无法读取未定义的属性“maxZoom”
在Ag。（markerclusterer.js:163）
at Object.uuz.trigger（js？key=aizasybpuentxohhtdmllm_Qd2SL_Q2t45o3_0:99）
在Hb时（js？键=AizasybpuentxOhtdmllm_Qd2SL_Q2t45o3_0:38）
at Ag.uu.k.set（js？key=AizasybpuentxOhtdmllm_Qd2SL_Q2t45o3_0:101）
在Ag.setZoom（js？key=AizasybpuentxOhtdmllm_Qd2SL_Q2t45o3_0:56）
在OfferMap.setBounds（offers_offer-map_1.js:1）
在HTMLDocument。（推荐信-推荐信3.js:1）
at i（jquery.min.js:2）
在Object.fireWith[as resolveWith]（jquery.min.js:2）
在Function.ready（jquery.min.js:2）

有人知道发生了什么吗？

更新

由于问题是由于下面的评论中提到的MarkerClusterer as@geocodezip，下面是我加载的脚本：

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

---

您应该在

窗口中包装此函数。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);
}

---

尝试全局设置

map

，调用

update

函数，用

map.setZoom（7）更新缩放

演示

JS

HTML


设置缩放

更新小提琴：

好的，我解决了！显然，正如@geocodezip在问题下提到的，这是
mastercluster
问题，我导入的库已经过时了。必须下载。工作完美

另外，不要忘记在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'
    }]
});

在清除问题期间，为未来的访问者更新标题和问题。
仅在定义谷歌地图对象的地图类型集合后，我的问题才得以解决：
this.googleMapOptions={
缩放：5，
中心：{lat:-28.643387，lng:153.612224}，
disableDefaultUI:true，
样式：MapStyle.json，
maxZoom:18，
mapTypeId:google.maps.mapTypeId.ROADMAP，
mapTypeControl:false，
动物控制：错误
}

初始化谷歌地图：

        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对象可以在
处生成，类似于@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();
        }
  });

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

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


您是否有可用的fiddle？项目太复杂，无法复制供fiddle使用，抱歉：/js是否放置在
标记之前或之后？请提供一个示例来说明此问题。错误在MarkerClusterer中，但发布的代码中不存在MarkerClusterer。@geocodezip用markercluster更新了一个问题。请看一个全局设置的lookmap，我调用了setCenter函数，它工作正常，请看一个更新我将它放在jqueryready下，在
setZoom
和
setCenter
工作之前调用
setCenter
。查看更新
// 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();
        }
  });

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