1.全局安装与引用
(1)安装
npm install vue-baidu-map --save
(2)全局引用
import BaiduMap from 'vue-baidu-map'
Vue.use(BaiduMap, {
ak: '4258*******************97ddfd'
})
2.使用
(1)HTML
<div style="width: 50%">
<el-form-item label="详细地址" :required="true" prop="address">
<el-input
v-model="formName.address"
:readonly="readonly"
class="from_detailed"
placeholder="请输入详细地址"
/>
</el-form-item>
</div>
<div class="nwe_shop_store" style="width: 50%">
<div class="from_longitudes">
<el-form-item label="经度" :required="true" prop="longitude">
<el-input
v-model="formName.longitude"
placeholder="输入或选择商城或点击地图获取"
:readonly="readonly"
class="from_longitude"
@change="scanMap"
/>
</el-form-item>
<el-form-item label="纬度" :required="true" prop="longitude">
<el-input
v-model="formName.latitude"
placeholder="输入或选择商城或点击地图获取"
:readonly="readonly"
class="from_longitude"
@change="scanMap"
/>
</el-form-item>
</div>
</div>
<el-form-item label="定位" :required="true">
<!-- <el-input v-model="formName.location" class="from_location" /> -->
<div v-loading="loadingMap" class="dw">
<baidu-map
:center="center"
:zoom="zoom"
:scroll-wheel-zoom="true"
class="dw"
@click="getLocationPoint"
@ready="handler"
>
<bm-view style="width: 100%; height: 100%; flex: 1" />
<bm-local-search
:keyword="formName.address"
:auto-viewport="true"
style="display: none"
/>
</baidu-map>
</div>
</el-form-item>
(2)Script中DATA参数定义
center: {
lng: 113.027698,
lat: 28.144912,
}, // 定位信息
zoom: 13, // 定位信息
formName: {
location: '',
longitude: '',
latitude: '',
address: ''
}
(3)Script中的Methods方法
getLocationPoint(e) {
// 点击触发搜索
// eslint-disable-next-line no-undef
const geoCoder = new BMap.Geocoder();
// 获取位置对应的坐标
geoCoder.getPoint(this.addressKeyword, (point) => {
this.selectedLng = point.lng;
this.selectedLat = point.lat;
// console.log(point)
});
// 利用坐标获取地址的详细信息
geoCoder.getLocation(e.point, (res) => {
console.log(res);
// this.formName.address = res.address // 赋值地址
this.formName.longitude = res.point.lng; // 赋值经度
this.formName.latitude = res.point.lat; // 纬度
});
setTimeout(() => {
this.scanMap();
}, 500);
},
handler({ BMap, map }) {
console.log("map函数");
this.BMap = BMap;
this.map = map;
this.scanMap();
},
scanMap() {
this.map.clearOverlays();
if (this.formName.longitude === "" || this.formName.latitude === "") {
// 默认地址
this.center = {
lng: 113.027698,
lat: 28.144912,
};
var point = new this.BMap.Point(113.027698, 28.144912); // 根据经纬度创建点坐标
console.log("经纬度空的");
} else {
this.center = {
lng: this.formName.longitude,
lat: this.formName.latitude,
};
// eslint-disable-next-line no-redeclare
var point = new this.BMap.Point(
this.formName.longitude,
this.formName.latitude
); // 根据经纬度创建点坐标
}
this.map.centerAndZoom(point, 17);
var marker = new this.BMap.Marker(point); // 创建标注
this.map.addOverlay(marker); // 将标注添加到地图中
this.zoom = 17;
},
因项目需求,通过多方查找资料与交流所得。如有侵权,请联系删除!