uniapp 地图导航 唤起导航 自定义图标 自定义提示泡泡_uniapp气泡提示

uniapp 地图导航

唤起导航
自定义图标
自定义提示泡泡

• 复制过去即可
  

<template>
	<view class="container">
		<!-- 此处为地图 -->
		<view class="map-common-mt"> 
		    <map :latitude="latitude" scale="12" :longitude="longitude" :markers="markers" show-location> </map>
		</view>
		<view class="address_box dfsb" @click="navigationTo()">
		     <view class="title ">
		     	<view class="tip">{{title}}</view>
				<view class="titleAddress">{{address}}</view>
		     </view> 
			<view class="iconmapText">导航<text class="iconfont icon-map"></text> </view>
		</view>
	</view>
</template>

<script>
export default {
	components: { },
	data() {
		return {
		// latitude: 22.545809,
		// longitude: 113.985274,
		address: '广东省深圳市南山区沙河街道星河街社区侨城西街1号',
		title: '深圳欢乐谷',
		scrollZ_index: false,  
		markers: [
		  	{
		  	address: '广东省深圳市南山区沙河街道星河街社区侨城西街',
		  	title: '深圳欢乐谷',
		  	id: 11,
		  	latitude: 22.545809,
		  	longitude: 113.985274,
		  	// iconPath: "/static/marker.png", //图标路径
		  	// width: 29,
		  	// height: 29,
		  	callout: { //marker气泡
		  	    content: '深圳欢乐谷',
		  	    color: "#fff",
		  	    bgColor: "rgba(15, 158, 250, 1)",
		  	    borderRadius: 10,
		  	    fontSize: 12,
		  	    textAlign: "center",
		  	    padding: 5,
		  	    display: 'ALWAYS',
		  	},
		  	},
		  ],
		}
	},
	onLoad(res) {
		this.latitude = res.latitude
		this.longitude = res.longitude
		this.address = res.address
		this.title = res.title 
		
		this.markers[0].latitude = res.latitude
		this.markers[0].longitude = res.longitude
		this.markers[0].address = res.address
		this.markers[0].title = res.title
		this.markers[0].callout.content = res.title
	},
	methods: {
            //点击跳转地图
            navigationTo() {   
                uni.openLocation({
                    latitude: this.latitude / 1,
                    longitude: this.longitude / 1,
                    name: this.title,
                    address: this.address,
                })
            },
	}
}
</script>

<style lang="scss" scoped> 
.map-common-mt{
	width: 100%;
	height: 100%; 
	box-shadow: 0 3px 20px 0 #D6D6D6; 
	border-radius: 4px; 
	map {
		width: 100%;
		height: 100vh; 
	}
}
.address_box{
	position: absolute;
	bottom: 0;
	width: 100%;
	right: 0;
	left: 0;
	height: 64px;
	// line-height: 44px;
	z-index: 111;
	background: #F5F5F5;
	padding: 0 15px; 
	.title{
		.tip{
			color: #2d2d2d;
			font-size: 14px;
			font-weight: bold;
			padding-bottom: 6px;
		}
	}
	.iconmapText{
		display: flex;
		color: rgba(15, 158, 250, 1);
		font-size: 15px;
		font-weight: bold;
		height: 24px;
		line-height: 24px;
		padding-right: 6px;
		.icon-map {
			color: rgba(15, 158, 250, 1);
			font-size: 20px;
		}
	}
}
</style>

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122