foreword
Nowadays, with the rapid development of mobile Internet technology, WeChat applets have been widely welcomed for their convenience and speed. In this article, I will introduce how to use the WeChat applet to implement the map point function to help you better understand and use map services. Let's take a look.
Implementation ideas
First, we need to use the map component provided by the WeChat applet to display the map and initialize the map. Then, we can display the point information on the map by calling the function of Tencent Map. When the user clicks on a point, we can bind the event to get the point information, and pop up a pop-up box at the bottom of the screen to display the detailed information of the point.
full code
wxml file
<view>
<!-- 地图控件 -->
<view>
<map id="map" longitude="{
{longitude}}" latitude="{
{latitude}}" scale="{
{scale}}" markers="{
{markers}}" bindmarkertap="markertap">
</map>
</view>
<!-- 弹框 -->
<view>
<van-popup closeable bind:close="onClose" round custom-style="height: 20%" position="bottom" show="{
{ showModal }}" bind:close="onClose">
<view class="detailsBox">
<view>
<text>点位名称：</text>
<text>{
{modalData.title}}</text>
</view>
<view>
<text>经度：</text>
<text>{
{modalData.longitude}}</text>
</view>
<view>
<text>纬度：</text>
<text>{
{modalData.latitude}}</text>
</view>
<view>
<text>所属区：</text>
<text>{
{modalData.county}}</text>
</view>
</view>
</van-popup>
</view>
</view>
js file
Page({
data: {
longitude: 116.397963, //经度
latitude: 39.915119, //维度
scale: 13, //地图默认缩放等级
markers: [], //点位数据
showModal: false, //弹框显隐
modalData: {
}, //详情信息
},
onLoad: function () {
//初始化地图
this.mapCtx = wx.createMapContext('map');
//加载点位数据
this.loadMarkers();
},
loadMarkers: function () {
//模拟点位数据，可以用接口请求获取真实数据
let markers = [{
id: 1,
longitude: 116.397963,
latitude: 39.915119,
name: '点位1',
county: "东城区",
},
{
id: 2,
longitude: 116.3977963,
latitude: 39.899921,
name: '点位2',
county: "东城区",
},
{
id: 3,
longitude: 116.387963,
latitude: 39.915119,
name: '点位3',
county: "东城区",
}
];
//生成 markers 列表，用于在地图上展示
let markersData = markers.map(marker => {
return {
id: marker.id,
longitude: marker.longitude,
latitude: marker.latitude,
title: marker.name,
county: marker.county,
iconPath: '../../assets/guankong.png',
width: 40,
height: 40,
};
});
this.setData({
markers: markersData
});
},
// 点击标记点时触发
markertap(e) {
//点击 marker 时触发，获取对应的点位信息并展示弹框
let markerData = this.data.markers.find(marker => marker.id === e.detail.markerId);
this.setData({
showModal: true,
modalData: markerData
});
},
// 关闭弹框
onClose() {
this.setData({
showModal: false
});
},
})
wxss file
#map{
width: 100%;
height: 100vh;
}
.detailsBox{
padding: 20rpx 20rpx 0rpx 28rpx;
font-size: 28rpx;
}
.detailsBox view:nth-child(n+2){
margin-top: 20rpx;
}
achieve effect
expand
Move the map view to the searched point
const location = res.data.data[0];//获取数据第一条
const mapCtx = wx.createMapContext('map');//创建 map 上下文 MapContext 对象。
//将地图中心移置当前定位点，此时需设置地图组件 show-location 为true。'2.8.0' 起支持将地图中心移动到指定位置。
mapCtx.moveToLocation({
//经纬度
latitude: location.latitude,
longitude: location.longitude
});