欢迎您访问程序员文章站本站旨在为大家提供分享程序员计算机编程知识!
您现在的位置是: 首页

在百度地图上添加覆盖物,并且可以移动覆盖物

程序员文章站 2022-07-03 18:06:17
...

实现的思路:

  • 1. 引入覆盖物的坐标点数据,对于本地mock的数据,可以写在js文件中,用变量接收一下,然后在当前文件中引入,直接使用对于的变量即可拿到mock的数据。试过使用json数据,但总会出现跨域问题,果断放弃了。
  • 2. 地图展示
  • 3. 在地图上添加覆盖物
    • 循环给覆盖物添加需要的属性,如ply.name=xx
    • 如果百度地图和外部列表联合使用,外部列表需要使用到覆盖物中的某个属性,需要将地图的所有覆盖物暴露出去,因为外界的列表是拿不到地图中的覆盖物的,如定义一个变量let outPly; outPly.push(ply)
    • 点击某个覆盖物设置样式的时候,可以使用外部的覆盖物来进行设置,也可以使用所有的覆盖物map.getOverlays(),只是有的时候可能需要筛选一下。
  • 4. 给覆盖物添加marker
    • 在百度地图里如果需要拖动某一项,需要给改项加上marker
    • 如果不想显示marker图标,可以通过改变样式来实现,然后扩大marker的范围
  • 5. 移动marker
    • 覆盖物随着marker移动,原理是清除原来的覆盖物,在移动的过程中实时重画覆盖物,所以看起来像是覆盖物与marker一快移动
  • 6. 第二次点击覆盖物的时候弹出弹框或给出其他提示
    • 需求:第一次点击覆盖物,给覆盖物设置样式,让操作者知道点击的哪一块,再次点击覆盖物,进入覆盖物的详情页。
    • 解决思路:定义一个变量,用于判断之前是否选择过该覆盖物,如果选择过的话进行第二次点击后的操作,如弹出显示框,或进入另一个页面,如果没有选择,则将该变量存起来,便于下一次点击判断。
    • 容易出现的bug:先点击一次1号覆盖物,然后点击一下2号覆盖物,再返回点击1号覆盖物,这个时候可能会进入1号覆盖物的详情页,因为记录到了第一次点击的状态。
      在百度地图上添加覆盖物,并且可以移动覆盖物

Map.clearOverlays() 一次性移除全部覆盖物时会触发此事件

  • 应用:如当前城市是南京市,地图上展示的是南京市下对应的覆盖物,当切换到北京的时候,可能会把南京市下的覆盖物展示在北京的地图上,所以,在切换完城市,给当前城市添加覆盖物之前,需要清除地图之前的覆盖物。

Map.removeOverlay(item) 移除单个覆盖物item时会触发此事件

  • 应用:移动地图上的覆盖物的时候,需要不断的清除覆盖物和重绘覆盖物
<!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%;
    }

    #allmap {
      width: 100%;
      height: 50%;
      overflow: hidden;
      margin: 0;
      font-family: '微软雅黑';
    }
  </style>
  <script type="text/javascript" src="http://api.map.baidu.com/api?v=3.0&ak=gHoGaCVBIxUMSMKvSYr0XfiZQO1wnPdi"></script>
</head>

<body>
  <div id="allmap"></div>
  <p class='clickTwo'></p>
