微信小程序地图组件实现搜索关键字并标记渲染

微信小程序

说说原理，首先是要以当前坐标指定关键字（比如「酒店」）搜索周边的所有酒店，得到相关的坐标点数组，然后在微信小程序的map组件里标记渲染出来完成需求，这里说到的指定坐标搜索周边地标的功能需要用到腾讯地图SDK（这里推荐用腾讯生态内的产品，对接比较方便）.
腾讯地图SDK相关网站：微信小程序JavaScript SDK | 腾讯位置服务
https://lbs.qq.com/miniProgram/jsSdk/jsSdkGuide/methodSearch

wxml里面，map组件相关代码：

1. <map id="myMap" class="map-body" latitude="{{latitude}}" longitude="{{longitude}}" markers="{{markers}}" include-points="{{includePoints}}" show-compass="{{true}}" show-scale="{{true}}" bindmarkertap="markertap" bindlabeltap="markertap" bindcallouttap="markertap" bindregionchange="regionChange" show-location enable-3D></map>

复制代码

js里面相关代码：

1. /* 引入腾讯地图SDK */
   
2. // Page外层引入SDK核心类
   
3. var QQMapWX = require('../../libs/qqmap-wx-jssdk.min.js');
   
4. var qqmapsdk;
   
5. 
   
6. //onLoad里面创建腾讯地图组件,实例化API核心类
   
7. qqmapsdk = new QQMapWX({
   
8.         key: '腾讯地图申请开通后的key'
   
9. });
   
10. 
    
11. /*关键代码 doSearch*/
    
12. doSearch: function (e) {
    
13.                 let that = this;
    
14.                 let markers = [];
    
15.                 let includePoints = [];
    
16.                 that.setData({ searchword: that.data.searchword2 }, res => {
    
17.                         qqmapsdk.search({/* 搜索酒店 */
    
18.                                 keyword: that.data.searchword2,
    
19.                                 success: function (res) {
    
20.                                         for (let i = 0; i < res.data.length; i++) {
    
21.                                                 let item = {};
    
22.                                                 item.id = res.data[i].id;
    
23.                                                 item.latitude = res.data[i].location.lat;
    
24.                                                 item.longitude = res.data[i].location.lng;
    
25.                                                 item.name = res.data[i].title;
    
26.                                                 item.callout = {
    
27.                                                         content: res.data[i].title,
    
28.                                                         bgColor: "#2e2f31",
    
29.                                                         display: "ALWAYS",
    
30.                                                         color: "#ffffff",
    
31.                                                         fontSize: '28rpx',
    
32.                                                         borderRadius: '20rpx',
    
33.                                                         textAlign: 'center',
    
34.                                                         anchorY: -30,
    
35.                                                         padding: 10
    
36.                                                 };
    
37.                                                 item.address = res.data[i].address;
    
38.                                                 markers.push(item);
    
39.                                                 let itemPoint = {};
    
40.                                                 itemPoint.latitude = item.latitude;
    
41.                                                 itemPoint.longitude = item.longitude;
    
42.                                                 includePoints.push(itemPoint);
    
43.                                         }
    
44.                                         that.setData({
    
45.                                                 markers,
    
46.                                                 includePoints,
    
47.                                         });
    
48.                                 }
    
49.                         });
    
50.                 })
    
51.         },

复制代码