功能：

????????1.地圖上標(biāo)點(diǎn)，點(diǎn)有內(nèi)容，點(diǎn)擊點(diǎn)后可以查看點(diǎn)的信息，詳情

? ? ? ? 2.點(diǎn)擊地圖生成點(diǎn)，點(diǎn)擊多個(gè)點(diǎn)后可以實(shí)現(xiàn)點(diǎn)連線功能

? ? ? ? 3.點(diǎn)擊按鈕后，可以把生成的點(diǎn)清空

? ? ? ? 4.衛(wèi)星地圖和默認(rèn)地圖切換功能

1.完整代碼+字段講解

1.latitude：緯度

2.enable-satellite：衛(wèi)星地圖切換

3.longitude：經(jīng)度

4.scale：縮放值

5.markers：標(biāo)點(diǎn)，可以設(shè)置點(diǎn)內(nèi)容，callout：點(diǎn)的文本框內(nèi)容設(shè)置

6.polygons：連線用的

7.@callouttap：點(diǎn)擊點(diǎn)上面的文本框可以彈出遮罩層和內(nèi)容

<template>
	<view class="content">
		<map :enable-satellite="isMap" style="width: 100%; height: 100vh;" :latitude="latitude" :longitude="longitude"
			:scale="scale" :markers="markers" :polygons="polygons" @tap="mapTap" @callouttap="onCallouttap">
			<view class="btnmap" @click="isMap=!isMap">{{isMap?'騰訊地圖':'衛(wèi)星地圖'}}</view>
			<!-- 覆蓋在原生組件的文本視圖 -->
			<!-- 遮罩層 -->
			<view v-if="popupShow" @click="popupShow=false" class="popup">
			</view>
			<view v-if="popupShow" class="deltail">
				彈層內(nèi)容
			</view>
			<view class="btnmap way" @click="wayall">路徑生成</view>
			<view class="btnmap close" @click="closeWayall">關(guān)閉路徑</view>
		</map>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				latitude: '30.482814',
				longitude: '114.41917',
				isMap: false,
				scale: "16",
				markers: [{
					id: 0,
					latitude: 30.482814,
					longitude: 114.41917,
					width: 25,
					height: 35,
					callout: { // 氣泡
						content: "標(biāo)題",
						// bgColor: "rgba(255,255,255,0.51)",
						color: "#F56C6C",
						fontSize: 12,
						padding: 5,
						display: "ALWAYS",
						borderColor: "#F56C6C",
					},
				}],
				popupShow: false,
				polygons: [{ // 路線
					strokeWidth: 1,
					strokeColor: '#67c23a',
					fillColor: '#1791fc66',
					dottedLine: false,
					arrowLine: false,
					level: "abovelabels",
					// 必須要有三個(gè)默認(rèn)屬性，并且值不能完全一致，不然報(bào)錯(cuò)
					points: [{
						latitude: 30.627291,
						longitude: 114.343762
					}, {
						latitude: 30.627292,
						longitude: 114.343763,
					}, {
						latitude: 30.627291,
						longitude: 114.343762
					}]
				}],
				option: [],
				id: 0
			}
		},
		onLoad() {},
		methods: {
			mapTap({
				detail: {
					latitude,
					longitude
				}
			}) {
				// this.popupShow = true
				this.option = {
					id: ++this.id,
					latitude: latitude,
					longitude: longitude,
					width: 25,
					height: 35,
					callout: {
						content: `點(diǎn)${this.id}`,
						color: "#F56C6C",
						fontSize: 12,
						padding: 5,
						display: "ALWAYS",
						borderColor: "#F56C6C",
					}
				}
				let arr=[]
				this.markers.push(this.option)
				this.markers.forEach(item => {
					arr.push({
						latitude: item.latitude,
						longitude: item.longitude
					})
				})
				this.option=arr;
				// console.log(this.polygons, '地圖畫(huà)線');
			},
			wayall() {
				// 點(diǎn)線面，如果不是面就不讓他生成
				if (this.option.length > 2) {
				this.polygons[0].points=[];
				this.polygons[0].points.push(...this.option)
				console.log(this.polygons,'得到的數(shù)值');
				}else{
					uni.showToast({
						title:"起碼選擇三個(gè)點(diǎn)",
						duration: 2000
					})
				}
			},
			change(){
				this.$refs.popup.close()
			},
			closeWayall(){
				this.polygons[0].points= [{
						latitude: 30.627291,
						longitude: 114.343762
					}, {
						latitude: 30.627292,
						longitude: 114.343763,
					}, {
						latitude: 30.627291,
						longitude: 114.343762
					}]
			},
			onCallouttap(event){
				console.log(event.detail.markerId,'獲取到點(diǎn)的id之后可以用點(diǎn)id去請(qǐng)求接口');
				this.popupShow=true
			}
		},
	
	}
</script>

<style lang="scss" scoped>
	.popup {
		width: 100%;
		height: 100vh;
		position: fixed;
		top: 0;
		left: 0;
		background: #000;
		opacity: 0.2;
		overflow: hidden;
		z-index: 1000;
		color: #fff;
	}

	.deltail {
		z-index: 10001;
		height: 300px;
		position: fixed;
		bottom: 0px;
		width: 100%;
		background-color: #fff;
	}

	.btnmap {
		position: fixed;
		top: 20px;
		right: 20px;
		width: 110px;
		height: 30px;
		color: #92bbea;
		text-align: center;
		line-height: 30px;
		border: 1px solid #92bbea;
		background-color: #fff;
	}

	.way {
		right: 140px;
	}
	.close{
		right: 260px;
	}
</style>

2.效果

?

?文章到此結(jié)束，希望對(duì)你有所幫助~文章來(lái)源地址http://www.zghlxwxcb.cn/news/detail-530555.html

到了這里，關(guān)于uniapp實(shí)現(xiàn)騰訊地圖定位，生成點(diǎn)，多點(diǎn)連線，清空點(diǎn)線，衛(wèi)星地圖等功能的文章就介紹完了。如果您還想了解更多內(nèi)容，請(qǐng)?jiān)谟疑辖撬阉鱐OY模板網(wǎng)以前的文章或繼續(xù)瀏覽下面的相關(guān)文章，希望大家以后多多支持TOY模板網(wǎng)！