vue-baidu-map官方访问站点:https://dafrok.github.io/vue-baidu-map/#/
1.实现效果
关键字搜索或点击地图标点 获取地址数据及经纬度
2.vue-baidu-map的安装和使用
2.1.vue-baidu-map安装
npm install vue-baidu-map --save
2.2.vue-baidu-map的全局注册
在main.js文件中引入以下代码:
import Vue from 'vue' import BaiduMap from 'vue-baidu-map' Vue.use(BaiduMap, { // ak 是在百度地图开发者平台申请的密钥 详见 http://lbsyun.baidu.com/apiconsole/key */ ak: 'YOUR_APP_KEY' })
2.3.vue-baidu-map的局部注册
需要把百度地图的秘钥写在<baidu-map>标签上
<template> <baidu-map class="bm-view" scroll-wheel-zoom :center="location" :zoom="zoom" ak="在百度地图开发者平台申请的秘钥" @ready="mapReady" > <bm-view class="map" style="width: 100%; height:100%; flex: 1"></bm-view> </baidu-map> </template>
2.4.局部注册vue-baidu-map的使用
2.4.1.引入需要使用的组件
import BaiduMap from 'vue-baidu-map/components/map/Map.vue'; //百度地图接入 import BmView from 'vue-baidu-map/components/map/MapView.vue' import BmLocalSearch from 'vue-baidu-map/components/search/LocalSearch.vue' import BmNavigation from "vue-baidu-map/components/controls/Navigation"; import BmMarkerClusterer from "vue-baidu-map/components/extra/MarkerClusterer"; import BmMarker from "vue-baidu-map/components/overlays/Marker"; import BmInfoWindow from "vue-baidu-map/components/overlays/InfoWindow"; //标注弹窗 import BmAutoComplete from "vue-baidu-map/components/others/AutoComplete"; import BmControl from "vue-baidu-map/components/controls/Control";
2.4.2.把引入的组件添加到组件components中
2.4.3.在页面中使用各组件
<bm-navigation anchor="BMAP_ANCHOR_BOTTOM_RIGHT" />
<bm-control :offset="{width: '50px', height: '10px'}"> <!-- 自动填充 --> <bm-auto-complete :sugStyle="{zIndex: 999999}"> <el-input v-model="inputValue" placeholder="输入关键字进行模糊查询" @change="confirmAddress"></el-input> </bm-auto-complete> </bm-control>
<bm-view class="map" style="width: 100%; height:100%; flex: 1"></bm-view>
3.代码展示
3.1.html代码
<template> <baidu-map class="bm-view" scroll-wheel-zoom :center="location" :zoom="zoom" ak="bnuIIYxx2iIfYSQtGh3jvA6W0viNQ3GG" @ready="mapReady" > <bm-view class="map" style="width: 100%; height:100%; flex: 1"></bm-view> <!-- 自定义控件 --> <bm-control :offset="{width: '50px', height: '10px'}"> <!-- 自动填充 --> <bm-auto-complete :sugStyle="{zIndex: 999999}"> <el-input v-model="inputValue" placeholder="输入关键字进行模糊查询" @change="confirmAddress"></el-input> </bm-auto-complete> </bm-control> <!-- 手动放大缩小到省市街道 位置:右下方--> <bm-navigation anchor="BMAP_ANCHOR_BOTTOM_RIGHT" /> </baidu-map> </template>
3.2.css代码
.address_wrap{ width: 100%; height: 100%; ::v-deep{ .bm-view { display: block; width: 100%; height: 100%; // border: 1px solid red; .BMap_noprint.anchorTL{ width: 22%; top: 10px !important; left: 10px !important; } } } }
3.3.js代码
let geocoder; 需要把这句放到引入包的下面
data() { return { // 百度地图参数 model: {}, BMap: {}, map: {}, location: { lng: 113.93588, lat: 22.74894 }, zoom: 14, inputValue: "", keyword: '' } },
// 搜索框的搜索事件 confirmAddress(e) { // console.log("this.model.address:",this.model.address) if (this.inputValue != ''){ // console.log("搜索字段为:" + this.inputValue) this.keyword = this.inputValue } //为啥使用延时?? //因为上面搜索框是change事件,变化的太快了看起来效果不好所以添加了延时 setTimeout(()=>{ //搜索时把需要标点的地址传入local.search中 var local = new BMap.LocalSearch(this.map, { renderOptions:{map: this.map} }); local.search(this.keyword); },600) }, // baidu-map组件的ready事件 mapReady ({BMap, map}) { this.BMap = BMap; this.map = map; geocoder = new BMap.Geocoder(); //创建地址解析器的实例 if(this.model.hasOwnProperty('address')){//如果当前model中包含address 则证明是修改弹框里面的地址数据(地址存在,打开弹框显示地址标点) this.keyword = this.model.address this.inputValue = this.model.address }else{//否则显示默认标点(这里的经纬度代表成都) //第二个参数 10 代表地图缩 放级别,最大为19,最小为0 setTimeout(() => { this.map.centerAndZoom(new BMap.Point(113.93588, 22.74894), 14); }, 1000); this.keyword = '' this.inputValue = '' } // 点击百度地图上的搜索出来的红色标记点 map.addEventListener("click", ({ point }) => { this.location.lng = point.lng; this.location.lat = point.lat; geocoder.getLocation(point, res => { this.inputValue = res.address; this.model.address = res.address; this.model.storeLongitude = point.lng this.model.storeLatitude = point.lat this.$forceUpdate(); }); }); }, // 地区组件的markersset事件 setAddressList(e){ console.log(e); },
4.效果展示
5.关于定位中心点centerAndZoom失效的解决方法
添加一个定时器,setTimeout 加个100毫秒延迟
setTimeout(() => { this.map.centerAndZoom(new BMap.Point(113.93588, 22.74894), 14); }, 1000);
参考链接---https://blog.csdn.net/qq_44162778/article/details/124499687
【推荐】编程新体验,更懂你的AI,立即体验豆包MarsCode编程助手
【推荐】凌霞软件回馈社区,博客园 & 1Panel & Halo 联合会员上线
【推荐】抖音旗下AI助手豆包,你的智能百科全书,全免费不限次数
【推荐】博客园社区专享云产品让利特惠,阿里云新客6.5折上折
【推荐】轻量又高性能的 SSH 工具 IShell:AI 加持,快人一步
· 【.NET】调用本地 Deepseek 模型
· CSnakes vs Python.NET:高效嵌入与灵活互通的跨语言方案对比
· DeepSeek “源神”启动!「GitHub 热点速览」
· 我与微信审核的“相爱相杀”看个人小程序副业
· Plotly.NET 一个为 .NET 打造的强大开源交互式图表库
2021-06-22 移动端meta标签配置
2021-06-22 单页应用&多页应用
2021-06-22 14款前端常用的富文本编辑器插件