微信公众号里面使用百度地图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。

坑3:给地图添加click事件后,部分手机出现不灵敏

原来的代码是这样:

this.map.addEventListener("click",_this.geocoderCallback);

遇到的问题是:部分手机点击手机边缘是可以触发回调方法,且中央需要快速的点击数次才可以触发,非常奇怪.

将click改为touchend 解决

this.map.addEventListener("touchend",_this.geocoderCallback);