WeChat applet implements map function (Tencent Map)
The main function
Obtain user's current location information through WeChat API.
Use Tencent Map API to convert latitude and longitude into address information
. Display current location information and surrounding POIs (points of interest).
Code
index.wxml
<!-- index.wxml -->
<view class="container">
<view class="header">
<text class="title">当前位置</text>
<button class="button" bindtap="refreshLocation">刷新</button>
</view>
<view class="address">
<text class="label">地址：</text>
<text>{
{
address }}</text>
</view>
<view class="poi">
<text class="label">周边兴趣点：</text>
<scroll-view class="poi-list" scroll-y="true">
<block wx:for="{
{ poiList }}" wx:key="index">
<view class="poi-item">{
{
item.title }}</view>
</block>
</scroll-view>
</view>
</view>
index.wxss
/* index.wxss */
.container {
display: flex;
flex-direction: column;
align-items: center;
}
.header {
display: flex;
align-items: center;
justify-content: space-between;
width: 100%;
padding: 20px;
}
.title {
font-size: 18px;
font-weight: bold;
}
.address,
.poi {
display: flex;
flex-direction: row;
align-items: center;
padding: 10px;
}
.label {
font-weight: bold;
margin-right: 10px;
}
.address text,
.poi text {
flex: 1;
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
}
.poi-list {
height: 200px;
margin-left: 10px;
}
.poi-item {
padding: 5px 0;
}
index.js
// index.js
const QQMapWX = require('./libs/qqmap-wx-jssdk.min');
Page({
data: {
address: '正在获取地址信息...',
poiList: []
},
onLoad() {
this.qqmapsdk = new QQMapWX({
key: '你的腾讯地图API密钥'
});
this.refreshLocation();
},
refreshLocation() {
wx.getLocation({
type: 'wgs84',
success: (res) => {
const {
latitude, longitude } = res;
this.setData({
address: '正在获取地址信息...',
poiList: []
});
this.qqmapsdk.reverseGeocoder({
location: {
latitude,
longitude
},
success: (res) => {
const {
formatted_addresses: {
recommend }, pois } = res.result;
this.setData({
address: recommend,
poiList: pois
});
},
fail: () => {
this.setData({
address: '获取地址信息失败',
poiList: []
});
}
});
},
fail: () => {
this.setData({
address: '获取位置信息失败',
poiList: []
});
}
});
}
});
parse
Tencent Map API and WeChat API are used to obtain current location information and surrounding POIs. Tencent Map API is used to convert latitude and longitude into address information, and WeChat API is used to obtain the user's current location information.
In the example, we first initialize the QQMapWX object in the onLoad method, which is used to call the Tencent Map API. Then, in the refreshLocation method, we first call the wx.getLocation method to obtain the user's current location information, and then call the reverseGeocoder method through the QQMapWX object to obtain the address information of the location and surrounding POIs. Finally, we bind this information to the page's data and render it on the page.
Note that before using the Tencent Map API, you need to register a Tencent Cloud account and apply for a Tencent Map API key. For specific application steps, please refer to the official documentation of Tencent Map API.
That’s the end here, I hope it helps.