uni-app 地圖全解析+事件監聽

最近找到了一篇uni-app的地圖解決方案精品文章，這里分享給大家，希望對大家有所幫助

轉載地址：https://blog.csdn.net/cplvfx/article/details/111447466

前置條件：你需要閱讀

https://uniapp.dcloud.io/component/map

先看圖

 

事件監聽-屬性說明

這個表也是官方的

標紅的是我用到的

使用

html

我這里用了“@markertap”點擊標記點時觸發事件， “@tap”點擊地圖時觸發事件。

<template>
	<view class="content">
 
		<view class="text-area">
			<text class="title">{{title}}</text>
		</view>
		<view class="page-body">
			<view class="page-section page-section-gap map" style="width: 100%; height: 900rpx;">
				<map style="width: 100%; height: 100%;" scale='15' :latitude="latitude" :longitude="longitude" :markers="covers" @markertap="markertap" @tap="tap" @updated="updated">
				</map>
			</view>
		</view>
	</view>
</template>

js

 <script>
	export default {
		data() {
			return {
				title: '百度地圖',
				latitude: 34.7586,
				longitude: 113.672307,
				covers: [] //標記點地圖數據
			}
		},
		onLoad() {
			this.init();
		},
		methods: {
			init() {
				let that = this;
				console.log("init()")
				//發起網絡請求獲取數據
				//用uni.request(OBJECT)方法
				//我這里模擬下數據
				var data = [{
					id: 1,
					name: '雷軍',
					imgUrl:'../../static/user.png',
					lat: "34.7586",
					lng: "113.672307"
				},{
					id: 2,
					name: '李彥宏',
					imgUrl:'../../static/user.png',
					lat: "34.763466",
					lng: "113.686285"
				},{
					id: 3,
					name: '馬化騰',
					imgUrl:'../../static/user.png',
					lat: "34.763412",
					lng: "113.680185"
				}, ];
				that.MapData(that,data)
			},
			//地圖數據初始化
			MapData(that, data) {
				console.log(data.length)
				console.log(data)
				let arrayData = [];
				for (var i = 0; i < data.length; i++) {
					arrayData.push({
						id: data[i].id, //marker點擊事件回調會返回此id。建議為每個marker設置上Number類型id，保證更新marker時有更好的性能。
						latitude: data[i].lat, //緯度
						longitude: data[i].lng, //經度
						title: data[i].name, //點擊時顯示，callout存在時將被忽略
						iconPath:data[i].imgUrl, //項目目錄下的圖片路徑，支持相對路徑寫法，以'/'開頭則表示相對小程序根目錄；也支持臨時路徑
						width: 60,
						height: 60,
						callout: {
							//自定義標記點上方的氣泡窗口
							content: data[i].name,
							color: '', //文本顏色
							fontSize: 16, //文字大小
							borderRadius: 20, //callout邊框圓角
							bgColor: '', //背景色
							padding: 6, //文本邊緣留白
							display: 'BYCLICK', //'BYCLICK':點擊顯示; 'ALWAYS':常顯
							textAlign: 'left', //文本對齊方式。有效值: left, right, center
						},
						label: {
							//為標記點旁邊增加標簽
							content: '', //標記點旁邊的文字
							color: '#ff6600', //文本顏色
							fontSize: 16, //文字大小
							x: 0, //label的坐標，原點是 marker 對應的經緯度
							y: 0, //label的坐標，原點是 marker 對應的經緯度
							borderWidth: 1, //邊框寬度
							borderColor: '', //邊框顏色
							borderRadius: 10, //邊框圓角
							bgColor: 'red',
							padding: 6, //	文本邊緣留白
							textAlign: 'left', //文本對齊方式。有效值: left, right, center
						},
						anchor: {
							//經緯度在標注圖標的錨點，默認底邊中點      {x, y}，x表示橫向(0-1)，y表示豎向(0-1)。{x: .5, y: 1} 表示底邊中點
							x: .5,
							y: 1
						}
					});
				}
				console.log(arrayData.length)
				console.log(arrayData)
				//重新給地圖數據賦值covers 
				that.covers = arrayData;
			},
			//地圖點擊事件
			markertap(e) {
				console.log("===你點擊了標記點===")
				console.log("你點擊的標記點ID是:" + e.detail.markerId)
				//console.log(e)
			},
			//點擊地圖時觸發; App-nuve、微信小程序2.9支持返回經緯度
			tap(e){
				console.log("===你點擊了地圖點===")
				console.log(e) 
			},
			//在地圖渲染更新完成時觸發
			updated(e){
				console.log("===在地圖渲染更新完成時觸發===")
				console.log(e) 
			}
		}
	}
</script>

說明：

其中標記點圖片為什么是圓形的在你的項目跟目錄找到App.vue,放入下面代碼

<style>
	/*每個頁面公共css */
	img.csssprite { 
		border-radius: 50px !important;
		border: 1px #c7c7c7 solid !important;
	}
</style>

如果對您有所幫助，歡迎您點個關注，我會定時更新技術文檔，大家一起討論學習，一起進步。