百度地图官方给出的SDK没有vue版本，我们可以引入百度地图的js，去实现百度地图定位，并实现搜索、以及获取经纬度，其实现方法和纯html js是一样的，只不过是多了一层vue的方法（methods）。 当打开页面的时候，百度地图自动定位当前位置，给出一个搜索框，搜索我们所想要寻找的目标地址，百度地图会列出相关检索结果，点击检索结果，并在地图上定位，然后获取到经纬度。 1.在 public/index.html 中引入百度地图SDK的JS文件
代码语言：javascript复制<script type="text/javascript" src="http://api.map.baidu.com/api?v=2.0&ak=uvN6vatvU44OQ0a9yuXdQZxTXODHGuLI"></script>2.vue 模板文件前端
代码语言：javascript复制<template>
<div>
<FormItem label="活动地址：" prop="address">
<Row style="margin-bottom: 10px;">
<Col span="16"><div id="allmap"></div></Col>
<Col span="8">
<div class="mapsearch">
<!-- 搜索框 -->
<Input v-model="mapsearch" placeholder="搜索">
<Button type="primary" @click="map()" slot="append" icon="ios-search"></Button>
</Input>
<!-- 搜索结果展示列表 -->
<div id="r-result"></div>
</div>
</Col>
</Row>
<Row>
<!-- 地址、经纬度 -->
<Col span="16"><Input v-model="formData.address"><span slot="prepend">地址：</span></Input></Col>
<Col span="4"><Input v-model="formData.lng" disabled><span slot="prepend">经度：</span></Input></Col>
<Col span="4"><Input v-model="formData.lat" disabled><span slot="prepend">纬度：</span></Input></Col>
</Row>
</FormItem>
</div>
</template>data () {
return {
mapsearch: '',
formData: {
address: '',
lng: '112.541526',
lat: '37.934578'
}
}
}3.js 代码，vue methods 方法：
代码语言：javascript复制map() {
let t = this;
// 百度地图API功能
var map = new BMap.Map("allmap");
var point = new BMap.Point(t.formData.lng, t.formData.lat);
map.centerAndZoom(point, 18);
var marker = new BMap.Marker(point); // 创建标注
map.addOverlay(marker); // 将标注添加到地图中
marker.setAnimation(BMAP_ANIMATION_BOUNCE); //跳动的动画
// 添加带有定位的导航控件
var navigationControl = new BMap.NavigationControl({
// 靠左上角位置
anchor: BMAP_ANCHOR_TOP_LEFT,
// LARGE类型
type: BMAP_NAVIGATION_CONTROL_LARGE,
// 启用显示定位
enableGeolocation: true
});
map.addControl(navigationControl);
//获取定位
/*var geolocation = new BMap.Geolocation();
geolocation.getCurrentPosition(function(r){
if(this.getStatus() == BMAP_STATUS_SUCCESS){
var mk = new BMap.Marker(r.point);
map.addOverlay(mk);
map.panTo(r.point);
//alert('您的位置：' r.point.lng ',' r.point.lat);
t.$Notice.success({
title: "您的位置：" r.point.lng ',' r.point.lat
});
} else {
alert('failed' this.getStatus());
}
},{enableHighAccuracy: true})*/
//搜索
var local = new BMap.LocalSearch(map, {
renderOptions:{map: map, panel:"r-result"}
});
local.search(t.mapsearch);
// 添加定位控件
var geolocationControl = new BMap.GeolocationControl();
geolocationControl.addEventListener("locationSuccess", function(e){
// 定位成功事件
var address = '';
address = e.addressComponent.province;
address = e.addressComponent.city;
address = e.addressComponent.district;
address = e.addressComponent.street;
address = e.addressComponent.streetNumber;
t.formData.address = address
t.$Notice.success({
title: "当前定位地址为：" address
});
});
geolocationControl.addEventListener("locationError",function(e){
// 定位失败事件
alert(e.message);
});
map.addControl(geolocationControl);
//点击地图获取经纬度
map.addEventListener("click", function(e){
var myGeo = new BMap.Geocoder();
myGeo.getLocation(new BMap.Point(e.point.lng, e.point.lat), function(res){
let address = '';
/*console.log(res)
if(res.surroundingPois[0] != undefined){
var title = res.surroundingPois[0].title ? res.surroundingPois[0].title : ''
address = res.surroundingPois[0].address title;
} else{
var title = res.title ? res.title : ''
address = res.address title;
}*/
var title = res.title ? res.title : ''
t.formData.address = res.address title;
})
// 经纬度
t.formData.lng = e.point.lng;
t.formData.lat = e.point.lat;
});
}4.css样式
代码语言：javascript复制#allmap{height: 400px;width: 100%;}
.mapsearch{height:400px;margin-left: 10px;}
#r-result{overflow-y:auto; overflow-x:auto;height:368px;}
