谷歌不提供访问MapTypeControl的方式。
在这种情况下,您需要自己创建MapTypeController。
以下是一个简单的示例。
如果缩放级别超过8,则自动将地图类型更改为混合模式。
但是您可以使用控制器手动更改地图类型并检测它。
https://jsfiddle.net/wf9a5m75/bbjd8Lth/17/
function CustomMapTypeControl(container, options) {
google.maps.MVCObject.call(this);
var self = this;
self.setValues(options);
var mapTypes = [
{label: "ROADMAP", id: google.maps.MapTypeId.ROADMAP},
{label: "HYBRID", id: google.maps.MapTypeId.HYBRID}
];
var buttons = mapTypes.map(function(mapType) {
var button = document.createElement("div");
button.style.float="left";
button.style.minWidth="38px";
button.style.fontSize='11px';
button.style.padding="8px";
button.style.background="white";
button.style.color="black";
button.style.textAlign="center";
button.style.backgroundClip="padding-box";
button.style.boxShadow="rgba(0, 0, 0, 0.298039) 0px 1px 4px -1px";
button.innerText = mapType.label;
button.id = mapType.id;
button.style.cursor = "pointer";
return button;
});
buttons.forEach(function(button) {
google.maps.event.addDomListener(button, 'click', function() {
var button = this;
google.maps.event.trigger(self, 'click', button.id);
self.set("mapTypeId", button.id);
});
container.appendChild(button);
});
}
CustomMapTypeControl.prototype = new google.maps.MVCObject();
google.maps.event.addDomListener(window, "load", function () {
console.log("OK");
var div = document.getElementById('map');
var map = new google.maps.Map(div, {
center: {lat: -34.397, lng: 150.644},
zoom: 8,
mapTypeControl: false
});
var customMapTypeControlDiv = document.createElement("div");
customMapTypeControlDiv.style.padding="10px";
var customMapTypeControl = new CustomMapTypeControl(customMapTypeControlDiv, {
map: map
});
map.controls[google.maps.ControlPosition.TOP_LEFT].push(customMapTypeControlDiv);
customMapTypeControl.bindTo("mapTypeId", map, "mapTypeId", false);
customMapTypeControl.addListener("click", function(mapTypeId) {
alert("user clicked = " + mapTypeId);
});
map.addListener("zoom_changed", onZoomChanged);
});
function onZoomChanged() {
var map = this;
var zoom = map.getZoom();
if (zoom > 8) {
map.setMapTypeId(google.maps.MapTypeId.HYBRID);
} else {
map.setMapTypeId(google.maps.MapTypeId.ROADMAP);
}
}
![enter image description here](https://istack.dev59.com/CpQAS.webp)