小程序调用腾讯地图

Posted on | In

腾讯位置服务

第一步，我们先找到腾讯位置服务，找到其中的微信小程序JavaScript SDK，接着做好准备工作：

  1. 申请开发者密钥（key）：申请密钥

  2. 下载微信小程序JavaScriptSDK，微信小程序JavaScriptSDK v1.0

  3. 安全域名设置，在“设置” -> “开发设置”中设置request合法域名，添加https://apis.map.qq.com

实名认证

image

创建key

image

设置key

这里一定要注意把最下面的WebSeriveAPI勾选

image

选择地图样式

image

API

有很多api，你们自行去看吧..
这里展示一下地点搜索

wxml
1
2
3
4
5
6
7
8
9
<!--绑定点击事件-->
<button bindtap="nearby_search">搜索周边KFC</button>
<!--地图容器-->
<map id="myMap"
   markers="{{markers}}"
   style="width:100%;height:300px;"
   longitude="116.313972"
   latitude="39.980014" scale='16'>
</map>
js
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
// 引入SDK核心类
var QQMapWX = require('../../utils/qqmap-wx-jssdk.js');
var qqmapsdk;
Page({

  data: {
    location: '',
    inputValue: '',
    markers: []
  },

  onLoad: function () {
    // 实例化API核心类
    qqmapsdk = new QQMapWX({
      key: 'EO5BZ-VG5RJ-5MNFX-FFUOY-3PP3T-LOBCM'
    });
  },
  onShow: function () {
  },

  nearby_search() {
    var _this = this;
    // 调用接口
    qqmapsdk.search({
      keyword: 'kfc',  //搜索关键词
      location: '39.980014,116.313972',  //设置周边搜索中心点
      success: function (res) { //搜索成功后的回调
        var mks = []
        for (var i = 0; i < res.data.length; i++) {
          mks.push({ // 获取返回结果，放到mks数组中
            title: res.data[i].title,
            id: res.data[i].id,
            latitude: res.data[i].location.lat,
            longitude: res.data[i].location.lng,
            iconPath: "/image/icon_location.png", //图标路径
            width: 20,
            height: 20
          })
        }
        _this.setData({ //设置markers属性，将搜索结果显示在地图中
          markers: mks
        })
      },
      fail: function (res) {
        console.log(res);
      },
      complete: function (res) {
        console.log(res);
      }
    });
  },

  onSelect() {
    var that = this;
    qqmapsdk.search({
      keyword: this.data.inputValue,
      // location: '39.980014,116.313972',  //设置周边搜索中心点
      success: function (res) {
        console.log(res.data);
        that.setData({
          location: res.data[0].location
        })
        var mks = []
        for (var i = 0; i < res.data.length; i++) {
          mks.push({ // 获取返回结果，放到mks数组中
            title: res.data[i].title,
            id: res.data[i].id,
            latitude: res.data[i].location.lat,
            longitude: res.data[i].location.lng,
            iconPath: "/image/icon_location.png", //图标路径
            width: 20,
            height: 25
          })
        }
        that.setData({ //设置markers属性，将搜索结果显示在地图中
          markers: mks
        })
      },
      fail: function (res) {
        console.log(res);
      },
      complete: function (res) {
        console.log(res);
      }
    })
  },

  onHref() {
    wx.navigateTo({
      url: '../index2/index2',
    })
  }
})
效果

image

OK，代码自行复制去试试吧，谢谢大家