vue 百度地图定位

2022-08-25 18:31:10 阅读：216 来源： 互联网

标签：定位 vue mapData map businessDetail BMap new lng 百度

具体引入上篇文章有提到

div：

  <div class="BaiDuMap">
        <baidu-map class="map-wrap" :center="mapData.center" :zoom="mapData.zoom" @ready="mapHandler" @click="getLocation">
                <bm-navigation anchor="BMAP_ANCHOR_TOP_LEFT"></bm-navigation>
                <bm-city-list anchor="BMAP_ANCHOR_TOP_RIGHT"></bm-city-list>
                <bm-geolocation anchor="BMAP_ANCHOR_BOTTOM_RIGHT" :showAddressBar="true" :autoLocation="true"></bm-geolocation>
        </baidu-map>

   </div>

data：

    address: null, // 地址信息
    businessDetail: {},  //商家信息(包含坐标信息)
            //地图数据
    mapData: {
           center: { lng: 0, lat: 0 },//中心坐标
           zoom: 18,    //缩放级别
         },
    BMap: null, //BMap类
    map: null,  //地图对象

methods：

       async mapHandler({ BMap, map }) {
            if (this.businessId) {
                //可以在此处请求接口获取坐标数据
                await this.getMallBusinessDetail()
            }

            this.BMap = BMap //保存百度地图类
            this.map = map //保存地图对象
            //如果一开始坐标存在(编辑的时候)
            if (this.businessDetail.longitude && this.businessDetail.latitude) {
                //设置坐标
                this.mapData.center.lng = this.businessDetail.longitude
                this.mapData.center.lat = this.businessDetail.latitude
            } else {
                //如果坐标不存在则动态获取当前浏览器坐标（创建的时候）
                let geolocation = new BMap.Geolocation()
                //获取当前的坐标（使用promise 将异步转换为同步）
                await new Promise((resolve) => {
                    geolocation.getCurrentPosition(() => {
                        // this.mapData.center.lng = this.businessDetail.longitude = r.point.lng
                        // this.mapData.center.lat = this.businessDetail.latitude = r.point.lat
                        this.mapData.center.lng = this.businessDetail.longitude = 103.1747
                        this.mapData.center.lat = this.businessDetail.latitude = 33.889 //这里的经纬度是固定的，没有动态获取，上面注释的两行是动态获取的
                        resolve()
                    })
                })
            }
            //创建定位标记
            let marker = new BMap.Marker(
                new BMap.Point(
                    this.businessDetail.longitude,
                    this.businessDetail.latitude
                )
            )
          
            map.addOverlay(marker)  //将标记添加到地图上
        },
        //在地图上选择区域
        getLocation(e) {
            this.businessDetail.longitude = e.point.lng  //设置经度
            this.businessDetail.latitude = e.point.lat  //设置纬度
            let BMapGL = this.BMap  //百度地图类
            let map = this.map//地图对象 
            map.clearOverlays()   //清除地图上所有的覆盖物(保证每次点击只有一个标记)
            //创建定位标记
            let marker = new BMapGL.Marker(new BMapGL.Point(e.point.lng, e.point.lat))   //将标记添加到地图上
            map.addOverlay(marker)      //创建坐标解析对象
            let geoc = new BMapGL.Geocoder()  //解析当前的坐标成地址
            geoc.getLocation(e.point, (rs) => {
                let addressComp = rs.addressComponents  //获取地址对象
                //拼接出详细地址
                this.businessDetail.address =
                    addressComp.province +
                    addressComp.city +
                    addressComp.district +
                    addressComp.street +
                    addressComp.streetNumber
            })
        },

效果：

标签：定位,vue,mapData,map,businessDetail,BMap,new,lng,百度
来源： https://www.cnblogs.com/CaraganaMicrophylla/p/16625331.html

本站声明： 1. iCode9 技术分享网（下文简称本站）提供的所有内容，仅供技术学习、探讨和分享；
2. 关于本站的所有留言、评论、转载及引用，纯属内容发起人的个人观点，与本站观点和立场无关；
3. 关于本站的所有言论和文字，纯属内容发起人的个人观点，与本站观点和立场无关；
4. 本站文章均是网友提供，不完全保证技术分享内容的完整性、准确性、时效性、风险性和版权归属；如您发现该文章侵犯了您的权益，可联系我们第一时间进行删除；
5. 本站为非盈利性的个人网站，所有内容不会用来进行牟利，也不会利用任何形式的广告来间接获益，纯粹是为了广大技术爱好者提供技术内容和技术思想的分享性交流网站。

ICode9

vue 百度地图定位