微信小程序调用腾讯地图-并解读API文档 JavaScript SDK和 WebService API ...

搜索：腾讯位置服务
   

  找到API文档：
   

  入门中第一步：申请开发者密钥key
   

  前往控制台：
  

  创建应用并获取key:
  

  设置key的时候，还需要小程序的APPID。以是要前往微信公众平台中获取小程序的APPID：
  

  限定要求：
   

  添加配额：
  

  看清哪一个key而且设置配额。假如有多个key，也可以根据特别的某些key举行分配额度：
  

  下载地图的SDK：
   

  并放入项目中：
  

  添加服务器域名白名单：
   

  登录微信公众平台：
  

  设置白名单：
  

  搜索地点：
   

  实际开发者工具中截图：
  

  坐标地图：
  

  wxml：

  最终展示： 点击搜索周边KFC就出现赤色的预设值坐标的地点。
  

  具体代码：
   map.js
 

1. // 引入SDK核心类
2. var QQMapWX = require('../../libs/qqmap-wx-jssdk.js');
3. Page({
4.   data: {
5.     markers: []
6.   },
8.   onLoad: function () {
9.     // 实例化API核心类
10.     this.qqmapsdk = new QQMapWX({
11.       key: '************************ // 替换为你的QQ地图SDK密钥
12.     });
13.   },
15.   // 事件触发，调用接口
16.   nearby_search: function () {
17.     var _this = this;
18.     // 调用接口
19.     this.qqmapsdk.search({
20.       keyword: 'kfc',  // 搜索关键词
21.       location: '39.980014,116.313972',  // 设置周边搜索中心点
22.       success: function (res) { // 搜索成功后的回调
23.         var mks = [];
24.         for (var i = 0; i < res.data.length; i++) {
25.           mks.push({ // 获取返回结果，放到mks数组中
26.             title: res.data[i].title,
27.             id: parseInt(res.data[i].id), // 将 id 转换为整数形式
28.             latitude: res.data[i].location.lat,
29.             longitude: res.data[i].location.lng,
30.             iconPath: "/assets/icon/position.png", // 图标路径
31.             width: 20,
32.             height: 20
33.           });
34.         }
35.         _this.setData({ // 设置markers属性，将搜索结果显示在地图中
36.           markers: mks
37.         });
38.       },
39.       fail: function (res) {
40.         console.log('搜索失败', res);
41.       },
42.       complete: function (res) {
43.         console.log('搜索完成', res);
44.       }
45.     });
46.   }
47. });

复制代码

wxml:
 

1. <!--绑定点击事件-->
2. <button bindtap="nearby_search">搜索周边KFC</button>
3. <!--地图容器-->
4. <map id="myMap"
5.    markers="{{markers}}"
6.    style="width:100%;height:300px;"
7.    longitude="116.313972"
8.    latitude="39.980014" scale='16'>
9. </map>

复制代码

  
注意：
1 调用API有次数和额度限定。
2 调用的接口要开通相应的接口权限。

---

示例2：  “关键词输入提示”
   

  接口调用阐明：
   

  前往开通配额：
  

  代码：
   wxml:
  

  实际wxml:
  

  **.js 注意js代码不要全部拷贝，而是将methods的部分放在Page()中：
  

  实际**.js:
  

  
  最后展示：
   

  

---

调用WebService API
   

  举例：定位服务 --IP定位
   

  wxml:

1. <view class="container">
2.   <view class="map-container">
3.     <map id="map" latitude="{{latitude}}" longitude="{{longitude}}" markers="{{markers}}" style="width: 100%; height: 400px;"></map>
4.   </view>
5.   <view class="info-container">
6.     <view class="info-item">
7.       <text class="info-label">国家：</text>
8.       <text class="info-value">{{nation}}</text>
9.     </view>
10.     <view class="info-item">
11.       <text class="info-label">省份：</text>
12.       <text class="info-value">{{province}}</text>
13.     </view>
14.     <view class="info-item">
15.       <text class="info-label">城市：</text>
16.       <text class="info-value">{{city}}</text>
17.     </view>
18.   </view>
19. </view>

复制代码

js:

1. Page({
2.   data: {
3.     latitude: 0, // 地图中心点纬度
4.     longitude: 0, // 地图中心点经度
5.     markers: [], // 地图标记点
6.     nation: '', // 国家
7.     province: '', // 省份
8.     city: '', // 城市
9.   },
11.   onLoad: function () {
12.     // 发起获取当前IP定位信息的请求
13.     this.getLocationByIP();
14.   },
16.   getLocationByIP: function () {
17.     // 替换成你自己申请的腾讯地图API密钥
18.     const key = '************************';
19.     const apiUrl = `https://apis.map.qq.com/ws/location/v1/ip?key=${key}`;
21.     wx.request({
22.       url: apiUrl,
23.       method: 'GET',
24.       success: (res) => {
25.         console.log('IP定位结果：', res.data);
26.         if (res.data.status === 0) {
27.           const { location, ad_info } = res.data.result;
28.           const { lat, lng } = location;
29.           const { nation, province, city } = ad_info;
31.           // 更新页面数据，显示定位信息
32.           this.setData({
33.             latitude: lat,
34.             longitude: lng,
35.             markers: [{
36.               id: 1,
37.               latitude: lat,
38.               longitude: lng,
39.               title: city,
40.               iconPath: '/images/location.png', // 可自定义标记图标
41.               width: 30,
42.               height: 30
43.             }],
44.             nation: nation,
45.             province: province,
46.             city: city
47.           });
48.         } else {
49.           wx.showToast({
50.             title: '定位失败，请稍后重试',
51.             icon: 'none',
52.             duration: 2000
53.           });
54.         }
55.       },
56.       fail: (error) => {
57.         console.error('请求失败：', error);
58.         wx.showToast({
59.           title: '网络请求失败，请检查网络后重试',
60.           icon: 'none',
61.           duration: 2000
62.         });
63.       }
64.     });
65.   }
66. });

复制代码

wxss:

1. .container {
2.   display: flex;
3.   flex-direction: column;
4.   justify-content: center;
5.   align-items: center;
6.   padding: 20px;
7. }
9. .map-container {
10.   width: 100%;
11.   margin-bottom: 20px;
12. }
14. .info-container {
15.   width: 100%;
16.   background-color: #f0f0f0;
17.   padding: 10px;
18.   border-radius: 8px;
19. }
21. .info-item {
22.   display: flex;
23.   flex-direction: row;
24.   margin-bottom: 5px;
25. }
27. .info-label {
28.   font-weight: bold;
29. }
31. .info-value {
32.   margin-left: 5px;
33. }

复制代码

最终展示：
  

  

免责声明：如果侵犯了您的权益，请联系站长，我们会及时删除侵权内容，谢谢合作！更多信息从访问主页：qidao123.com:ToB企服之家，中国第一个企服评测及商务社交产业平台。