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

最新推荐文章于 2023-04-22 15:19:51 发布
最新推荐文章于 2023-04-22 15:19:51 发布
阅读量1.8k 收藏 2
点赞数 1
分类专栏： 百度地图 文章标签： 前端 javascript
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/weixin_44471622/article/details/105554240
版权
实现的思路：
  • 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"
          ],
          
      }
  ]
小五Ivy
关注
专栏目录
百度地图JavascriptApi Marker平滑移动及车头指向行径方向
10-20
本文主要介绍了百度地图JavascriptApi Marker平滑移动及车头指向行径方向的相关知识。具有很好的参考价值。下面跟着小编一起来看下吧
百度地图自定义覆盖物，随地图缩放、拖曳偏移解决办法
weixin_44788637的博客
04-20 1291
如图所示，需要在定义的元素上添加position: absolute属性。
百度地图——覆盖物在多条轨迹上循环移动
dianhu5495的博客
04-29 720
1 需求：界面呈现多条路线（此处3条）。点击相应路线地图上出现相应路线。并有小车图标在轨迹上移动。小车图标能随轨迹旋转保证车头始终指向路线前进方向。不点击路线事件时。地图上多条轨迹自动循环播放。 2 js主要代码： var polylinex=null;var roadNum = 2; var timer =null; // 线路排行点击事件，3条线路。openLine(i...
百度地图 ( 二 ) 添加覆盖物
yuanchun的知识整理
12-12 3644
百度地图 ( 二 ) 添加覆盖物
百度地图自定义覆盖物拖拽功能的实现
weixin_43926793的博客
04-28 1532
借助百度地图标注的拖拽功能实现覆盖物的拖拽 <!DOCTYPE html> <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <meta name="viewport" content="initial-sca...
百度地图覆盖物
06-22
4. **添加覆盖物到地图**：创建覆盖物实例后，需要将其添加到`MapView`的`Overlays`集合中，通常通过`MapView.getOverlays().add(overlay)`完成。 5. **设置动画**：在覆盖物添加到地图后，启动相应的动画，这可能...
百度地图定位及覆盖物添加
09-07
在本教程中，我们将深入探讨如何使用百度地图API进行定位以及如何在地图上添加覆盖物。百度地图API是一个强大的工具，允许开发者集成地图功能到他们的应用程序中，为用户提供丰富的地理位置服务。 首先，让我们来...
百度地图类库 自定义覆盖物.zip
07-11
首先，"覆盖物"在地图API中是一个重要的概念，它指的是在地图上添加的个性化元素，如标记、文本、图片等，可以用来标注地点、显示信息或者进行交互操作。在百度地图API中，`TextIconOverlay`就是用于创建自定义覆盖...
百度地图4.1_1覆盖物线条
11-12
本篇文章将深入探讨“百度地图4.1_1覆盖物线条”的相关知识点，帮助你理解和掌握如何在应用中创建和使用覆盖物线条。 首先，我们要了解什么是覆盖物（Overlay）。在地图应用中，覆盖物通常是指在地图基础图层之上...
web端js百度地图自定义maker覆盖物_鼠标悬停展示行政区域高亮
12-20
4. **地图覆盖物**：覆盖物是百度地图API中的一个重要概念，它可以在地图上添加自定义的图形或图片，比如标记、信息窗口等。开发者可以自定义覆盖物的样式和行为，以满足各种需求。 5. **自定义覆盖物**：在本案例...
百度离线地图覆盖物动态增加（多边形、标记点）
Holly31的博客
04-22 904
ps:因为地图外层加了el-scrollbar，会干扰地图的缩放，所以自己写了个方法缩放。红色编辑点：点击地图新增出来或者根据数据赋值过来，可拖拽移动。
百度地图，开启marker点拖拽，并监听拖拽后的坐标位置
业余前端的职业经历
01-10 5086
有的网站可能让用户自己移动marker点选择位置 这个时候 需要就来了 开启marker点的拖拽还是很简单的哈 其实开启拖拽的也是 BMapGL 版本的地图 这点要记住哈 var marker = new BMapGL.Marker(point, { enableDragging: true }); map.addOverlay(marker); 然后就是监听 marker点拖拽的事件 有的小伙伴可能去找 百度看看有没有相关的api啥的 其...
在vue项目中使用百度地图，并添加覆盖物，多个点标注
sunweixin8的博客
07-05 2477
在vue项目中使用百度地图，并批量添加点标注以及覆盖物
百度地图API-覆盖物
cc蒲公英的博客
10-26 3821
百度地图API-覆盖物
百度地图复杂覆盖物的自定义、删除、移动、以及解决自定义覆盖物的点击事件冒泡到地图的问题
花铛
08-22 2166
自定义复杂覆盖物： //定义构造函数 function ComplexCustomOverlay(point, opt, html) { //参数分别为经纬度位置，偏移距离，html this._point = point; this._opt = opt || {}; this._html = html; } //继承Overlay ComplexCustomOver...
百度地图之添加覆盖物
weixin_30781631的博客
04-17 154
本文主要讲解如何实现在百度地图上添加覆盖物 1.承载数据的实体 我们从服务器返回的数据部分，最终可能是个Json数组，我们需要转换为实体集合，即下面的Info.java 我直接在实体类中声明了一个静态列表集合，模拟从服务器返回的数据Info.infos package com.zj.map2; import java.io.Serializable; impo...
百度地图拖拽覆盖物思路
BrocYu的博客
03-24 706
百度地图拖拽覆盖物思路 class DragMap{ //共用的地图实例 @observable map = null //实时更新的坐标点的数据的数组 @observable newPointData = [] //画圆覆盖物的数据 @observable circlePointData = [] //画多边形 @obs...
百度地图API之覆盖物和事件
热门推荐
u010989191的博客
05-05 2万+
前言之前已经介绍了如何添加地图上一些控件，添加一些控件后就会实现一些常用的功能。具体请参考http://blog.csdn.net/u010989191/article/details/51326397。下面主要介绍如何添加覆盖物及给地图、地标等添加响应事件。覆盖物相关API介绍地图覆盖物概述所有叠加或覆盖到地图的内容，我们统称为地图覆盖物。如标注、矢量图形元素(包括：折线和多边形和圆)、信息窗口等
百度地图自定义覆盖物移动
最新发布
05-12
要实现百度地图自定义覆盖物的移动，可以通过以下步骤： 1. 创建自定义覆盖物对象，并在地图上添加。 2. 通过定时器或其他方式，更新自定义覆盖物的位置坐标。 3. 调用自定义覆盖物对象的setPosition()方法，设置新的位置坐标。 4. 调用地图对象的panTo()方法，将地图中心点移动到新的位置坐标。 以下是示例代码： ``` // 自定义覆盖物类 function CustomOverlay(point){ this._point = point; } CustomOverlay.prototype = new BMap.Overlay(); CustomOverlay.prototype.initialize = function(map){ // 创建DOM元素，并添加到地图容器中 var div = document.createElement("div"); div.style.position = "absolute"; div.style.width = "20px"; div.style.height = "20px"; div.style.backgroundColor = "red"; map.getPanes().labelPane.appendChild(div); this._div = div; return div; } CustomOverlay.prototype.draw = function(){ // 根据坐标计算DOM元素的位置，并设置 var pixel = map.pointToOverlayPixel(this._point); this._div.style.left = pixel.x + "px"; this._div.style.top = pixel.y + "px"; } CustomOverlay.prototype.setPosition = function(point){ this._point = point; this.draw(); } // 创建自定义覆盖物对象，并添加到地图上 var customOverlay = new CustomOverlay(new BMap.Point(116.404, 39.915)); map.addOverlay(customOverlay); // 定时器更新自定义覆盖物位置，并移动地图中心点 setInterval(function(){ var point = customOverlay._point; point.lng += 0.001; customOverlay.setPosition(point); map.panTo(point); }, 1000); ``` 上述示例代码中，自定义覆盖物类CustomOverlay继承自BMap.Overlay，实现了initialize()和draw()方法用于创建和更新DOM元素的位置。setPosition()方法用于设置新的位置坐标。在定时器中，更新自定义覆盖物的位置坐标，并调用setPosition()方法和地图对象的panTo()方法移动地图中心点。
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值