vue 百度地图
在度娘中找了好多。都没有找到具体的操作方法,自己写一个。因为页面中要做商家入驻,所以需要一个详情的地图。找了好多。最后决定用百度(百度的api对开发这太友好啦),并且百度地图还为vue做了相应的操作。虽然不全。而且看着很蒙蔽。所以自己总结一下。
百度地图的npm库:https://dafrok.github.io/vue-baidu-map/#/zh/start/base
- 引入配置就不多说啦!(本人是全局引入)
- 创建一个demo。哪里想用哪里引入就好。
index.vue
//**vant的组件**
<van-row class="map_title">
<van-col span="20" class="map_title_span">
<p>经度:{
{locationdata.center ? locationdata.center.lng : center.lng}}</p>
<p>纬度:{
{locationdata.center ? locationdata.center.lat : center.lat}}</p>
</van-col>
<van-col span="4"><van-button type="info" size="small" @click="getmapdamodata()">提交</van-button></van-col>
</van-row>
<baidu-map class="map" :center="center" :zoom="zoom" @click="updatemap" @ready="handler" >
<bm-geolocation anchor="BMAP_ANCHOR_BOTTOM_RIGHT" :showAddressBar="true" :autoLocation="true"></bm-geolocation> //自动定位的控件
<bm-local-search :keyword="maptitle" :auto-viewport="true" :location="location" ></bm-local-search> //根绝传入的keyword数据查询附近相应的地点
<bm-panorama></bm-panorama> //是否可以切换全景
<bm-marker :position="center" :dragging="true"> //障碍物的设置。因为要跟随滑动,以及某个点的提醒
<bm-info-window :show="true">{
{maptitle}}</bm-info-window>
</bm-marker>
</baidu-map>
script.js 页面
export default {
data () {
return {
// 地图初始化的位置
center: {lng: 116.39852, lat:39.91405},
// 地图内的大小
zoom: 14,
// 这个是选择某个点的提醒以及搜索附近的东西的依据
maptitle: "",
// 这个是搜索下的东西
location: '',
// 这个是选择搜索列表中数据的title以及经纬度
locationdata: {
title: "",
center: ''
},
geolocation: "",
biaoji: false
}
},
mounted(){
},
methods: {
// 由于百度地图 JS API 只有 JSONP 一种加载方式,因此 BaiduMap 组件及其所有子组件的渲染只能是异步的。因此,请使用在组件的 ready 事件来执行地图 API 加载完毕后才能执行的代码,不要试图在 vue 自身的生命周期中调用 BMap 类,更不要在这些时机修改 model 层。
handler ({BMap, map}) {
window.map = map; //注册为全局
var that = this; // map方法中的this指向不对。所有申明一个。。小细节的东西
// 刚进入页面中的定位,需要向用户授权
var geolocation = new BMap.Geolocation();
console.log(geolocation)
this.geolocation = geolocation;
geolocation.getCurrentPosition(() =>{
// console.log('data')
// alert('nimamaipi')
})
geolocation.enableSDKLocation();
geolocation.getCurrentPosition(function(r){
if(this.getStatus() == BMAP_STATUS_SUCCESS){
// 把得到的经纬度传给map,就实现了第一步我们的定位
that.center = {
lng: r.point.lng ,
lat: r.point.lat
}
console.log("wang", r)
// 把获取到的位置传给所需要的搜索已经提示里面
that.maptitle =r.address.province + r.address.city + r.address.district + r.address.street;
// 当用户拒绝该授权的时候,依然执行
if(r.accuracy==null){
// alert('accuracy null:'+r.accuracy);
//用户决绝地理位置授权
return;
}
}else {
console.log('failed'+this.getStatus());
}
},{enableHighAccuracy: true})
},
// 移动开始
movemapstart(){
this.biaoji = false;
},
// 当用户移动选择某一个点
updatemap(e){
// 把localtion值清空
// this.location = {
// title: "",
// center: ""
// }
console.log('wang', this.locationdata)
var that = this;
// 先赋值经纬度
const { lng, lat } = e.target.getCenter();
that.center = {
lng ,
lat
}
// 然后根据经纬度查询地图的具体位置
var geoc = new BMap.Geocoder();
geoc.getLocation(e.target.getCenter(), function(rs){
// console.log(rs)
// 然后赋值给搜索的条件
that.locationdata.title = rs.address;
that.locationdata.center = e.target.getCenter();
that.maptitle = rs.address;
},{enableHighAccuracy: true});
},
// 选择localtion的值
getlocalsearch(e){
// console.log(e)
// this.maptitle = e.address
this.locationdata.title = e.address + e.title;
this.locationdata.center = e.point;
},
// 确定该信息然后存在session中
getmapdamodata(){
var that = this;
if(this.locationdata.title == '' && this.locationdata.center == ''){
var mapdata = {
title: that.maptitle,
center: this.center
}
sessionStorage.setItem('mapdata', JSON.stringify(mapdata))
}else{
sessionStorage.setItem('mapdata', JSON.stringify(this.locationdata))
}
this.$router.go(-1);
}
}
}
style.scss
//必须的给map设置高度
.map {
width: 100%;
height: 6.6667rem;
}
.anchorBL {
display:none
}
.map_title{
display: flex;
justify-content: center;
align-items: center;
padding: 0.1533rem;
.map_title_span{
font-size: 0.29rem;
}
}