引用百度地圖微信小程序JS API模塊

目錄

• ??

  

  做爲一名軟件專業沒有思惟的，菜鳥中的聖鬥士，將來的程序員， 最近再寫一個微信小程序e-life，在這過程當中，想要寫一個周邊的酒店、美食、服務、再分別點擊他們的時候，能夠在地圖上標記處他們的位置，而且能夠顯示出該地方的具體位置、名稱、電話

1.原理

前百度和高德周邊查詢api的實現機制基本一致，都是使用request接口請求遠程https接口，而後返回參數中位置的某種類型的周邊信息，最後再把數據動態綁定到頁面。
複製代碼

2. js 引入模塊

在項目根目錄下新建一個路徑，下載百度地圖微信小程序JavaScriptAPI，解壓後獲得bmap-xw.js 文件，將其拷貝到新建的路徑下，安裝完成。
複製代碼

var bmap = require('../../libs/bmap-wx.js');
複製代碼

3. 獲取地圖

• 3.1 新建百度地圖

  首先小程序獲取當前位置api,下面的圖片路徑請自行按照我的文件路徑添加，這也是我沒有思惟的地方。由於我不知道怎麼引入地圖在小程序裏，而且對map組件沒有了解，

wxMarkerData = data.wxMarkerData;
      that.setData({
        markers: wxMarkerData,
        fail: fail,
      });
      that.setData({
        latitude: wxMarkerData[0].latitude
      });
      that.setData({
        longitude: wxMarkerData[0].longitude
      });
    }
    that.setData({
      success: success
    });
複製代碼

• 3.2 得到信息

  讓觸發的位置改變顏色

makertap: function (e) {
    var that = this;
    var id = e.markerId;
    that.showSearchInfo(wxMarkerData, id);
    that.changeMarkerColor(wxMarkerData, id);
  },
複製代碼

• 3.3 setData渲染到頁面裏，而且顯示詳情信息 如具體位置，電話，名稱

showSearchInfo: function (data, i) {
    var that = this;
    that.setData({
      placeData: {
        title: '名稱：' + data[i].title + '\n',
        address: '地址：' + data[i].address + '\n',
        telephone: data[i].telephone == undefined ? '電話：暫無信息' : '電話：' + data[i].telephone
      }
    });
  },
複製代碼

4. 結語

最後結語給本身打打氣，做爲菜鳥，要努力寫代碼，改bug，我是最胖的