vue 定位所在地_Vue.js实现百度地图定位、搜索及获取经纬度

百度地图官方给出的SDK没有vue版本，我们可以引入百度地图的js，去实现百度地图定位，并实现搜索、以及获取经纬度，其实现方法和纯html+js是一样的，只不过是多了一层vue的方法(methods)。

当打开页面的时候，百度地图自动定位当前位置，给出一个搜索框，搜索我们所想要寻找的目标地址，百度地图会列出相关检索结果，点击检索结果，并在地图上定位，然后获取到经纬度。

1.在 public/index.html 中引入百度地图SDK的JS文件

2.vue 模板文件前端

地址： 经度： 纬度：

3.js 代码，vue methods 方法：

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;

});

}