vue整合百度地图（关键字检索）
2024-04-28 01:49:54
百度地图
文章目录
- 百度地图
- 一、申请百度地图的密钥
- 二、官方示例
- 三、使用vue整合百度地图步骤说明
- 3.1 效果图：
- 3.2 方式一 vue脚手架2.0版本引用（不推荐）：
- 3.3 方式二 封装成js引用（推荐做法）：
- 3.3.1 封装loadBMap.js
- 3.3.2 在组件中引入封装的loadBMap
- 3.3.3 在mounted中调用 loadBMap()
- 四、整合详解（单独地图页面）
- 4.1、直接上完整代码，代码注释详解
- 五、地图为子组件，点击触发按钮，展示地图（更常见，详解）
- 5.1效果图
- 5.2 在主页面引入js，点击按钮调用地图初始化方法
- 5.3完整的子组件地图代码(dialog包裹)
- 5.4 说明下组件通信
- 六、其他用法说明
一、申请百度地图的密钥
官网入口
白名单要为 *
创建成功
二、官方示例
示例入口
比较有意思的几个案例
三、使用vue整合百度地图步骤说明
3.1 效果图：
说明：
- 搜索检索位置，获取经纬度
- 地图标点反解析出经纬度
3.2 方式一 vue脚手架2.0版本引用（不推荐）：
- 在index.html引入
<script async type="text/javascript" src="https://api.map.baidu.com/api?v=3.0&ak=你的ak"></script>
- 在 webpack.base.conf.js 添加externals.BMap配置，与entry平级，内容如下
entry: {app: ['babel-polyfill', './src/main.js']
},
externals: {BMap: 'BMap'
}说明：vue-cli 3.0+ 的版本已经取消了webpack.conf这些文件了，所以上面的方法就不适用了,而且耗费性能
其实在config里面也可以使用，但是不推荐：
3. 在组件中引入BMap
3.3 方式二 封装成js引用（推荐做法）：
3.3.1 封装loadBMap.js
export default function loadBMap() {return new Promise(function(resolve, reject) {if (typeof window.BMap !== 'undefined') {resolve(window.BMap)return true}window.onBMapCallback = function() {resolve(window.BMap)}const script = document.createElement('script')script.type = 'text/javascript'script.src ='https://api.map.baidu.com/api?v=3.0&ak=' + '你的申请ak' + '&callback=onBMapCallback'script.onerror = rejectdocument.head.appendChild(script)})
}位置：
3.3.2 在组件中引入封装的loadBMap
import loadBMap from "@/utils/loadBMap.js";
3.3.3 在mounted中调用 loadBMap()
async mounted() {await loadBMap() // 加载引入BMap，封装的jsthis.initMap()//这个是初始化地图的方法，在method中定义},
这样组件基本准备完成，可以根据百度官方示例进行编写
四、整合详解（单独地图页面）
4.1、直接上完整代码，代码注释详解
<template><!-- 定义大个盒子 --><div class="app-container"><!--使用element ui --><el-form ref="form" :model="form" label-width="110px"><!-- 检索框部分 --><el-form-item label="详细地址：" prop="address"><el-autocompletev-model="form.address"style="width:100%;"popper-class="autoAddressClass":fetch-suggestions="querySearchAsync":trigger-on-focus="false"placeholder="详细地址"clearable@select="handleSelect"><!-- 双向数据绑定 --><template slot-scope="{ item }"><i class="el-icon-search fl mgr10" /><div style="overflow:hidden;"><div class="title">{{ item.title }}</div><span class="address ellipsis">{{ item.address }}</span></div></template></el-autocomplete></el-form-item><!-- 地图盒子 --><el-form-item label="地图定位："><div id="map-container" style="width:100%;height:500px;" /></el-form-item><el-form-item><el-button type="primary" @click="onSubmit">提交</el-button><el-button>取消</el-button></el-form-item></el-form></div>
</template><script>
// 引入封装的js
import loadBMap from '@/utils/loadBMap.js'
export default {data() {return {form: {address: '', // 详细地址addrPoint: { // 详细地址经纬度lng: 0,lat: 0}},map: '', // 地图实例mk: '', // Marker实例locationPoint: null}},async mounted() {await loadBMap() // 加载引入BMapthis.initMap()//初始化地图},methods: {// 初始化地图的方法initMap() {var that = this// 1、挂载地图this.map = new BMap.Map('map-container', { enableMapClick: false })var point = new BMap.Point(113.3324436, 23.1315381)//设置个默认标点this.map.centerAndZoom(point, 19)// 3、设置图像标注并绑定拖拽标注结束后事件this.mk = new BMap.Marker(point, { enableDragging: true })this.map.addOverlay(this.mk)this.mk.addEventListener('dragend', function(e) {that.getAddrByPoint(e.point)})// 4、添加（右上角）平移缩放控件this.map.addControl(new BMap.NavigationControl({ anchor: BMAP_ANCHOR_TOP_RIGHT, type: BMAP_NAVIGATION_CONTROL_SMALL }))// 5、添加（左下角）定位控件var geolocationControl = new BMap.GeolocationControl({ anchor: BMAP_ANCHOR_BOTTOM_LEFT })geolocationControl.addEventListener('locationSuccess', function(e) {that.getAddrByPoint(e.point)})geolocationControl.addEventListener('locationError', function(e) {alert(e.message)})this.map.addControl(geolocationControl)// 6、浏览器定位this.geolocation()// 7、绑定点击地图任意点事件this.map.addEventListener('click', function(e) {that.getAddrByPoint(e.point)})},// 获取两点间的距离getDistancs(pointA, pointB) {return this.map.getDistance(pointA, pointB).toFixed(2)},// 浏览器定位函数geolocation() {var that = thisvar geolocation = new BMap.Geolocation()geolocation.getCurrentPosition(function(res) {if (this.getStatus() == BMAP_STATUS_SUCCESS) {that.getAddrByPoint(res.point)that.locationPoint = res.point} else {alert('failed' + this.getStatus())console.log('failed' + this.getStatus())that.locationPoint = new BMap.Point(113.3324436, 23.1315381)}}, { enableHighAccuracy: true })},// 2、逆地址解析函数getAddrByPoint(point) {var that = thisvar geco = new BMap.Geocoder()geco.getLocation(point, function(res) {console.log(res)that.mk.setPosition(point)that.map.panTo(point)that.form.address = res.addressthat.form.addrPoint = point})},// 8-1、地址搜索querySearchAsync(str, cb) {var options = {onSearchComplete: function(res) {var s = []if (local.getStatus() == BMAP_STATUS_SUCCESS) {for (var i = 0; i < res.getCurrentNumPois(); i++) {s.push(res.getPoi(i))}cb(s)} else {cb(s)}}}var local = new BMap.LocalSearch(this.map, options)local.search(str)},// 8-2、选择地址handleSelect(item) {this.form.address = item.address + item.titlethis.form.addrPoint = item.pointthis.map.clearOverlays()this.mk = new BMap.Marker(item.point)this.map.addOverlay(this.mk)this.map.panTo(item.point)},//点击确定输出form表单的内容onSubmit() {console.log(this.form)}}
}
</script>
<!-- 样式 -->
<style lang="scss" scoped>.autoAddressClass{li {i.el-icon-search {margin-top:11px;}.mgr10 {margin-right: 10px;}.title {text-overflow: ellipsis;overflow: hidden;}.address {line-height: 1;font-size: 12px;color: #b4b4b4;margin-bottom: 5px;}}}
</style>
五、地图为子组件，点击触发按钮，展示地图（更常见，详解）
5.1效果图
1、 点击选择，打开地图的组件
2、检索功能，也能在地图自己标点
3、提示信息
3、回显数据，地图组件将数据传输给父组件，父组件取
第一步，一样先引入封装好的js文件
5.2 在主页面引入js，点击按钮调用地图初始化方法
引入js
import loadBMap from '@/utils/loadBMap.js'
钩子方法加载
created() {// 地图loadBMap()// 加载引入BMap}
引入地图组件
//说明@afterSelectPosition="afterSelectPosition"这个是绑定的方法
//用于子组件（地图）给父组件通信（传值）
<selectPosition ref="selectPositionWin" @afterSelectPosition="afterSelectPosition" />
在主页面点击选择，展开地图
点击触发地图的方法
selectPosition() {// 调用子组件（地图）的初始化方法this.$refs.selectPositionWin.myMehod()
},
5.3完整的子组件地图代码(dialog包裹)
要点说明
- 使用父组件触发子组件地图，子组件（地图）必须使用 $nextTick 方法，不会第一次会看不到地图，第二次才有
- 子组件向父组件通信是采用$emit方法
- 小编使用的是vue+element+百度地图
$nextTick说明:Vue.nectTick()介绍: 是在下次DOM更新循环结束之后执行延迟回调，在修改数据之后使用$nextTick，则可以在回调中获取更新后的DOM（dom的改变是发生在nextTick()之后），这个方法作用是当数据被修改后使用这个方法，会回调获取更新后的dom再render出来
Vue.nextTick()作用：在下次dom更新循环结束之后，执行延迟回调。在修改数据之后立即使用这个方法，获得更新后的dom
<template><!-- dialogShow绑定对话框是否展示，默认为false--><el-dialog :visible.sync="dialogShow" :title="dialogTitle" :close-on-click-modal="false" append-to-body top="5vh"width="900px" height="400px"><!-- 大盒子--><div class="app-container"><!-- element ui --><el-form ref="form" :model="form" label-width="110px"><!-- 检索框--><el-form-item label="详细地址：" prop="address"><el-autocompletev-model="form.address"style="width: 700px"popper-class="autoAddressClass":fetch-suggestions="querySearchAsync":trigger-on-focus="false"placeholder="详细地址"clearable@select="handleSelect"><template slot-scope="{ item }"><i class="el-icon-search fl mgr10"/><div style="overflow: hidden"><div class="title">{{ item.title }}</div><span class="address ellipsis">{{ item.address }}</span></div></template></el-autocomplete></el-form-item><!-- 地图的盒子--><el-form-item label="地图定位："><div id="map-container" style="width: 700px; height: 350px"/></el-form-item><!-- 按钮事件--><el-form-item><el-button type="primary" @click="onSubmit">确定</el-button><el-button @click="handleClose">取消</el-button></el-form-item></el-form></div></el-dialog>
</template><script>/* 无须在引入，因为在父组件已经引入了 *///import loadBMap from "@/utils/loadBMap.js";export default {data() {return {dialogShow: false,//对话框状态dialogTitle: '地图定位',form: {address: "", // 详细地址addrPoint: {// 详细地址经纬度lng: 0,lat: 0,},},map: "", // 地图实例mk: "", // Marker实例locationPoint: null,};},methods: {//必须使用$nextTick不然第一次地图会初始化失败，第二次才看得地图// 必须使用$nextTick不然地图的创建坐标会比地图挂载还快。第一次会初始化失败myMehod() {//将对话框状态改为true，也就是打开对话框this.dialogShow = truethis.$nextTick(() => {this.initMap()})},// 初始化地图initMap() {var that = this;// 1、挂载地图this.map = new BMap.Map("map-container", {enableMapClick: false});var point = new BMap.Point(119.30244559059787, 26.106339983665546);//默认点位this.map.centerAndZoom(point, 19);// 3、设置图像标注并绑定拖拽标注结束后事件this.mk = new BMap.Marker(point, {enableDragging: true});this.map.addOverlay(this.mk);this.mk.addEventListener("dragend", function (e) {that.getAddrByPoint(e.point);});// 4、添加（右上角）平移缩放控件this.map.addControl(new BMap.NavigationControl({anchor: BMAP_ANCHOR_TOP_RIGHT,type: BMAP_NAVIGATION_CONTROL_SMALL,}));// 5、添加（左下角）定位控件var geolocationControl = new BMap.GeolocationControl({anchor: BMAP_ANCHOR_BOTTOM_LEFT,});geolocationControl.addEventListener("locationSuccess", function (e) {that.getAddrByPoint(e.point);});geolocationControl.addEventListener("locationError", function (e) {//alert(e.message);console.log("locationError", e.message)});this.map.addControl(geolocationControl);// 6、浏览器定位this.geolocation();// 7、绑定点击地图任意点事件this.map.addEventListener("click", function (e) {that.getAddrByPoint(e.point);});},// 获取两点间的距离getDistancs(pointA, pointB) {return this.map.getDistance(pointA, pointB).toFixed(2);},// 浏览器定位函数geolocation() {var that = this;var geolocation = new BMap.Geolocation();geolocation.getCurrentPosition(function (res) {if (this.getStatus() == BMAP_STATUS_SUCCESS) {that.getAddrByPoint(res.point);that.locationPoint = res.point;} else {//alert("failed" + this.getStatus());console.log("failed", this.getStatus())that.locationPoint = new BMap.Point(119.30244559059787, 26.106339983665546);}},{enableHighAccuracy: true});},// 2、逆地址解析函数getAddrByPoint(point) {var that = this;var geco = new BMap.Geocoder();geco.getLocation(point, function (res) {//console.log(res);that.mk.setPosition(point);that.map.panTo(point);that.form.address = res.address;that.form.addrPoint = point;});},// 8-1、地址搜索querySearchAsync(str, cb) {var options = {onSearchComplete: function (res) {var s = [];if (local.getStatus() == BMAP_STATUS_SUCCESS) {for (var i = 0; i < res.getCurrentNumPois(); i++) {s.push(res.getPoi(i));}cb(s);} else {cb(s);}},};var local = new BMap.LocalSearch(this.map, options);local.search(str);},// 8-2、选择地址handleSelect(item) {this.form.address = item.address + item.title;this.form.addrPoint = item.point;this.map.clearOverlays();this.mk = new BMap.Marker(item.point);this.map.addOverlay(this.mk);this.map.panTo(item.point);},//提交数据onSubmit() {// console.log('纬度:',this.form.addrPoint.lat);// console.log('经度:',this.form.addrPoint.lng);//传输数据this.$emit('afterSelectPosition', this.form)//子组件向父组件通信//提示框this.$confirm('地址确定好了吗, 是否继续?', '提示', {confirmButtonText: '确定',cancelButtonText: '取消',type: 'warning'}).then(() => {//将对话框状态改为false，也就是关闭对话框this.dialogShow = false//将文本域数据清空，不然第二次进来会有数据this.form.address = ''})},handleClose() {//将对话框状态改为false，也就是关闭对话框this.dialogShow = false//提示this.$message({type: 'success',message: "关闭地图"})//将文本域数据清空，不然第二次进来会有数据this.form.address = ''}},};
</script><style lang="scss" scoped>.autoAddressClass {li {i.el-icon-search {margin-top: 11px;}.mgr10 {margin-right: 10px;}.title {text-overflow: ellipsis;overflow: hidden;}.address {line-height: 1;font-size: 12px;color: #b4b4b4;margin-bottom: 5px;}}}
</style>5.4 说明下组件通信
// 子组件
this.$emit('afterSelectPosition', this.form)//父组件
<selectPosition ref="selectPositionWin" @afterSelectPosition="afterSelectPosition" />
重点在 @afterSelectPosition="afterSelectPosition"//说明
afterSelectPosition这个必须一样，名字随便取，
@afterSelectPosition这个是父组件取值的方法//父组件取值的方法
afterSelectPosition(data) {this.dataForm.mapLng = data.addrPoint.lngthis.dataForm.mapLat = data.addrPoint.lat }
六、其他用法说明
- 比如在一个范围内的打卡
- 硬件定位超出地图规定范围预警等一系列操作
- 获取多个经纬度的地点，在地图上使用标点显示
- 路线导航功能
- …
还有不少用处，示例可以借鉴于百度地图api的示例demo ==> 入口
完结
vue整合百度地图（关键字检索）相关推荐
- vue 整合百度地图
1.首先在index.html 引入 <script src="http://api.map.baidu.com/api?v=2.0&ak=你的AK">< ...
- VUE使用百度地图插件
VUE使用百度地图插件 实现功能 百度地图的使用 相关代码片段 实现功能 需求: 使用百度地图插件, 实现手动定位, 获取经纬度地址; 设置经纬度定位; 地址搜索 百度地图的使用 参考 Vue Bai ...
- html引入百度地图报错,vue引入百度地图BMapGL，或者其他个性化地图
3.jpg vue的百度地图早就有vue-baidu-map这里就不赘述了, 自己去直接对着API写就好了,基本上已经满足绝大多数需求了还简单方便. vue-baidu-map 传送门 https:/ ...
- Vue引用百度地图API
Vue引用百度地图API 一. 通过官网申请ak 1. 打开百度地图官网,在开发文档中找到JavaScript API 2.点击账号和获取密钥 3.按照页面步骤操作即可 二. 通过模块化引入 1. 安 ...
- vue使用百度地图获取位置信息
vue使用百度地图获取位置信息 最近再做H5页面,就一个单页面,进来的时候,要获取地理位置,上代码 1.使用srcipt不受同源策略的影响,来获取百度api 写在了一个bmap.js里面,onBMap ...
- Vue+Echarts+百度地图 小例子
刚学完Echarts后,看到一些官方例子,粘贴代码下来却实现不了相应的效果,经过一番了解,发现还要引入百度地图,记录详细过程如下. 1.安装echarts(使用3.x,4.x) npm install ...
- vue自定义百度地图弹窗
vue自定义百度地图弹窗 1.全局注册方式 1.1 引入百度地图和百度地图自定义弹窗js(自己去百度api里面下载就可以了) <!DOCTYPE html> <html lang=& ...
- Vue+Echarts+百度地图API
Vue+Echarts+百度地图API 不容易啊,又注册了一个地图账户 使用npm安装方式 去百度地图官网申请key,也就是地图API密钥AK 在vue项目的public文件夹中的index.html ...
- vue引入百度地图BMapGL，获取天地图根据名称显示坐标定位信息
1. 解决提示:解决调用百度地图API弹出提示 "百度未授权使用地图API,可能是因为您提供的密钥不是有效的百度LBS开放平台密钥"的方法 百度官网生成ak: https://lb ...
最新文章
- curl: (3) [globbing] error: bad range specification after pos 150的解决方法
- .NET技术学习目录整理
- struts2,jsp,freemarker编程小技巧
- mybatis学习笔记-01什么是mybatis
- Android Studio无线连接设备调试，比数据线更方便
- FATE框架安装后测试报错：ModuleNotFoundError: No module named ‘arch‘
- 2.linux系统基础笔记（延时操作、实时系统中的定时器、事件）
- rac节点频繁重启的问题分析
- CXF处理Date类型的俩种方式
- insert into 语句 mysql_sql insert into 语句
- 单片机程序编写常使用的程序架构
- Windows提权基本原理
- 运维日志审计是什么意思？用什么工具好？
- 计算View中的子View在View的superview中的坐标
- 大数据破危险品物流难题 危化品污染有望“圈治”
- 9 Greenplum高级使用
- 网络流量分析与Android逆向小结
- 如何应对面试官问你职业规划问题
- linux ftok()
- oracle 安装之后