You can not select more than 25 topics
Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
168 lines
3.1 KiB
168 lines
3.1 KiB
<template>
|
|
<view class="map-card">
|
|
<!-- 地图区域 -->
|
|
<view class="map-container">
|
|
<map
|
|
:latitude="latitude"
|
|
:longitude="longitude"
|
|
:markers="markers"
|
|
:show-location="false"
|
|
:enable-zoom="false"
|
|
:enable-scroll="false"
|
|
:enable-rotate="false"
|
|
:enable-overlooking="false"
|
|
:enable-traffic="false"
|
|
class="map"
|
|
@tap="onMapTap"
|
|
></map>
|
|
</view>
|
|
|
|
<!-- 地址信息区域 -->
|
|
<view class="address-container">
|
|
<view class="address-name">{{ addressName }}</view>
|
|
<view class="address-detail" v-if="addressDetail">{{ addressDetail }}</view>
|
|
</view>
|
|
</view>
|
|
</template>
|
|
|
|
<script>
|
|
export default {
|
|
name: 'MapCard',
|
|
props: {
|
|
// 纬度
|
|
latitude: {
|
|
type: [Number, String],
|
|
required: true,
|
|
default: 39.908823
|
|
},
|
|
// 经度
|
|
longitude: {
|
|
type: [Number, String],
|
|
required: true,
|
|
default: 116.397470
|
|
},
|
|
// 地址名称
|
|
addressName: {
|
|
type: String,
|
|
required: true,
|
|
default: '位置信息'
|
|
},
|
|
// 地址详情（可选）
|
|
addressDetail: {
|
|
type: String,
|
|
default: ''
|
|
},
|
|
// 地图高度
|
|
mapHeight: {
|
|
type: [Number, String],
|
|
default: 300
|
|
},
|
|
// 是否可点击
|
|
clickable: {
|
|
type: Boolean,
|
|
default: true
|
|
}
|
|
},
|
|
computed: {
|
|
// 地图标记点
|
|
markers() {
|
|
return [{
|
|
id: 1,
|
|
latitude: Number(this.latitude),
|
|
longitude: Number(this.longitude),
|
|
iconPath: '/static/image/location-marker.svg',
|
|
width: 30,
|
|
height: 30,
|
|
callout: {
|
|
content: this.addressName,
|
|
color: '#333333',
|
|
fontSize: 12,
|
|
borderRadius: 4,
|
|
bgColor: '#ffffff',
|
|
padding: 8,
|
|
display: 'ALWAYS'
|
|
}
|
|
}]
|
|
}
|
|
},
|
|
methods: {
|
|
// 地图点击事件
|
|
onMapTap() {
|
|
if (this.clickable) {
|
|
this.$emit('mapClick', {
|
|
latitude: this.latitude,
|
|
longitude: this.longitude,
|
|
addressName: this.addressName
|
|
});
|
|
|
|
// 打开地图导航
|
|
this.openLocation();
|
|
}
|
|
},
|
|
|
|
// 打开地图导航
|
|
openLocation() {
|
|
uni.openLocation({
|
|
latitude: Number(this.latitude),
|
|
longitude: Number(this.longitude),
|
|
name: this.addressName,
|
|
address: this.addressDetail || this.addressName,
|
|
success: () => {
|
|
console.log('打开地图成功');
|
|
},
|
|
fail: (err) => {
|
|
console.error('打开地图失败:', err);
|
|
uni.showToast({
|
|
title: '打开地图失败',
|
|
icon: 'none'
|
|
});
|
|
}
|
|
});
|
|
}
|
|
}
|
|
}
|
|
</script>
|
|
|
|
<style lang="scss" scoped>
|
|
.map-card {
|
|
background: $uni-bg-color;
|
|
border-radius: $uni-border-radius-lg;
|
|
overflow: hidden;
|
|
box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
|
|
margin: $uni-spacing-row-base;
|
|
}
|
|
|
|
.map-container {
|
|
position: relative;
|
|
height: 300rpx;
|
|
|
|
.map {
|
|
width: 100%;
|
|
height: 100%;
|
|
}
|
|
}
|
|
|
|
.address-container {
|
|
padding: $uni-spacing-row-lg $uni-spacing-row-base;
|
|
background: $uni-bg-color;
|
|
|
|
.address-name {
|
|
font-size: $uni-font-size-lg;
|
|
color: $uni-text-color;
|
|
font-weight: 500;
|
|
margin-bottom: $uni-spacing-col-sm;
|
|
line-height: 1.4;
|
|
}
|
|
|
|
.address-detail {
|
|
font-size: $uni-font-size-sm;
|
|
color: $uni-text-color-grey;
|
|
line-height: 1.4;
|
|
}
|
|
}
|
|
|
|
// 点击态效果
|
|
.map-card:active {
|
|
background: $uni-bg-color-hover;
|
|
}
|
|
</style>
|