博客

vue 百度地图

在度娘中找了好多。都没有找到具体的操作方法，自己写一个。因为页面中要做商家入驻，所以需要一个详情的地图。找了好多。最后决定用百度（百度的api对开发这太友好啦），并且百度地图还为vue做了相应的操作。虽然不全。而且看着很蒙蔽。所以自己总结一下。

百度地图的npm库：

https://dafrok.github.io/vue-baidu-map/#/zh/start/base

1. 引入配置就不多说啦！(本人是全局引入)
2. 创建一个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;
  }
}