gpt4 book ai didi

javascript - 是否可以隐藏(切换)主 map 层并仅显示地面覆盖图像本身?

转载 作者:行者123 更新时间:2023-11-30 16:45:11 27 4
gpt4 key购买 nike

我有一个 groundOverlay 图像,我希望可以打开/关闭主 map ,以便只显示叠加图像。那可能吗?

PS:我使用的是 javascript api v3。

最佳答案

您可以实现一个自定义 MapType(不渲染 Tiles),然后您只需要在这个自定义 MapType 和一个内置 MapType(例如 ROADMAP)之间切换:

function initialize() {
var goo = google.maps,
map = new goo.Map(document.getElementById('map-canvas'), {
zoom: 11,
center: new goo.LatLng(40.740, -74.18),
mapTypeControl: false

}),

mt = function() {
this.getTile = function() {
var n = document.createElement('div');
n.style.cssText = 'background:#fff;width:256px;height:256px;';
return n;
};
this.tileSize = new google.maps.Size(256, 256);
this.maxZoom = 20;
},
//maptype-control
mtc = document.createElement('div');

mtc.id = 'mtc';
map.controls[google.maps.ControlPosition.LEFT_BOTTOM].push(mtc);

google.maps.event.addDomListener(mtc, 'click', function() {
console.log(map.getMapTypeId())
map.setMapTypeId((map.getMapTypeId() === 'hidden') ? google.maps.MapTypeId.ROADMAP : 'hidden');
});
google.maps.event.addListener(map, 'maptypeid_changed', function() {
mtc.style.textDecoration = ((this.getMapTypeId() === 'hidden') ? 'none' : 'line-through');
});

map.mapTypes.set('hidden', new mt);
map.setMapTypeId('hidden');

new goo.GroundOverlay(
'https://www.lib.utexas.edu/maps/historical/newark_nj_1922.jpg',
new goo.LatLngBounds(
new goo.LatLng(40.712216, -74.22655),
new goo.LatLng(40.773941, -74.12544)
), {
map: map
}
);

}

google.maps.event.addDomListener(window, 'load', initialize);
html,
body,
#map-canvas {
height: 100%;
margin: 0px;
padding: 0px
}
#mtc {
border: 1px solid #000;
background: tomato;
padding: 2px;
margin: 4px;
cursor: pointer;
font-size: 1.4em;
font-weight: bold;
border-radius:2px;
}
#mtc:after {
content: 'Tiles';
}
<script src="https://maps.googleapis.com/maps/api/js?v=3"></script>
<div id="map-canvas"></div>

关于javascript - 是否可以隐藏(切换)主 map 层并仅显示地面覆盖图像本身?,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/31355216/

27 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com