uniapp构建微信小程序，有地图点，点击时进入导航页面。【伸手党福利】-Toy模板网

这篇具有很好参考价值的文章主要介绍了uniapp构建微信小程序，有地图点，点击时进入导航页面。【伸手党福利】。希望对大家有所帮助。如果存在错误或未考虑完全的地方，请大家不吝赐教，您也可以点击"举报违法"按钮提交疑问。

适用于微信小程序

（h5）目前无法显示红点，但是点击有反应，可以进入导航。
注意，slheader是自定义的标签，和本次内容无关

前期配置

uniapp构建微信小程序，有地图点，点击时进入导航页面。【伸手党福利】

本示例是展示店面的地址，点击红点可以打开地图并导航到该店面。

<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 {
// 地图中心的坐标点
				latitude: 37.444000, //纬度
				longitude: 118.668000, //经度
				address:'导航目的地名字（气泡地点）',
				scale: 16, //缩放级别
				bottomData: false,
				//可以定义多个坐标点
				marker: [{
						id: 0,
						latitude: 37.444000, //纬度
						longitude: 118.668000, //经度
						iconPath: '', //显示的图标        
						rotate: 0, // 旋转度数
						width: 20, //宽
						height: 30, //高
						//   title:'我在这里',//标注点名
						alpha: 0.5, //透明度
						callout: { //自定义标记点上方的气泡窗口 点击有效  
							content: '导航目的地名字（点击后腾讯/百度地图页面显示的名字）', //文本
							color: '#000', //文字颜色
							fontSize: 14, //文本大小
							borderRadius: 15, //边框圆角
							borderWidth: '10',
							// bgColor: '', //背景颜色
							display: 'ALWAYS', //常显
						},
					},
					// {
					// 	id: 1,
					// 	latitude: 23.106574, //纬度
					// 	longitude: 113.324587, //经度
					// 	iconPath: '', //显示的图标        
					// 	rotate: 0, // 旋转度数
					// 	width: 20, //宽
					// 	height: 30, //高
					// 	//  title:'我在这里',//标注点名
					// 	alpha: 0.5, //透明度
					// 	//      label:{//为标记点旁边增加标签   //因背景颜色H5不支持
					// 	//   color:'red',//文本颜色
					// 	//      },
					// 	callout: { //自定义标记点上方的气泡窗口 点击有效  
					// 		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: {
			//地图点击事件
			callouttap(e) {
				console.log('地图点击事件', e)
			},
			toMap() {
				console.log('地图标志物点击事件')
				uni.openLocation({
					latitude: Number(this.latitude), //要去的纬度-地址
					longitude: Number(this.longitude), //要去的经度-地址
					address: this.address, //要去的具体地址

				})
			},






		}
	}
</script>