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>