小程序学习：显示腾讯地图

腾讯的人可能觉得所有的同学都是高手，这个小程序地图的入门例子：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>

显示结果：