很多时候,google地图控件的位置不是我们想要的,我百度时候发现,google地图好像没有将全屏按键作为一个单独的控件,也有可能是我没有查询到,下面是一个这样的需求,由于全屏按键被遮挡了,无法点击,现将按键移到右下角
先上效果图
具体代码如下
- 创建地图代码
这里options中,添加了disableDefaultUI: true,这是将所有的空间去除,下面的则是将所有的控件添加回来,之所以这样做,是因为没找到全屏按键的单独设置,只能使用这种比较麻烦的方式进行
zoomControl:true,
mapTypeControl:true,
scaleControl:true,
streetViewControl:true,
overviewMapControl:true,
rotateControl:true
self.mapLoad().then((AMap: any) => {
self.map = new AMap.Map(document.getElementById(options.container || ""), {
zoom: options.zoom || 4,
center: options.center || { lat: 36.1726, lng: -115.1727 },
styles: options.styles,
gestureHandling: 'greedy',
disableDefaultUI: true,
panControl:true,
zoomControl:true,
mapTypeControl:true,
scaleControl:true,
streetViewControl:true,
overviewMapControl:true,
rotateControl:true
});
// 获取地图元素
const elementToSendFullscreen = self.map.getDiv().firstChild;
// 获取全屏按键
const fullScreenBtn = document.getElementById('fullScreenBtn');
// 退出全屏按键
const smallScreenBtn = document.getElementById('smallScreenBtn');
// 全屏函数
fullScreenBtn.addEventListener("click", () => {
if (elementToSendFullscreen.requestFullscreen) {
elementToSendFullscreen.requestFullscreen();
} else if (elementToSendFullscreen.webkitRequestFullScreen) {
elementToSendFullscreen.webkitRequestFullScreen();
} else if (elementToSendFullscreen.mozRequestFullScreen) {
elementToSendFullscreen.mozRequestFullScreen();
} else if (elementToSendFullscreen.msRequestFullScreen) {
elementToSendFullscreen.msRequestFullScreen();
}
fullScreenBtn.style.display = 'none'
smallScreenBtn.style.display = 'flex'
})
// 退出全屏函数
smallScreenBtn.addEventListener("click", () => {
if (document.exitFullscreen) {
document.exitFullscreen();
}
fullScreenBtn.style.display = 'flex'
smallScreenBtn.style.display = 'none'
})
// 添加控件集
self.map.controls[google.maps.ControlPosition.TOP_RIGHT].push(fullScreenBtn);
self.map.controls[google.maps.ControlPosition.TOP_RIGHT].push(smallScreenBtn);
- 按键的位置设置
<div id="fullScreenBtn">
<i nz-icon type="fullscreen" theme="outline"></i>
</div>
<div id="smallScreenBtn">
<i nz-icon type="fullscreen-exit" theme="outline"></i>
</div>
</div>
- scss样式
需要注意的是,这里使用了好几个!important,这是因为fullScreenBtn 和smallScreenBtn与google地图的命名是一样的,需要添加!import确保起作用
定位的位置根据自己实际情况即可,使用 的是fixed定位,可以自行参考,如果定位出错,可以在控制面板中按下F12按键进行搜索,即可定位自己的元素位置
#fullScreenBtn {
position: fixed !important;
bottom: 25px !important;
left: 200px !important;
top: auto !important;
right: auto !important;
background-color: white;
height: 40px;
width: 40px;
display: flex;
justify-content: center;
align-items: center;
i {
font-size: 30px;
}
}
#fullScreenBtn:hover {
cursor: pointer;
}
#smallScreenBtn {
position: fixed !important;
bottom: 25px !important;
left: 20px !important;
right: auto !important;
top: auto !important;
background-color: white;
height: 40px;
width: 40px;
display: none;
justify-content: center;
align-items: center;
i {
font-size: 30px;
}
}
#smallScreenBtn:hover {
cursor: pointer;
}