</body>
<script src="./circle-data.js"></script>
<script type="text/javascript">
  let map = new BMap.Map('allmap') //创建map实例
  map.centerAndZoom(new BMap.Point(116.404, 39.915), 11) //初始化地图,设置中心点坐标和地图缩放级别
  map.enableScrollWheelZoom(true) //开启鼠标滚轮缩放

  let clickPolygonKey = null //用于判断之前是否选择过覆盖物

  //坐标点的格式转换 [161,31]=>[{lng:161,lat:31}]
  let pointList = [] //所有的坐标点
  mapDevelopData.forEach((item, index) => {
    let arr1 = [] //存储转变后的每一小项的所有坐标点
    item.points.forEach((item1, index1) => {
      let obj = {}
      obj.lng = item1.split(',')[0]
      obj.lat = item1.split(',')[1]
      arr1.push(obj)
    })

    pointList.push(arr1)
  })
  addOverlays()

  //添加覆盖物
  function addOverlays(params) {
    let outPly = [] //存储暴露出去的覆盖物
    pointList.forEach((item, index) => {
      let pointArr = []
      item.forEach((item1, index1) => {
        pointArr.push(new BMap.Point(item1.lng, item1.lat))
      })
 		/**
         * 创建多边形覆盖物
         * 参数1:points: Array<Point>
         * 参数2:opts: PolygonOptions
         *  */
      //设置覆盖物的样式
      let ply = new BMap.Polygon(pointArr, {
        strokeColor: 'blue',// 边线颜色
        strokeWeight: 2,// 边线的宽度,以像素为单位
        strokeOpacity: 0.5,
        fillColor: '#ccc',// 填充颜色。当参数为空时,折线覆盖物将没有填充效果
        fillOpacity: 0.8,// 填充的透明度,取值范围0 - 1
        enableMassClear: false //是否允许覆盖物在map.clearOverlays方法中被清除,默认为true
      })

      map.addOverlay(ply) // 将覆盖物添加到地图中,一个覆盖物实例只能向地图中添加一次
      outPly.push(ply)//将当前创建的覆盖物实例 ply 保存起来,ply 是一个对象

      ply.key = index


      //点击覆盖物设置样式
      ply.addEventListener('click', e => {
        outPly.forEach((item, index) => {
          if (item.key == e.target.key) {
            item.setStrokeColor('red')
            item.setStrokeWeight(4)
          } else {
            item.setStrokeColor('blue')
            item.setStrokeWeight(2)
          }
        })

        // 如果之前选中的覆盖物与当前点击的覆盖物相匹配,则出来弹框。
        console.log(e.target.key, clickPolygonKey);

        if (clickPolygonKey == e.target.key) {
          clickPolygonKey = null
          // alert('第二次点击了!')
          document.querySelector('.clickTwo').innerHTML = `第二次点击了第${e.target.key + 1}个覆盖物`

        } else {
          clickPolygonKey = e.target.key
          document.querySelector('.clickTwo').innerHTML = ''
        }
      })
    })
    getCenterPoint()
  }

  //获取覆盖物的坐标点--marker的坐标点
  function getCenterPoint() {
    let allOverlays = map.getOverlays()
    allOverlays.forEach((item, index) => {
      let lngArr = []
      let latArr = []
      let centerPoint = {}
      item.getPath().forEach((item, index) => {
        lngArr.push(item.lng)
        latArr.push(item.lat)
      })

      let maxLng = Math.max(...lngArr)
      let minLng = Math.min(...lngArr)
      let maxLat = Math.max(...latArr)
      let minLat = Math.min(...latArr)
      let centerLng = (parseFloat(maxLng) + parseFloat(minLng)) / 2
      let centerLat = (parseFloat(maxLat) + parseFloat(minLat)) / 2
      centerPoint.lng = centerLng
      centerPoint.lat = centerLat
      centerPoint.key = index
      addMarker(centerPoint)
    })
  }

  //添加marker
  function addMarker(point) {
    let markerPoint = new BMap.Point(point.lng, point.lat)

    let marker = new BMap.Marker(markerPoint)

    marker.enableDragging()
    let icon = marker.getIcon() //返回标注所用的图标对象
    marker.beforeLng = point.lng
    marker.beforeLat = point.lat
    marker.markerKey = point.key
    console.log(marker)
    marker.addEventListener('dragging', e => {
      let allOverlays = map.getOverlays()//获取地图上所有的覆盖物
      console.log(allOverlays)

      let newLng = e.target.point.lng - e.target.beforeLng//移动的lng距离
      let newLat = e.target.point.lat - e.target.beforeLat//移动的lat距离
      e.target.beforeLng = e.target.point.lng//当前lng坐标点
      e.target.beforeLat = e.target.point.lat//当前lat坐标点

      //存储圆圈覆盖物的所有坐标--移动后的坐标
      let newCircleData = []
      allOverlays.forEach((item, index) => {
        if (item.key == e.target.markerKey) {
          item.getPath().forEach((item1, index1) => {
            //  console.log(item1);

            let obj = {}
            obj.lng = item1.lng + newLng
            obj.lat = item1.lat + newLat
            newCircleData.push(obj)
          })

          map.removeOverlay(item) //从地图中移除当前覆盖物
        }
      })
      console.log(newCircleData)
      //重新添加覆盖物
      let pointArr = []
      newCircleData.forEach((item, index) => {
        pointArr.push(new BMap.Point(item.lng, item.lat))
      })

      let ply = new BMap.Polygon(pointArr, {
        strokeColor: 'blue',
        strokeWeight: 2,
        strokeOpacity: 0.5,
        fillColor: '#ccc',
        fillOpacity: 0.8,
        enableMassClear: false //是否允许覆盖物在map.clearOverlays方法中被清除,默认为true
      })
      map.addOverlay(ply)
      let outPly = []
      outPly.push(ply)

      ply.key = e.target.markerKey
    })

    map.addOverlay(marker)
  }

</script>
</html>

