85 lines
1.6 KiB
Vue
85 lines
1.6 KiB
Vue
<template>
|
|
<view class="map-container">
|
|
<map style="width: 100%; height: 100%;" :latitude="latitude" :longitude="longitude" :markers="markers"
|
|
:custom-map-style="customMapStyle" :enable-custom="true">
|
|
</map>
|
|
<!-- 加载提示 -->
|
|
<view v-if="loading" class="loading-mask">
|
|
<view class="loading-content">地图加载中...</view>
|
|
</view>
|
|
</view>
|
|
</template>
|
|
|
|
<script>
|
|
export default {
|
|
data() {
|
|
return {
|
|
loading: true, // 默认显示加载提示
|
|
latitude: 30.592,
|
|
longitude: 114.305,
|
|
customMapStyle: '8c3efc37298895fd78e6aa0e799e78ce',
|
|
markers: [{
|
|
id: 1,
|
|
latitude: 30.507,
|
|
longitude: 114.404,
|
|
title: '华中科技大学'
|
|
}, {
|
|
id: 2,
|
|
latitude: 30.476,
|
|
longitude: 114.428,
|
|
title: '光谷金融港'
|
|
}, {
|
|
id: 3,
|
|
latitude: 30.504,
|
|
longitude: 114.433,
|
|
title: '武汉东站'
|
|
}]
|
|
}
|
|
},
|
|
onLoad() {
|
|
// 尝试获取当前位置
|
|
uni.getLocation({
|
|
type: 'gcj02',
|
|
success: (res) => {
|
|
this.latitude = res.latitude;
|
|
this.longitude = res.longitude;
|
|
}
|
|
});
|
|
},
|
|
onReady() {
|
|
// 页面初次渲染完成时，隐藏加载提示
|
|
this.loading = false;
|
|
}
|
|
}
|
|
</script>
|
|
|
|
<style>
|
|
.map-container {
|
|
width: 100%;
|
|
height: 100vh;
|
|
position: relative;
|
|
}
|
|
|
|
/* 加载提示 */
|
|
.loading-mask {
|
|
position: absolute;
|
|
top: 0;
|
|
left: 0;
|
|
width: 100%;
|
|
height: 100%;
|
|
background: #121212;
|
|
display: flex;
|
|
justify-content: center;
|
|
align-items: center;
|
|
z-index: 999;
|
|
}
|
|
|
|
.loading-content {
|
|
color: rgba(255, 255, 255, 0.9);
|
|
font-size: 16px;
|
|
padding: 12px 24px;
|
|
background: rgba(0, 0, 0, 0.7);
|
|
border-radius: 8px;
|
|
}
|
|
</style>
|