微信公衆號裏面使用百度地圖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);