乐趣区

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

jiezi

在这之前我们必须已经完成了 微信 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。

退出移动版