微信小程序调用腾讯地图-并解读API文档 JavaScript SDK和 WebService API
搜索：腾讯位置服务https://img-blog.csdnimg.cn/direct/d4d2d6376f184217b7e24d7e9f71b35d.png
找到API文档：
https://img-blog.csdnimg.cn/direct/4fb9df2e9c374f1085678263ec33b2b1.png
入门中第一步：申请开发者密钥key
https://img-blog.csdnimg.cn/direct/033accc5bb0e4643bbb80f7bbd930036.png
前往控制台：
https://img-blog.csdnimg.cn/direct/069e394828f04c168bf37735e4986c5d.png
创建应用并获取key:
https://img-blog.csdnimg.cn/direct/cb8f8ff799aa4f6fab7d8b7f0ebf6dab.png
设置key的时候，还需要小程序的APPID。以是要前往微信公众平台中获取小程序的APPID：
https://img-blog.csdnimg.cn/direct/83e680c90e284fdeab527914a00803c2.png
限定要求：
https://img-blog.csdnimg.cn/direct/ac289b144933436eb3bb40ee81553dac.png
添加配额：
https://img-blog.csdnimg.cn/direct/e2f9cf7752b147bba8fb5aacc33b7887.png
看清哪一个key而且设置配额。假如有多个key，也可以根据特别的某些key举行分配额度：
https://img-blog.csdnimg.cn/direct/eb6b8cf456e94d9cab777d3d18c50c58.png
下载地图的SDK：
https://img-blog.csdnimg.cn/direct/1c588d25aaac407ba839876ef79ce1ab.png
并放入项目中：
https://img-blog.csdnimg.cn/direct/c518bb82d1f840419b966809ff9f9344.png
添加服务器域名白名单：
https://img-blog.csdnimg.cn/direct/fb60deef81d8489eaca276043047421f.png
登录微信公众平台：
https://img-blog.csdnimg.cn/direct/80cda06b7124464d8c79d1c6960804f6.png
设置白名单：
https://img-blog.csdnimg.cn/direct/c26a1f12d11744068213192e00bc2115.png
搜索地点：
https://img-blog.csdnimg.cn/direct/9cc21c16ca6149929fe151e8b671622f.png
实际开发者工具中截图：
https://img-blog.csdnimg.cn/direct/8e4f05c25aec41e9b58b084357e8068b.png
坐标地图：
https://img-blog.csdnimg.cn/direct/e3b945fb1d764d1c9be8c71efa49ba30.png
wxml：
https://img-blog.csdnimg.cn/direct/267f2b30cf3b4a8eb3922c10c576fe72.png
最终展示： 点击搜索周边KFC就出现赤色的预设值坐标的地点。
https://img-blog.csdnimg.cn/direct/f1663d6c53fd42779006c981954a1dde.png
具体代码：
map.js
// 引入SDK核心类
var QQMapWX = require('../../libs/qqmap-wx-jssdk.js');
Page({
data: {
markers: []
},
onLoad: function () {
// 实例化API核心类
this.qqmapsdk = new QQMapWX({
key: '************************ // 替换为你的QQ地图SDK密钥
});
},
// 事件触发，调用接口
nearby_search: function () {
var _this = 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.title,
id: parseInt(res.data.id), // 将 id 转换为整数形式
latitude: res.data.location.lat,
longitude: res.data.location.lng,
iconPath: "/assets/icon/position.png", // 图标路径
width: 20,
height: 20
});
}
_this.setData({ // 设置markers属性，将搜索结果显示在地图中
markers: mks
});
},
fail: function (res) {
console.log('搜索失败', res);
},
complete: function (res) {
console.log('搜索完成', res);
}
});
}
});
wxml:
<!--绑定点击事件-->
<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>
注意：
1 调用API有次数和额度限定。
2 调用的接口要开通相应的接口权限。
示例2： “关键词输入提示”
https://i-blog.csdnimg.cn/direct/4793a414202647dca936d4da4c4e6a6c.png
接口调用阐明：
https://i-blog.csdnimg.cn/direct/a5714fb3f1ec4ce3a35144a718b4e607.png
前往开通配额：
https://i-blog.csdnimg.cn/direct/fb5adca7bff54d5eaec74e0f7c83221a.png
代码：
wxml:
https://i-blog.csdnimg.cn/direct/1877749154c24dd0b5336164a582fab0.png
实际wxml:
https://i-blog.csdnimg.cn/direct/abc5b02f23d34c5088ff73597333de3a.png
**.js 注意js代码不要全部拷贝，而是将methods的部分放在Page()中：
https://i-blog.csdnimg.cn/direct/9b66cfea04454992ad78489f635c9be7.png
实际**.js:
https://i-blog.csdnimg.cn/direct/3ae7b6d80b9a4d8d8989fe1d67e9a3a4.png
最后展示：
https://i-blog.csdnimg.cn/direct/eefcd54951974bb7a6e5c42443910156.png
调用WebService API
https://i-blog.csdnimg.cn/direct/c52f3ecd6a62448cabe857dabff073c9.png
举例：定位服务 --IP定位
https://i-blog.csdnimg.cn/direct/c92dd51d2f0b4aa4ad620b3a93cd3a6c.png
wxml:
<view class="container">
<view class="map-container">
<map id="map" latitude="{{latitude}}" longitude="{{longitude}}" markers="{{markers}}" style="width: 100%; height: 400px;"></map>
</view>
<view class="info-container">
<view class="info-item">
<text class="info-label">国家：</text>
<text class="info-value">{{nation}}</text>
</view>
<view class="info-item">
<text class="info-label">省份：</text>
<text class="info-value">{{province}}</text>
</view>
<view class="info-item">
<text class="info-label">城市：</text>
<text class="info-value">{{city}}</text>
</view>
</view>
</view>
js:
Page({
data: {
latitude: 0, // 地图中心点纬度
longitude: 0, // 地图中心点经度
markers: [], // 地图标记点
nation: '', // 国家
province: '', // 省份
city: '', // 城市
},
onLoad: function () {
// 发起获取当前IP定位信息的请求
this.getLocationByIP();
},
getLocationByIP: function () {
// 替换成你自己申请的腾讯地图API密钥
const key = '************************';
const apiUrl = `https://apis.map.qq.com/ws/location/v1/ip?key=${key}`;
wx.request({
url: apiUrl,
method: 'GET',
success: (res) => {
console.log('IP定位结果：', res.data);
if (res.data.status === 0) {
const { location, ad_info } = res.data.result;
const { lat, lng } = location;
const { nation, province, city } = ad_info;
// 更新页面数据，显示定位信息
this.setData({
latitude: lat,
longitude: lng,
markers: [{
id: 1,
latitude: lat,
longitude: lng,
title: city,
iconPath: '/images/location.png', // 可自定义标记图标
width: 30,
height: 30
}],
nation: nation,
province: province,
city: city
});
} else {
wx.showToast({
title: '定位失败，请稍后重试',
icon: 'none',
duration: 2000
});
}
},
fail: (error) => {
console.error('请求失败：', error);
wx.showToast({
title: '网络请求失败，请检查网络后重试',
icon: 'none',
duration: 2000
});
}
});
}
});
wxss:
.container {
display: flex;
flex-direction: column;
justify-content: center;
align-items: center;
padding: 20px;
}
.map-container {
width: 100%;
margin-bottom: 20px;
}
.info-container {
width: 100%;
background-color: #f0f0f0;
padding: 10px;
border-radius: 8px;
}
.info-item {
display: flex;
flex-direction: row;
margin-bottom: 5px;
}
.info-label {
font-weight: bold;
}
.info-value {
margin-left: 5px;
}
最终展示：
https://i-blog.csdnimg.cn/direct/34f86115a3034b4aa9f245bf1d8db9ff.png
免责声明：如果侵犯了您的权益，请联系站长，我们会及时删除侵权内容，谢谢合作！更多信息从访问主页：qidao123.com:ToB企服之家，中国第一个企服评测及商务社交产业平台。
页:
[1]