前言
如今，移动互联网技术飞速发展，微信小程序以其方便快捷的特点受到了广泛的欢迎。在这篇文章中，我将会介绍如何利用微信小程序实现地图点位功能，帮助大家更好地了解和使用地图服务。让我们一起来看看吧。
实现思路
首先，我们需要使用微信小程序提供的地图组件来展示地图，并进行地图的初始化。然后，我们可以通过调用腾讯地图的函数，将点位的信息展示在地图上。当用户点击某个点位时，我们可以通过绑定事件来获取该点位信息，并在屏幕底部弹出弹框展示该点位的详细信息。
完整代码
wxml 文件
<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 文件
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 文件
#map{
width: 100%;
height: 100vh;
}
.detailsBox{
padding: 20rpx 20rpx 0rpx 28rpx;
font-size: 28rpx;
}
.detailsBox view:nth-child(n+2){
margin-top: 20rpx;
}
实现效果
拓展
移动地图视角到搜索的点位上
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
});