微信小程序调用腾讯地图-并解读API文档 JavaScript SDK和 WebService API
克里斯蒂亚诺更新 2024-08-16 15:03:01 阅读 85
搜索：腾讯位置服务
找到API文档：
入门中第一步：申请开发者密钥key
前往控制台：
创建应用并获取key:
设置key的时候，还需要小程序的APPID。所以要前往微信公众平台中获取小程序的APPID：
限制要求：
添加配额：
看清哪一个key并且设置配额。如果有多个key，也可以根据特别的某些key进行分配额度：
下载地图的SDK：
并放入项目中：
添加服务器域名白名单：
登录微信公众平台：
设置白名单：
搜索地址：
实际开发者工具中截图：
坐标地图：
wxml：
最终展示： 点击搜索周边KFC就出现红色的预设值坐标的地址。
具体代码：
map.js
<code>// 引入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[i].title,
id: parseInt(res.data[i].id), // 将 id 转换为整数形式
latitude: res.data[i].location.lat,
longitude: res.data[i].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>code>
<!--地图容器-->
<map id="myMap"code>
markers="{ {markers}}"code>
style="width:100%;height:300px;"code>
longitude="116.313972"code>
latitude="39.980014" scale='16'>code>
</map>
注意：
1 调用API有次数和额度限制。
2 调用的接口要开通相应的接口权限。
示例2： “关键词输入提示”
接口调用说明：
前往开通配额：
代码：
wxml:
实际wxml:
**.js 注意js代码不要全部拷贝，而是将methods的部分放在Page()中：
实际**.js:
最后展示：
调用WebService API
举例：定位服务 --IP定位
wxml:
<code><view class="container">code>
<view class="map-container">code>
<map id="map" latitude="{ {latitude}}" longitude="{ {longitude}}" markers="{ {markers}}" style="width: 100%; height: 400px;"></map>code>
</view>
<view class="info-container">code>
<view class="info-item">code>
<text class="info-label">国家：</text>code>
<text class="info-value">{ {nation}}</text>code>
</view>
<view class="info-item">code>
<text class="info-label">省份：</text>code>
<text class="info-value">{ {province}}</text>code>
</view>
<view class="info-item">code>
<text class="info-label">城市：</text>code>
<text class="info-value">{ {city}}</text>code>
</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;
}
最终展示：
声明
本文内容仅代表作者观点，或转载于其他网站，本站不以此文作为商业用途
如有涉及侵权，请联系本站进行删除
转载本站原创文章，请注明来源及作者。