微信公众号里面使用百度地图JavaScript-API-的一些记录

在这之前我们必须已经完成了 微信 JSSDK的配置

如果还没有配置, 请看这篇文章

---

百度 JavaScript API Lite
JavaScript API 标准版相比，Lite 版专门针对移动端 H5 页面的使用场景，代码体积小，性能更好

获取百度 KEY

1. 注册成为百度开发者
2. 创建一个应用

3. 获取专属你的 KEY

写一个简单的百度地图(JavaScript API Lite)

1. 在项目 index.html 中引入百度 JavaScript API Lite

<script type="text/javascript" src="//api.map.baidu.com/api?ak= 您的密钥 &type=lite&v=1.0"></script>

2. 在需要用到百度地图的组件 template 中写入

<div id="baiduMap"></div> 

3. 在需要用到百度地图的组件 script-mounted 中写入

// 创建一个地图实例
let map = new BMap.Map("baiduMap"); 
// 创建一个中心点坐标 
let point = new BMap.Point(116.404, 39.915); 
// 设置坐标 
map.centerAndZoom(point, 15); 

此时你就会看到一个简单的百度地图.

你也可以添加链接描述控件

      // 创建控件
      let zoomCtrl = new BMap.ZoomControl();

      // 添加控件
      map.addControl(zoomCtrl);
      map.addControl(scaleCtrl);

JavaScript API Lite 只有一些 简单的功能, 不得不换 JavaScript API v3.0…

使用 JavaScript API v3.0

百度地图 API 3.0 与百度地图 lite 使用方法类似, 只不过引入的 api 文件不一样,

百度 JavaScript API 3.0 文档

 <script type="text/javascript" src="http://api.map.baidu.com/api?v=3.0&ak=obQ9ARXSYP3nswLNHABZopmrIyu2NcRC"></script>

使用百度地图碰到的一些坑

坑 1: 微信 SDK getLocation 获取的位置为 gps 定位, 需要手动转为百度的 BD09 坐标;

// 创建坐标
    let point = new BMap.Point(longitude, latitude);// 微信获取的坐标
    let convertor = new BMap.Convertor();//    创建一个坐标转换的实例
    let pointArr = [];// 定义存放转换点数组 每次最多 10 个
    pointArr.push(point);// 将转换点推入 数组
    
    // 转换坐标
    convertor.translate(pointArr, 1, 5, function (data) {
        // 转换左边后的回调函数,
      map.centerAndZoom(data.points[0], 15);
      if(data.status === 0) {
        // 添加三角坐标
        let marker = new BMap.Marker(data.points[0]);
        map.addOverlay(marker);
        
        // 添加标签
        let label = new BMap.Label("你的位置",{offset:new BMap.Size(20,-10)});
        marker.setLabel(label); // 添加百度 label

      }
    })

坑 2: 地图安卓页面显示正常,IOS 微信端无显示

原因是 ios 已经要求在 APP 中的所有对外连接都要使用 https，但是我们用的秘钥链接是使用的 http
因此我们将 index.html 中的 script 改一下

<script type="text/javascript" src="https://api.map.baidu.com/api?v=3.0&ak= 你的 key&s=1"></script>

JavaScript API V2.0 及以上版本支持 HTTPS。