Question

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

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

好的，我解决了！显然，正如@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 2

对我来说，只有在为谷歌地图对象定义 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");

可以在https://mapstyle.withgoogle.com/

生成MapStyle json对象

Answer 3

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

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

Answer 4

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

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();
        }
  });

Google Maps API JS - MarkerClusterer - 无法读取未定义的属性“maxZoom”

5 个答案: