前言

如今，移動互聯(lián)網(wǎng)技術(shù)飛速發(fā)展，微信小程序以其方便快捷的特點受到了廣泛的歡迎。在這篇文章中，我將會介紹如何利用微信小程序?qū)崿F(xiàn)地圖點位功能，幫助大家更好地了解和使用地圖服務(wù)。讓我們一起來看看吧。

實現(xiàn)思路

首先，我們需要使用微信小程序提供的地圖組件來展示地圖，并進(jìn)行地圖的初始化。然后，我們可以通過調(diào)用騰訊地圖的函數(shù)，將點位的信息展示在地圖上。當(dāng)用戶點擊某個點位時，我們可以通過綁定事件來獲取該點位信息，并在屏幕底部彈出彈框展示該點位的詳細(xì)信息。

完整代碼

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>經(jīng)度：</text>
					<text>{{modalData.longitude}}</text>
				</view>
				<view>
					<text>緯度：</text>
					<text>{{modalData.latitude}}</text>
				</view>
				<view>
					<text>所屬區(qū)：</text>
					<text>{{modalData.county}}</text>
				</view>
			</view>
		</van-popup>
	</view>
</view>

js 文件

Page({
    data: {
        longitude: 116.397963, //經(jīng)度
        latitude: 39.915119, //維度
        scale: 13, //地圖默認(rèn)縮放等級
        markers: [], //點位數(shù)據(jù)
        showModal: false, //彈框顯隱
        modalData: {}, //詳情信息
    },

    onLoad: function () {
        //初始化地圖
        this.mapCtx = wx.createMapContext('map');
        //加載點位數(shù)據(jù)
        this.loadMarkers();
    },

    loadMarkers: function () {
        //模擬點位數(shù)據(jù)，可以用接口請求獲取真實數(shù)據(jù)
        let markers = [{
                id: 1,
                longitude: 116.397963,
                latitude: 39.915119,
                name: '點位1',
                county: "東城區(qū)",
            },
            {
                id: 2,
                longitude: 116.3977963,
                latitude: 39.899921,
                name: '點位2',
                county: "東城區(qū)",
            },
            {
                id: 3,
                longitude: 116.387963,
                latitude: 39.915119,
                name: '點位3',
                county: "東城區(qū)",
            }
        ];
        //生成 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
        });
    },
    // 點擊標(biāo)記點時觸發(fā)
    markertap(e) {
        //點擊 marker 時觸發(fā)，獲取對應(yīng)的點位信息并展示彈框
        let markerData = this.data.markers.find(marker => marker.id === e.detail.markerId);
        this.setData({
            showModal: true,
            modalData: markerData
        });
    },
    // 關(guān)閉彈框
    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;
}

通過上面的代碼我們實現(xiàn)了如下的效果：

• 頁面加載時，初始化地圖，并加載點位數(shù)據(jù)；
• 點位數(shù)據(jù)可以通過接口請求獲取真實數(shù)據(jù)，這里使用了一個模擬的數(shù)組；
• 點位數(shù)據(jù)包含了每個點位的經(jīng)度、緯度、名稱和所屬區(qū)；
• 地圖上的點位會顯示為標(biāo)記點，標(biāo)記點的圖標(biāo)使用了一個名為 guankong.png 的圖標(biāo)；
• 當(dāng)用戶點擊標(biāo)記點時，會觸發(fā) markertap 事件，彈框會顯示對應(yīng)點位的詳細(xì)信息；
• 彈框中顯示了點位的名稱、經(jīng)度、緯度和所屬區(qū)；
• 用戶可以通過關(guān)閉彈框按鈕來關(guān)閉彈框；
• 頁面中還包含了一些樣式定義，用于正確顯示地圖和彈框，并提供良好的用戶體驗。

實現(xiàn)效果

拓展

移動地圖視角到搜索的點位上文章來源地址http://www.zghlxwxcb.cn/news/detail-519761.html

const location = res.data.data[0];//獲取數(shù)據(jù)第一條
const mapCtx = wx.createMapContext('map');//創(chuàng)建 map 上下文 MapContext 對象。
//將地圖中心移置當(dāng)前定位點，此時需設(shè)置地圖組件 show-location 為true。'2.8.0' 起支持將地圖中心移動到指定位置。
mapCtx.moveToLocation({
	//經(jīng)緯度
    latitude: location.latitude,
    longitude: location.longitude
});

到了這里，關(guān)于教你如何利用微信小程序高效地完成地圖點位標(biāo)注的文章就介紹完了。如果您還想了解更多內(nèi)容，請在右上角搜索TOY模板網(wǎng)以前的文章或繼續(xù)瀏覽下面的相關(guān)文章，希望大家以后多多支持TOY模板網(wǎng)！