百度地图BMap实现在行政区域内做标注
使用环境
- vue
- bmap.js
- element-ui
页面展示
前提步骤
- 在index中引入百度地图提供的js库
- 在使用的vue页面中实例化地图
<!-- 给id随便起给名字 -->
<div id="map"></div>
<el-button :loading="btnLoading" @click="save">保存</el-button>
代码实现
- 需要的基础数据和初次加载方法
data(){
return {
map: null,
point: null,
center: {
lng: '',
lat: '',
address: '',
},
btnLoading: false, // 按钮loading
polygonArr: [], // 行政区域显示的多边形数据,比对点在不在区域内使用
}
}
async mounted() {
await this.getCenterInfo(); // 发送请求获取保存的坐标信息,获取到数据给center赋值,自行实现。
this.initMap();
},
- 初始化地图代码
initMap() {
this.map = new BMap.Map("map", {
minZoom: 6,
enableMapClick: false
});
this.map.enableScrollWheelZoom(true);
// 初次渲染页面的获取之前保存的地址信息,如果有的话,就添加区域,打标记
if (this.center.address) {
this.addDistrict(this.center.address)
}
this.map.addEventListener("click", (e) => {
this.setMarker(e.point)
})
// 也可以放在addDistrict 函数中,但是这样每次都会调用
setTimeout(() => {
if (this.center.lat) {
this.setMarker(this.center)
}
}, 1000)
},
- 实现区域框选效果
/**
* 添加行政区域边界
* @param districtName 行政区域查询名称,类似:安徽省合肥市包河区
*/
addDistrict(districtName) {
let boundary = new BMap.Boundary();
boundary.get(districtName, (rs) => { //获取行政区域
this.polygonArr = []
let regionLevel = this.getRegionInfo('id').length
// 不是所有的行政区域都有返回值
if (regionLevel === 1 && rs.boundaries.length === 0) {
// 没有区域范围的,清空地图所有标记,且定位到所选位置
this.map.clearOverlays();
this.locateCenter()
} else if (regionLevel > 1 && rs.boundaries.length === 0) {
// 如果已经选到 第二级 地址,没有返回rs区域,直接定位到所选位置,不清空之前的图层
this.locateCenter()
} else if (rs) {
this.map.clearOverlays();
// 查找最大的区域范围,设置为中心展示区域
let idx = rs.boundaries.findIndex(item => item === this.findLargest(rs.boundaries))
for (let i = 0; i < rs.boundaries.length; i++) {
let ply = new BMap.Polygon(rs.boundaries[i], {
strokeStyle: 'dashed',
strokeWeight: 2, //边框宽度
strokeColor: "#CB7C93", //边框颜色
fillOpacity: 0.1,
fillColor: " #3A2B5D" //填充颜色
}); //建立多边形覆盖物
this.polygonArr.push(ply)
this.map.addOverlay(ply); //添加覆盖物
if (i === idx) {
this.map.setViewport(ply.getPath()); //调整视野
}
}
}
});
},
/**
* 当选中的省市区没有行政区域范围的时候,设置页面居中显示
*/
locateCenter() {
let searchRegion = new BMap.LocalSearch(this.map, {
onSearchComplete: (result) => {
this.map.centerAndZoom(result.getPoi(0).point, 12);
this.setMarker(result.getPoi(0).point)
}
})
searchRegion.search(this.getRegionInfo('name'))
},
注意事项:
- 一级区域可能没有行政区域边界,比如:澳门
- 一级、二级区域都有行政区域边界,但是三级区域可能没有行政区域边界返回值,比如:广东省东莞市常平镇
- 行政区域边界返回值不一定是一条,可能几十条或者几百条,比如安徽省只有5条数据,浙江省有800多条数据,沿海区域的省份数据很多。获取到数据,设置页面居中展示的时候,大部分情况下选择居中到单条数据最大的展示不会出错。
- 返回的行政区域边界不一定正确,比如:台湾省,百度地图上,搜索其他省份会给出行政区域,但是台湾不会
- 打标注方法
// 设置标注的方法
setMarker(position) {
this.removeMarker()
let pt = new BMap.Point(Number(position.lng), Number(position.lat));
let positionIcon = new BMap.Icon("./static/position.png", new BMap.Size(35, 35));
let marker = new BMap.Marker(position, {
icon: positionIcon,
offset: new BMap.Size(-2, -15),
});
// 判断标注点位在不在我们设置的区域范围内,如果没有行政区域则不判断
if (this.polygonArr.length > 0) {
let isPointInPolygonValid = this.polygonArr.some(item => BMapLib.GeoUtils.isPointInPolygon(pt, item))
if (isPointInPolygonValid) {
this.map.addOverlay(marker);
} else {
this.$message.error("请在区域范围内设置坐标点")
}
} else {
this.map.addOverlay(marker);
}
},
removeMarker() {
// 地图上所有的标注都会被获取
let markers = this.map.getOverlays()
// 保证最后一个是我们自己打的标注且只有一个标注点位
if (markers.length > 0 && markers[markers.length - 1].DQ === 'Marker') {
this.map.removeOverlay(markers[markers.length - 1])
}
},
- 保存方法部分代码
// 获取地图上打标注的经纬度
let gc = new BMap.Geocoder();
let point = new BMap.Point(markers[markers.length - 1].point.lng, markers[markers.length - 1].point.lat)
gc.getLocation(point, (res) => {
if (res) {
let params = {
longitude: point.lng.toString(),
latitude: point.lat.toString(),
address: this.center.address
}
});
需要自行实现的方法
findLargest
有的省市区域的行政范围比较复杂,返回的数据很多,设置居中显示最大的区域范围
getRegionInfo
自行封装的地址组件不一定通用
参考
https://lbsyun.baidu.com/index.php?title=jspopularGL
https://mapopen-pub-jsapi.bj.bcebos.com/jsapi/reference/jsapi_webgl_1_0.html
https://github.com/huiyan-fe/BMapGLLib
百度地图BMap实现在行政区域内做标注的更多相关文章
- vue项目 调用百度地图 BMap is not defined
这次老板新接了一个四点半官网页面,使用vue来写.emm……我感觉整个人都不好了,两天半解决了20个静态页面.还好vue写页面简直飞快,遇到一个vue的新坑,使用百度地图. 研究了好一会,总是报错BM ...
- echarts3.8.4实现城市空气质量(结合百度地图bmap.js,小航哥)
(小航哥自己实现的)为了事先地图效果,需要以下准备: 用百度地图作为地图,需要 1.bmap.min.js(下载地址https://github.com/ecomfe/echarts ,GitHub上 ...
- 【百度地图API】获取行政区域的边界
);map.addControl(new BMap.NavigationControl({type: BMAP_NAVIGATION_CONTROL_SMALL}));map.enableScroll ...
- vue引入百度地图 --BMap is not defined ,eslint BMap报错
在mounted初始化地图的时候,因为异步问题会导致BMap is not defined,也就是百度的api还没完全引入或者加载完成,就已经进行地图初始化了 解决方法: 1.创建一个map.js e ...
- 百度地图BMap API实例
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/stri ...
- echarts 与 百度地图bmap结合系列: 如何设置地图缩放级别和监听缩放事件
简单的demo: // ehcarts 的实例对象 this.myChart = echarts.init(el) // ehcarts加载完成事件 this.myChart.on('finished ...
- 百度地图 判断marker是否在多边形内
昨天画了圆形,判marker是否存在圆形内.今天来画多边形,判断marker在多边形内. 需要引入一个js <script type="text/javascript&quo ...
- 【百度地图API】如何获取行政区域的边界?
原文:[百度地图API]如何获取行政区域的边界? 摘要:以前教过大家如何自行获取行政区域,或者自定义获取一个区域的边界值.今天来教大家直接调用百度地图API1.3(目前最新版本)来获取行政区域的边界值 ...
- 【百度地图API】如何利用自己的数据制作社交地图?只显示可视区域内的标注
原文:[百度地图API]如何利用自己的数据制作社交地图?只显示可视区域内的标注 摘要:如果你自己的数据已经超过1万个,如何进行合理的显示?除了聚合marker外,还有一个办法.那就是,只显示可视区域内 ...
随机推荐
- 【划重点】Python xlwt简介和用法
一.导入xlwt包,并初始化创建一个工作簿 import xlwt workbook=xlwt.Workbook() # 初始化创建一个工作簿 二.创建表单 sheet1=workbook.add_s ...
- GIT最基本使用
带'*':必须操作 不带'*':可能需要而且经常用的 常见步骤为下: *1.克隆项目:有两种不同类型的网址(https/ssh) git clone [url] *2.初始化本地仓库 git init ...
- PDF.js Electron Viewer
PDF.js 是基于 HTML5 解析与渲染 PDF 的 JavaScript 库,由 Mozilla 主导开源. 本文旨在介绍 PDF.js 于 Electron 里如何开始使用,实际尝试了用其 A ...
- 2021 中国.NET开发者峰会 今日开幕
01 大会介绍 .NET Conf China 2021 是面向开发人员的社区峰会,基于 .NET Conf 2021的活动,庆祝 .NET 6 的发布和回顾过去一年来 .NET 在中国的发展成果展示 ...
- 动手做个 AI 机器人,帮我回消息!
大家好,我是鱼皮,自从做了知识分享,我的微信就没消停过,平均每天会收到几百个消息,大部分都是学编程的朋友向我咨询编程问题. 但毕竟我只有一个人,没法所有消息都一个个回复,所以也是很愧疚和无力吧:另外我 ...
- LuoguP7059 [NWRRC2015]Lucky Chances 题解
Content 有一个名叫 Lucky chances 的游戏,游戏一开始给出一个 \(r\times c\) 的矩阵,你可以选定矩阵中任意一个元素以及上.下.左.右四个方向中的任意一个方向进行游戏. ...
- java 编程基础:注解(Annotation Processing Tool)注解处理器 利用注解解读类属性生成XML文件
APT的介绍: APT(Annotation Processing Tool)是一种注解处理工具,它对源代码文件进行检测,并找出源文件所包含的注解信息,然后针对注解信息进行额外的处理. 使用APT工具 ...
- windows安装openoffice4
官网:https://www.openoffice.org/download/index.html 下载完成后 直接点击安装即可
- 【九度OJ】题目1171:C翻转 解题报告
[九度OJ]题目1171:C翻转 解题报告 标签(空格分隔): 九度OJ http://ac.jobdu.com/problem.php?pid=1171 题目描述: 首先输入一个5 * 5的数组,然 ...
- 【LeetCode】475. Heaters 解题报告(Python & C++)
作者: 负雪明烛 id: fuxuemingzhu 个人博客: http://fuxuemingzhu.cn/ 目录 题目描述 题目大意 解题方法 遍历 日期 题目地址:https://leetcod ...