適用于微信小程序

（h5）目前無法顯示紅點(diǎn)，但是點(diǎn)擊有反應(yīng)，可以進(jìn)入導(dǎo)航。
注意，slheader是自定義的標(biāo)簽，和本次內(nèi)容無關(guān)

前期配置

本示例是展示店面的地址，點(diǎn)擊紅點(diǎn)可以打開地圖并導(dǎo)航到該店面。

<template>
	<view class="content">
		<slheader :ableexit="false" :ableback="true" title="店鋪位置" style="z-index: 999;"></slheader>
		<map style="width: 100%; height: 1500rpx; margin: 0;" :layer-style='5' :show-location='true' :latitude="latitude"
			:longitude="longitude" :markers="marker" :scale="scale" @markertap="toMap" @callouttap='callouttap'>
		</map>
	</view>
</template>

<script>
	export default {
		data() {
			return {
// 地圖中心的坐標(biāo)點(diǎn)
				latitude: 37.444000, //緯度
				longitude: 118.668000, //經(jīng)度
				address:'導(dǎo)航目的地名字（氣泡地點(diǎn)）',
				scale: 16, //縮放級(jí)別
				bottomData: false,
				//可以定義多個(gè)坐標(biāo)點(diǎn)
				marker: [{
						id: 0,
						latitude: 37.444000, //緯度
						longitude: 118.668000, //經(jīng)度
						iconPath: '', //顯示的圖標(biāo)        
						rotate: 0, // 旋轉(zhuǎn)度數(shù)
						width: 20, //寬
						height: 30, //高
						//   title:'我在這里',//標(biāo)注點(diǎn)名
						alpha: 0.5, //透明度
						callout: { //自定義標(biāo)記點(diǎn)上方的氣泡窗口 點(diǎn)擊有效  
							content: '導(dǎo)航目的地名字（點(diǎn)擊后騰訊/百度地圖頁面顯示的名字）', //文本
							color: '#000', //文字顏色
							fontSize: 14, //文本大小
							borderRadius: 15, //邊框圓角
							borderWidth: '10',
							// bgColor: '', //背景顏色
							display: 'ALWAYS', //常顯
						},
					},
					// {
					// 	id: 1,
					// 	latitude: 23.106574, //緯度
					// 	longitude: 113.324587, //經(jīng)度
					// 	iconPath: '', //顯示的圖標(biāo)        
					// 	rotate: 0, // 旋轉(zhuǎn)度數(shù)
					// 	width: 20, //寬
					// 	height: 30, //高
					// 	//  title:'我在這里',//標(biāo)注點(diǎn)名
					// 	alpha: 0.5, //透明度
					// 	//      label:{//為標(biāo)記點(diǎn)旁邊增加標(biāo)簽   //因背景顏色H5不支持
					// 	//   color:'red',//文本顏色
					// 	//      },
					// 	callout: { //自定義標(biāo)記點(diǎn)上方的氣泡窗口 點(diǎn)擊有效  
					// 		content: '廣州塔', //文本
					// 		color: '#ffffff', //文字顏色
					// 		fontSize: 14, //文本大小
					// 		borderRadius: 15, //邊框圓角
					// 		borderWidth: '10',
					// 		bgColor: '#e51860', //背景顏色
					// 		display: 'ALWAYS', //常顯
					// 	},
					// },
					
				],
			}
		},
		onLoad() {

		},
		computed: {
			mapheight() {
				let data = ''
				if (this.bottomData) {
					if (this.upTop) {
						data = '50px'
					} else {
						data = '200px'
					}
				} else {
					data = '90vh'
				}
				return data
			},
			coverbottom() {
				let data = ''
				if (this.bottomData) {
					data = '20rpx'
				} else {
					data = '100rpx'
				}
				return data
			}
		},
		methods: {
			//地圖點(diǎn)擊事件
			callouttap(e) {
				console.log('地圖點(diǎn)擊事件', e)
			},
			toMap() {
				console.log('地圖標(biāo)志物點(diǎn)擊事件')
				uni.openLocation({
					latitude: Number(this.latitude), //要去的緯度-地址
					longitude: Number(this.longitude), //要去的經(jīng)度-地址
					address: this.address, //要去的具體地址

				})
			},






		}
	}
</script>

注意：1. h5頁面目前沒有做優(yōu)化，只能點(diǎn)擊地圖進(jìn)入導(dǎo)航。

2. 小程序由于版本問題，此函數(shù)顯示氣泡有問題，我將氣泡顏色設(shè)置為無色，需要其它顏色請(qǐng)自行研究

3. 高度沒有做自適應(yīng)，時(shí)間問題，請(qǐng)自行修改

效果：（由于未授權(quán)，所以所有信息全部抹掉,若仍舊認(rèn)為有侵權(quán)行為，請(qǐng)聯(lián)系我刪除）

若需要在H5中瀏覽地圖

需要申請(qǐng)apikey
騰訊地圖的：
https://lbs.qq.com/
基本上注冊(cè)完一路下一步就行

然后再HbuilderX上配置上。

效果如圖

忠告：由于微信小程序的接口多變（懂得都懂）所以這種需要調(diào)用微信接口東西盡量少碰。

參考：

uniapp map開發(fā)文檔

uni-app中使用騰訊地圖

Uniapp，vue拉起地圖導(dǎo)航（微信小程序）

uniapp調(diào)用地圖并導(dǎo)航文章來源地址http://www.zghlxwxcb.cn/news/detail-484640.html

到了這里，關(guān)于uniapp構(gòu)建微信小程序，有地圖點(diǎn)，點(diǎn)擊時(shí)進(jìn)入導(dǎo)航頁面?！旧焓贮h福利】的文章就介紹完了。如果您還想了解更多內(nèi)容，請(qǐng)?jiān)谟疑辖撬阉鱐OY模板網(wǎng)以前的文章或繼續(xù)瀏覽下面的相關(guān)文章，希望大家以后多多支持TOY模板網(wǎng)！