百度地图（vue）

百度地图官网：http://lbsyun.baidu.com/index.php?title=jspopular3.0

Vue Baidu Map https://dafrok.github.io/vue-baidu-map/#/zh/search/driving

唤起百度地图导航 https://blog.csdn.net/weimingjue/article/details/80493969

1：申请秘钥（官网的开发指南内）

2：根据开发项目引入，本人使用的vue，选择了vue组件，项目实现简单功能，服务器存储数据，实时导航唤起百度地图app

3: 踩坑

组建的引入老是报错，

3.1组件

地图实例

import BaiduMap from 'vue-baidu-map/components/map/Map.vue'

各种控件的所属目录不一样，总是报错，个人用这种大范围搜索，有更好的方法请指教

import {  
// 地图类型
BmMapType,
// 缩放
BmNavigation, 
// 缩略图
BmOverviewMap,
// 定位到当前
BmGeolocation,
// 覆盖物
BmMarker,
// 检索
BmLocalSearch,
BmLabel,
} from 'vue-baidu-map/components'

3.2图片

例如自定义的覆盖物 icon ,存储在本地，import引入再使用不容易出错

import pic1 from "../../static/img/pic1.png"

<bm-marker :position="center"   :icon="{url: icon2, size: {width: 30, height: 32}}" />

 3.3获取当前位置

baidu-map 绑定方法@ready =“handler”

handler ({BMap, map}) {
            // eslint-disable-next-line no-console
            console.log(BMap, map)
            // 获取当前位置
            let _this = this
            var geolocation = new BMap.Geolocation()
            geolocation.getCurrentPosition(function(r){
                window.console.log(r)
                _this.center={
                    lng:r.point.lng,
                    lat:r.point.lat
                }
            })
        },