小程序學習：顯示騰訊地圖

騰訊的人可能覺得所有的同學都是高手，這個小程序地圖的入門例子：https://lbs.qq.com/qqmap_wx_jssdk/index.html

我反覆折騰幾次才讓地圖顯示出來。

 

index.js:

//index.js
//獲取應用實例
const app = getApp()
// 引入SDK核心類
var QQMapWX = require('../../libs/qqmap-wx-jssdk.js');
var qqmapsdk;

Page({
  data: {

  },
  //事件處理函數
  bindViewTap: function() {
    wx.navigateTo({
      url: '../logs/logs'
    })
  },
  onLoad: function () {
    // 實例化API核心類
    qqmapsdk = new QQMapWX({
      key: '申請的key'
    });

  },
  onShow: function () {
    qqmapsdk.search({
      keyword: '酒店',
      success: function (res) {
        console.log(res);
      },
      fail: function (res) {
        console.log(res);
      },
      complete: function (res) {
        console.log(res);
      }
    })
  }

  
})

index.wxml:

<!--index.wxml-->
<view class="container">

  <!--地圖容器-->
  <map id="myMap" markers="{{markers}}" style="width:100%;height:300px;" longitude="116.313972" latitude="39.980014" scale='16'>
  </map>


</view>

顯示結果：