2022-04-29 百度地图API调用

 导入百度地图

1. 通过 js 文件导入

* 导入 baidumap.js 并设置  ak = '你的密钥'

*  创建一个地图容器

* 通过 new BMap.map('el') 创建地图实例

 * 创建点坐标      

        let point = new BMap.Point('经度','纬度')

* 初始化地图，设置中心点坐标和地图缩放级别

        map.centerAndZoom(point, 17);

2. 通过 vue 导入

* 安装 vue-baidu-map

* 从 vue-baidu-map 导入地图和需要使用的地图容器

* 注册成组件以组件的形式使用 并设置 ak = '你的密钥'

** 也可以在 main.js 中全局导入

// baidu-map相关属性  

    center:设置地图中心点 

    zoom:设置地图缩放级别

     ready: 处理地图相关方法 // 该方法可以拿到 BMap和map两个对象

通过百度地图获取当前定位

     let geolocation = new BMap.Geolocation()

     geolocation.getCurrentPosition(cb)//可以获取到当前的经度和纬度

创建一个点坐标

    let point = new BMap.Point('经度','纬度')

通过经纬度获取详细地址

      let gc = new BMap.Geocoder()

      gc.getLocation(point, (cb) // 可以获取到省份城市街道

让地图中心跟随坐标移动

    map.panTo(point)

创建一个标注

    let marker = new BMap.Marker(point)

将标注添加到地图上

    map.addOverlay(marker)

清除所有标注

    map.clearOverlays()