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>