在百度地图上添加覆盖物，并且可以移动覆盖物
程序员文章站
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"
],
}
]
上一篇： 百度地图详细地址定位