circle-data.js------mock的数据


  var mapDevelopData= [
      {
          points: [
              "116.34712827592914,39.933737134081255",
              "116.34425790399939,39.9335638785732",
              "116.34145825285074,39.9330483807684",
              "116.33879829770075,39.93220334146073",
              "116.33634356603147,39.93104958004528",
              "116.33415452109284,39.92961552072721",
              "116.33228507117765,39.92793649117641",
              "116.33078124156226,39.92605385103969",
              "116.3296800418793,39.9240139719262",
              "116.32900855674403,39.921867094139586",
              "116.32878328183779,39.91966608844915",
              "116.32900972150192,39.917465153501524",
              "116.32968225738051,39.91531848101855",
              "116.3307842909381,39.913278921673005",
              "116.33228865593401,39.911396684467384",
              "116.33415829032886,39.90971810156917",
              "116.33634715078799,39.9082844889037",
              "116.33880134707684,39.9071311304194",
              "116.34146046835227,39.90628641087971",
              "116.34425906875745,39.90577111837859",
              "116.34712827592914,39.90559793361336",
              "116.34999748310076,39.90577111837859",
              "116.352796083506,39.90628641087971",
              "116.35545520478136,39.9071311304194",
              "116.35790940107023,39.9082844889037",
              "116.36009826152934,39.90971810156917",
              "116.3619678959242,39.911396684467384",
              "116.36347226092006,39.913278921673005",
              "116.36457429447775,39.91531848101855",
              "116.36524683035634,39.917465153501524",
              "116.36547327002042,39.91966608844915",
              "116.36524799511423,39.921867094139586",
              "116.3645765099789,39.9240139719262",
              "116.36347531029595,39.92605385103969",
              "116.36197148068055,39.92793649117641",
              "116.36010203076532,39.92961552072721",
              "116.35791298582674,39.93104958004528",
              "116.35545825415745,39.93220334146073",
              "116.35279829900742,39.9330483807684",
              "116.34999864785881,39.9335638785732",
              "116.34712827592914,39.933737134081255"
          ]
      },
      {
          points: [
              "116.43192831607104,39.92600703368981",
              "116.42896437852474,39.925828109162126",
              "116.42607346847734,39.9252957440603",
              "116.42332681078828,39.924423055005455",
              "116.42079206986327,39.92323154299745",
              "116.41853168034075,39.921750562764245",
              "116.41660130769883,39.9200165984082",
              "116.41504847688438,39.918072363336805",
              "116.41391140280352,39.91596574680795",
              "116.41321805139724,39.913748633196846",
              "116.41298545422245,39.911475623208915",
              "116.41321929309953,39.909202688646126",
              "116.41391376466164,39.9069857939273",
              "116.41505172770331,39.90487951833114",
              "116.41660512926575,39.90293571286003",
              "116.4185356985741,39.90120222471958",
              "116.42079589143029,39.899721720702",
              "116.42333006160752,39.89853063829431",
              "116.42607583033576,39.89765829017222",
              "116.42896562022723,39.8971261439627",
              "116.43192831607104,39.89694729486018",
              "116.43489101191477,39.8971261439627",
              "116.43778080180624,39.89765829017222",
              "116.44052657053449,39.89853063829431",
              "116.44306074071167,39.899721720702",
              "116.44532093356791,39.90120222471958",
              "116.44725150287631,39.90293571286003",
              "116.4488049044387,39.90487951833114",
              "116.44994286748037,39.9069857939273",
              "116.45063733904243,39.909202688646126",
              "116.45087117791955,39.911475623208915",
              "116.45063858074477,39.913748633196846",
              "116.44994522933855,39.91596574680795",
              "116.44880815525758,39.918072363336805",
              "116.44725532444319,39.9200165984082",
              "116.44532495180125,39.921750562764245",
              "116.44306456227879,39.92323154299745",
              "116.44052982135368,39.924423055005455",
              "116.43778316366472,39.9252957440603",
              "116.43489225361726,39.925828109162126",
              "116.43192831607104,39.92600703368981"
          ]
      },
      {
          points: [
              "116.49488156621025,39.926486027322795",
              "116.49231663001652,39.92633119491026",
              "116.48981488515366,39.92587051223148",
              "116.4874379636327,39.92511532883278",
              "116.48524441754826,39.924084249195765",
              "116.48328827494201,39.9228026737162",
              "116.48161770792098,39.92130217210664",
              "116.48027384597454,39.919619704765296",
              "116.47928976376231,39.9177967114085",
              "116.47868966824397,39.91587808953365",
              "116.47848830501566,39.913911087978775",
              "116.47869059823572,39.9119441429127",
              "116.47929153271171,39.9100256849747",
              "116.48027628072457,39.90820294695554",
              "116.48162057014132,39.90652080135838",
              "116.48329128445863,39.90502065640504",
              "116.4852472797687,39.90373943758167",
              "116.48744039838293,39.90270867968887",
              "116.48981665410322,39.90195375162784",
              "116.49231756000836,39.901493232885926",
              "116.49488156621025,39.901338456962186",
              "116.49744557241219,39.901493232885926",
              "116.49994647831728,39.90195375162784",
              "116.50232273403768,39.90270867968887",
              "116.50451585265189,39.90373943758167",
              "116.50647184796193,39.90502065640504",
              "116.50814256227923,39.90652080135838",
              "116.50948685169598,39.90820294695554",
              "116.51047159970884,39.9100256849747",
              "116.51107253418479,39.9119441429127",
              "116.51127482740489,39.913911087978775",
              "116.51107346417653,39.91587808953365",
              "116.51047336865824,39.9177967114085",
              "116.50948928644601,39.919619704765296",
              "116.50814542449957,39.92130217210664",
              "116.50647485747854,39.9228026737162",
              "116.50451871487235,39.924084249195765",
              "116.5023251687878,39.92511532883278",
              "116.49994824726689,39.92587051223148",
              "116.49744650240399,39.92633119491026",
              "116.49488156621025,39.926486027322795"
          ],
          
      }
  ]

相关标签: 百度地图