uniapp 使用百d地图

明日之后

在项目的main.js中加入

[JavaScript] 纯文本查看 复制代码

// 百度地图
import BaiduMap from 'vue-baidu-map'
Vue.use(BaiduMap, {
  // ak 是在百度地图开发者平台申请的密钥 详见 http://lbsyun.baidu.com/apiconsole/key */
  ak: 'XXXXXXXXXXXXXXXXXXX'
})

html

[JavaScript] 纯文本查看 复制代码

<view class="map">
<baidu-map class="map-contain" :scroll-wheel-zoom="true" :center="center" :zoom="zoom" MapType="BMAP_SATELLITE_MAP" @ready="mapReady">
        <bm-geolocation anchor="BMAP_ANCHOR_BOTTOM_RIGHT" @locationSuccess="getMyLocation()" :showAddressBar="true"
         :autoLocation="true"></bm-geolocation>
         <bm-marker @dragend="markerDrag" :position="center" :dragging="true" animation="BMAP_ANIMATION_BOUNCE">
         <!--<bm-label content="我爱北京天安门" :labelStyle="{color: 'red', fontSize : '24px'}" :offset="{width: -35, height: 30}"/> -->
         </bm-marker>
</baidu-map>
</view>

js

[JavaScript] 纯文本查看 复制代码

zoom:18,//地图相关设置
center:{lng:0,lat:0}

[JavaScript] 纯文本查看 复制代码

markerDrag(x){
                                console.log( x.point);
                                this.center.lat = x.point.lat;
                                this.center.lng = x.point.lng;
                        },
                        mapReady({BMap, map}) {
                                // 下面注释是百度地图API官方实现方法
                                // console.log(1)
                                // console.log(map);
                                // console.log(BMap);
                                let that = this;
                                var geolocation = new BMap.Geolocation();
                                // 开启SDK辅助定位
                                geolocation.enableSDKLocation();
                                geolocation.getCurrentPosition(function(r) {
                                        console.log("d");
                                        console.log(r);
                                        //getStatus拿到的是状态信息，失败与否
                                        if (this.getStatus() == BMAP_STATUS_SUCCESS) {
                                                // var mk = new BMap.Marker(r.point);
                                                // map.addOverlay(mk);//将覆盖物添加到地图中
                                                // map.panTo(r.point);//将地图的中心点更改为给定的点
                                                that.center.lng = r.point.lng;
                                                that.center.lat = r.point.lat;
                                                that.showToast('您所在位置为经度：' + r.point.lng + ',纬度：' + r.point.lat);
                                                // alert('您的位置：' + r.point.lng + ',' + r.point.lat);
                                        } else {
                                                that.showToast("位置信息获取失败，"+ this.getStatus());
                                        }
                                }, {
                                        enableHighAccuracy: true//要求浏览器获取最佳结果
                                })
                        },

tlwg

赞一个！！支持！！

lq850815

谢谢分享

歪嘴龙王夏目

看看  学习一下