百度地图缩放功能

最新推荐文章于 2023-09-01 23:58:31 发布

小五Ivy

最新推荐文章于 2023-09-01 23:58:31 发布

阅读量5.6k

点赞数 2

分类专栏：百度地图文章标签：百度 js 前端

本文链接：https://blog.csdn.net/weixin_44471622/article/details/105553859

版权

百度地图专栏收录该内容

3 篇文章 0 订阅

订阅专栏

实现地图缩放功能：

滚动鼠标的滚轮
点击自定义缩放控件，点击 + 是放大地图，点击 - 是缩小地图
地图的缩放级别在4-19之间，超出这个范围将会有提示
也可使用setzoom来定位地图当前的层级

	mapZoom -= 1
    if (mapZoom < 4) {
    	mapZoom = 4;
    }
    map.setZoom(mapZoom)

<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8" />
  <meta name="viewport" content="width=device-width, initial-scale=1.0" />
  <meta http-equiv="X-UA-Compatible" content="ie=edge" />
  <title>地图缩放</title>
  <style>
    body,
    html {
      padding: 10px;
      height: 90%;
    }

    #map {
      width: 95%;
      height: 90%;
      overflow: hidden;
      margin: 0;
      font-family: '微软雅黑';
      position: relative;
    }

    #allmap {
      width: 100%;
      height: 100%;
    }

    #zoomBtn {
      position: absolute;
      right: 0px;
      bottom: 0px;
      z-index: 4;
      padding: 5px;
      width: 28px;
      background-color: #333740;
      color: #ccc;
      text-align: center;
      font-size: 14px;
      border-radius: 5px;
      padding-bottom: 5px;
    }

    #zoomBtn>div:nth-child(-n + 2) {
      border-bottom: 1px solid #ccc;
    }

    #zoomBtn>div:nth-child(odd) {
      cursor: pointer;
      user-select: none;
    }
  </style>
  <script type="text/javascript" src="http://api.map.baidu.com/api?v=3.0&ak=gHoGaCVBIxUMSMKvSYr0XfiZQO1wnPdi"></script>
</head>

<body>
  <div id="map">
    <p>
      鼠标滚动实现地图的缩放
      <br>
      当前地图级别为:<span class="show" style='color:red;font-size:20px;font-weight: 700'>11</span>
    </p>
    <div id="allmap"></div>
    <div id="zoomBtn">
      <div onclick="addZoom()">+</div>
      <div class="wrap_show">11</div>
      <div onclick="delZoom()">-</div>
    </div>

  </div>
</body>

<script type="text/javascript">

  let map = new BMap.Map('allmap') //创建map实例
  map.centerAndZoom(new BMap.Point(116.404, 39.915), 11) // 初始化地图,设置中心点坐标和地图级别

  map.enableScrollWheelZoom(true) //开启鼠标滚轮缩放
  mapWheel()

  let mapZoom = 11//地图的缩放级别

  //鼠标滚动致使地图上的放大缩小---缩放区间在4-19之间
  function mapWheel(params) {
    document.querySelector('#allmap').onmousewheel = e => {
      //放大 getZoom返回地图当前缩放级别
      if (e.wheelDelta > 0) {
        mapZoom = map.getZoom() + 1
       
        if (mapZoom > 19) {
          mapZoom = 19
          alert('地图级别在4-19之间')
        }
      }
      //缩小
      if (e.wheelDelta < 0) {
        mapZoom = map.getZoom() - 1
        
        if (mapZoom < 4) {
          mapZoom = 4
          alert('地图级别在4-19之间')
        }
      }

      document.querySelector('.wrap_show').innerHTML = mapZoom
      document.querySelector('.show').innerHTML = mapZoom
    }
  }

  //加大地图级别
  function addZoom(params) {
    map.zoomIn() //放大一级视图

    if (mapZoom < 19) {
      mapZoom++;

    } else {
      alert('地图级别在4-19之间')
    }

    document.querySelector('.wrap_show').innerHTML = mapZoom
    document.querySelector('.show').innerHTML = mapZoom
  }
  //缩小地图级别
  function delZoom(params) {
    map.zoomOut() //缩小一级视图
    if (mapZoom > 4) {
      mapZoom--;
    } else {
      alert('地图级别在4-19之间')
    }

    document.querySelector('.wrap_show').innerHTML = mapZoom
    document.querySelector('.show').innerHTML = mapZoom


  }
</script>

小五Ivy

关注

2
点赞
踩
13

收藏

觉得还不错? 一键收藏
4
评论
百度地图缩放功能

实现地图缩放功能：滚动鼠标的滚轮点击自定义缩放控件，点击 + 是放大地图，点击 - 是缩小地图<!DOCTYPE html><html lang="en"> <head> <meta charset="UTF-8" /> <meta name="viewport" content="width=device-wi...
复制链接

扫一扫

专栏目录