如何使用vueBaidu API 在项目中进行地理位置搜索和红点定位/经纬度定位
首先在项目中安装依赖
npm install --save vue-baidu-map
在main.js 引入依赖
import BaiduMap from 'vue-baidu-map'
Vue.use(BaiduMap, {
ak: '秘钥XX' //去官网申请ak密钥
})
vue中
<el-form-item label="详细地址" prop="areaDetail">
<div class="mapStyle">
<el-input placeholder="请输入详细地址" style="margin-left: 0" class="inputWidth" v-model="insertStoreFrom.areaDetail"></el-input>
<baidu-map class="map" :center="center" :zoom="zoom" @ready="handler" :scroll-wheel-zoom="true" @moving="syncCenterAndZoom"
@moveend="syncCenterAndZoom"
>
<bm-geolocation anchor="BMAP_ANCHOR_BOTTOM_RIGHT" :showAddressBar="true" :autoLocation="true"></bm-geolocation>
<bm-marker :position="position" :dragging="true" @dragging="draggingMarker"></bm-marker>
<bm-view class="map"></bm-view>
<bm-local-search :keyword="insertStoreFrom.areaDetail" :auto-viewport="true" :panel="false" :selectFirstResult="true" @searchcomplete="backSearch"></bm-local-search>
</baidu-map>
<div class="mapInputStyle">
<div class="mapInputStyle_one">
<div>经度</div>
<input v-model.number="center.lng" class="mapInputStyle_input">
</div>
<div class="mapInputStyle_one">
<div>维度</div>
<input v-model.number="center.lat" class="mapInputStyle_input">
</div>
</div>
</div>
</el-form-item>
模块js中
data 数据
// 百度地图
center: {lng: 0, lat: 0},
zoom: 3,
position:{lng: 0, lat: 0},
location:'北京',
keyword:'北京',
methods
handler ({BMap, map}) {
console.log(BMap, map)
this.center.lng = 116.404;
this.center.lat = 39.915;
this.position.lng = 116.404;
this.position.lat = 39.915;
this.zoom = 15
},
syncCenterAndZoom (e) {
const {lng, lat} = e.target.getCenter()
this.center.lng = lng;
this.center.lat = lat;
this.position.lng = lng;
this.position.lat = lat;
this.zoom = e.target.getZoom()
},
//拖拽红色标点的事情,反填输入框(此拖拽效果不佳)
draggingMarker(e){
// console.log(e);
this.center.lng = e.target.point.lng;
this.center.lat = e.target.point.lat;
},
//检索后返回的数据信息
backSearch(e){
// console.log(e)
},
页面中 baidu-map 为地图元素,样式 width为100%,height为定值
center 为定位数据,文档说可以为对象(经纬度)/字符串(详细地址),测试-只有对象有效,文字地址再测试
zoom 为缩放
moving/moveend 当改变输入框的经纬度的时候,进行定位
bm-geolocation 定位
bm-marker 红色标记点 ,如果拖动红色标点,draggingMarker 函数将返回拖拽位置,这里需要复填经纬度的输入框
bm-view and bm-local-search 中文搜索匹配位置进行定位
这里使用的是keyword来进行定位
:panel="false",禁止打开搜索的结果框,第一真的很丑,第二没地方放
:selectFirstResult="true" , 直接选取返回的第一个结果,进行定位
@searchcomplete="backSearch" 当筛选结果定位结束后,会返回信息,本来打算再把定位的信息复填到经纬度输入框里的,发现自动填了