教你如何利用微信小程序高效地完成地图点位标注-Toy模板网

这篇具有很好参考价值的文章主要介绍了教你如何利用微信小程序高效地完成地图点位标注。希望对大家有所帮助。如果存在错误或未考虑完全的地方，请大家不吝赐教，您也可以点击"举报违法"按钮提交疑问。

前言

如今，移动互联网技术飞速发展，微信小程序以其方便快捷的特点受到了广泛的欢迎。在这篇文章中，我将会介绍如何利用微信小程序实现地图点位功能，帮助大家更好地了解和使用地图服务。让我们一起来看看吧。

实现思路

首先，我们需要使用微信小程序提供的地图组件来展示地图，并进行地图的初始化。然后，我们可以通过调用腾讯地图的函数，将点位的信息展示在地图上。当用户点击某个点位时，我们可以通过绑定事件来获取该点位信息，并在屏幕底部弹出弹框展示该点位的详细信息。

完整代码

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;
}

通过上面的代码我们实现了如下的效果：

页面加载时，初始化地图，并加载点位数据；
点位数据可以通过接口请求获取真实数据，这里使用了一个模拟的数组；
点位数据包含了每个点位的经度、纬度、名称和所属区；
地图上的点位会显示为标记点，标记点的图标使用了一个名为 guankong.png 的图标；
当用户点击标记点时，会触发 markertap 事件，弹框会显示对应点位的详细信息；
弹框中显示了点位的名称、经度、纬度和所属区；
用户可以通过关闭弹框按钮来关闭弹框；
页面中还包含了一些样式定义，用于正确显示地图和弹框，并提供良好的用户体验。

实现效果

微信小程序地图打点,小程序,前端,微信小程序

拓展

移动地图视角到搜索的点位上文章来源地址https://www.toymoban.com/news/detail-519761.html

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
});