css地图类型切换按钮
导读：#map {width: 400px;height: 300px;background-color: #f2f2f2;}#button {margin: 10px;}CSS地图类型切换按钮地图卫星地图function changeType(...
#map {
width: 400px;
height: 300px;
background-color: #f2f2f2;
}
#button {
margin: 10px;
}
CSS地图类型切换按钮
地图卫星地图function changeType(type) {
var map = document.getElementById('map');
map.style.backgroundImage =type === 'roadmap'? 'url(https://cdn.pixabay.com/photo/2021/11/22/18/04/mountain-6992012_960_720.jpg)': '';
}
本文介绍如何使用CSS创建地图类型切换按钮。用户可以在卫星和地图模式之间切换地图类型。
首先，创建具有背景颜色的div元素，用作地图容器。然后，创建两个按钮，用于切换地图类型。当用户单击按钮时，JavaScript函数将更改地图容器的背景图像。切换卫星和地图模式的代码如下：
function changeType(type) {
var map = document.getElementById('map');
map.style.backgroundImage =type === 'roadmap'? 'url(https://cdn.pixabay.com/photo/2021/11/22/18/04/mountain-6992012_960_720.jpg)': '';
}
如果type参数设置为“roadmap”，则更改地图容器的背景图像为卫星图像。否则，背景图像将被删除。
最后，在CSS中添加样式以适应地图容器和按钮，以及完整的HTML文档结构。
声明：本文内容由网友自发贡献，本站不承担相应法律责任。对本内容有异议或投诉，请联系2913721942#qq.com核实处理，我们将尽快回复您，谢谢合作！
若转载请注明出处： css地图类型切换按钮
本文地址： https://pptw.com/jishu/568770.html