仿百度地图实现底部自动收缩的切换地图模式的三个按钮

最新推荐文章于 2023-07-01 14:26:03 发布

第一段代码

最新推荐文章于 2023-07-01 14:26:03 发布

阅读量601

点赞数 1

分类专栏：前端文章标签： css html 前端

本文链接：https://blog.youkuaiyun.com/godot06/article/details/121144270

版权

前端专栏收录该内容

31 篇文章

订阅专栏

在开发和使用百度地图时,发现百度地图开发的模式切换自动收缩挺方便的,查看了一下网页源代码,发现不是地图封装的控件,是html写的按钮.

这里代码用CSS3 transition 属性实现地图切换.

<html>
<head>
<style scoped>
#mapType {
  width: 106px;
  height: 70px;
  position: absolute;
  bottom: 20px;
  right: 20px;
  z-index: 2;
  cursor: pointer;
  border-radius: 5px;
  transition: width 0.8s, height 0.8s;
  -moz-transition: width 0.8s, height 0.8s, -moz-transform 0.8s; /* Firefox 4 */
  -webkit-transition: width 0.8s, height 0.8s, -webkit-transform 0.8s; /* Safari and Chrome */
  -o-transition: width 0.8s, height 0.8s, -o-transform 0.8s; /* Opera */
}
#mapType:hover {
  width: 288px;
  background: rgba(255, 255, 255, 0.3);
}
#mapType .mapTypeCard {
  position: absolute;
  top: 5px;
  width: 86px;
  height: 60px;
  border-radius: 5px;
  border: solid 1px black;
}
#mapType .mapTypeCard span {
  width: 36px;
  height: 16px;
  position: absolute;
  bottom: 1px;
  right: 1px;
  display: inline-block;
  font-size: 12px;
  line-height: 16px;
  text-align: center;
  color: #fff;
  background: #888f88;
  opacity: 0.8;
}
#mapType .vectorType {
  background-color: pink;
  z-index: 3;
  right: 15px;
  transition: right 0.8s;
  -moz-transition: right 0.8s; /* Firefox 4 */
  -webkit-transition: right 0.8s; /* Safari and Chrome */
  -o-transition: right 0.8s; /* Opera */
}
#mapType .imgType {
  z-index: 2;
  right: 10px;
  background-color: rgb(118, 118, 201);
  transition: right 0.8s;
  -moz-transition: right 0.8s; /* Firefox 4 */
  -webkit-transition: right 0.8s; /* Safari and Chrome */
  -o-transition: right 0.8s; /* Opera */
}
#mapType .terType {
  z-index: 1;
  right: 5px;
  background-color: greenyellow;
  transition: right 0.8s;
  -moz-transition: right 0.8s; /* Firefox 4 */
  -webkit-transition: right 0.8s; /* Safari and Chrome */
  -o-transition: right 0.8s; /* Opera */
  transition: right 0.8s;
  -moz-transition: right 0.8s; /* Firefox 4 */
  -webkit-transition: right 0.8s; /* Safari 和 Chrome */
  -o-transition: right 0.8s; /* Opera */
}
#mapType:hover .vectorType {
  right: 197px;
}
#mapType:hover .imgType {
  right: 101px;
}
#mapType:hover .terType {
  right: 5px;
}
#mapType .vectorType:hover,
#mapType .active {
  border: solid 1px #31a5f7;
}
#mapType .imgType:hover {
  border: solid 1px #31a5f7;
}
#mapType .terType:hover {
  border: solid 1px #31a5f7;
}
#mapType .vectorType:hover span,
#mapType .active span {
  background: #31a5f7;
}
#mapType .imgType:hover span {
  background: #31a5f7;
}
#mapType .terType:hover span {
  background: #31a5f7;
}
</style>
</head>
</body>
  <div id="map_container"></div>
  <div id="mapType">
    <div class="mapTypeCard vectorType">
      <span>普通</span>
    </div>
    <div class="mapTypeCard imgType">
      <span>卫星</span>
    </div>
    <div class="mapTypeCard terType" id="terType">
      <span>三维</span>
    </div>
  </div>
<script type="text/javascript">
	document.getElementById("terType").onclick=function(){
	alert("自动缩放");
	};
</script>

</body>
</html>

代码来源:

https://blog.youkuaiyun.com/xm_w_xm/article/details/88682548