mirror of
https://github.com/ialley-workshop-open/uni-halo.git
synced 2026-09-13 00:50:40 +08:00
refactor: 架构升级
This commit is contained in:
小莫唐尼
@@ -0,0 +1,326 @@
|
||||
# map 组件示例
|
||||
|
||||
## 官方文档
|
||||
|
||||
参考官方文档：https://uniapp.dcloud.net.cn/component/map.html
|
||||
|
||||
## 概述
|
||||
|
||||
`map` 是地图组件，用于显示地图和标记位置。
|
||||
|
||||
## 基础用法
|
||||
|
||||
```vue
|
||||
<template>
|
||||
<map
|
||||
:latitude="latitude"
|
||||
:longitude="longitude"
|
||||
:markers="markers"
|
||||
></map>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
export default {
|
||||
data() {
|
||||
return {
|
||||
latitude: 39.908823,
|
||||
longitude: 116.397470,
|
||||
markers: [{
|
||||
id: 1,
|
||||
latitude: 39.908823,
|
||||
longitude: 116.397470,
|
||||
title: '天安门'
|
||||
}]
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
```
|
||||
|
||||
## 完整示例
|
||||
|
||||
### 示例 1: 基本地图
|
||||
|
||||
```vue
|
||||
<template>
|
||||
<view class="container">
|
||||
<map
|
||||
:latitude="latitude"
|
||||
:longitude="longitude"
|
||||
:scale="scale"
|
||||
class="map"
|
||||
></map>
|
||||
</view>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
export default {
|
||||
data() {
|
||||
return {
|
||||
latitude: 39.908823,
|
||||
longitude: 116.397470,
|
||||
scale: 16
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<style>
|
||||
.map {
|
||||
width: 100%;
|
||||
height: 500px;
|
||||
}
|
||||
</style>
|
||||
```
|
||||
|
||||
### 示例 2: 地图标记
|
||||
|
||||
```vue
|
||||
<template>
|
||||
<view class="container">
|
||||
<map
|
||||
:latitude="latitude"
|
||||
:longitude="longitude"
|
||||
:markers="markers"
|
||||
:show-location="true"
|
||||
class="map"
|
||||
@markertap="handleMarkerTap"
|
||||
></map>
|
||||
</view>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
export default {
|
||||
data() {
|
||||
return {
|
||||
latitude: 39.908823,
|
||||
longitude: 116.397470,
|
||||
markers: [
|
||||
{
|
||||
id: 1,
|
||||
latitude: 39.908823,
|
||||
longitude: 116.397470,
|
||||
title: '天安门',
|
||||
iconPath: '/static/marker.png',
|
||||
width: 30,
|
||||
height: 30
|
||||
},
|
||||
{
|
||||
id: 2,
|
||||
latitude: 39.918823,
|
||||
longitude: 116.407470,
|
||||
title: '故宫',
|
||||
iconPath: '/static/marker.png',
|
||||
width: 30,
|
||||
height: 30
|
||||
}
|
||||
]
|
||||
}
|
||||
},
|
||||
methods: {
|
||||
handleMarkerTap(e) {
|
||||
const markerId = e.detail.markerId
|
||||
const marker = this.markers.find(m => m.id === markerId)
|
||||
if (marker) {
|
||||
uni.showToast({
|
||||
title: marker.title,
|
||||
icon: 'none'
|
||||
})
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
```
|
||||
|
||||
### 示例 3: 显示当前位置
|
||||
|
||||
```vue
|
||||
<template>
|
||||
<view class="container">
|
||||
<map
|
||||
:latitude="latitude"
|
||||
:longitude="longitude"
|
||||
:show-location="true"
|
||||
:enable-zoom="true"
|
||||
class="map"
|
||||
></map>
|
||||
<button @click="getCurrentLocation">获取当前位置</button>
|
||||
</view>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
export default {
|
||||
data() {
|
||||
return {
|
||||
latitude: 39.908823,
|
||||
longitude: 116.397470
|
||||
}
|
||||
},
|
||||
onLoad() {
|
||||
this.getCurrentLocation()
|
||||
},
|
||||
methods: {
|
||||
getCurrentLocation() {
|
||||
uni.getLocation({
|
||||
type: 'gcj02',
|
||||
success: (res) => {
|
||||
this.latitude = res.latitude
|
||||
this.longitude = res.longitude
|
||||
},
|
||||
fail: () => {
|
||||
uni.showToast({
|
||||
title: '获取位置失败',
|
||||
icon: 'none'
|
||||
})
|
||||
}
|
||||
})
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
```
|
||||
|
||||
### 示例 4: 地图控件
|
||||
|
||||
```vue
|
||||
<template>
|
||||
<view class="container">
|
||||
<map
|
||||
:latitude="latitude"
|
||||
:longitude="longitude"
|
||||
:controls="controls"
|
||||
:show-location="true"
|
||||
class="map"
|
||||
@controltap="handleControlTap"
|
||||
></map>
|
||||
</view>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
export default {
|
||||
data() {
|
||||
return {
|
||||
latitude: 39.908823,
|
||||
longitude: 116.397470,
|
||||
controls: [
|
||||
{
|
||||
id: 1,
|
||||
iconPath: '/static/location.png',
|
||||
position: {
|
||||
left: 10,
|
||||
top: 10,
|
||||
width: 30,
|
||||
height: 30
|
||||
},
|
||||
clickable: true
|
||||
}
|
||||
]
|
||||
}
|
||||
},
|
||||
methods: {
|
||||
handleControlTap(e) {
|
||||
const controlId = e.detail.controlId
|
||||
if (controlId === 1) {
|
||||
this.getCurrentLocation()
|
||||
}
|
||||
},
|
||||
getCurrentLocation() {
|
||||
uni.getLocation({
|
||||
type: 'gcj02',
|
||||
success: (res) => {
|
||||
this.latitude = res.latitude
|
||||
this.longitude = res.longitude
|
||||
}
|
||||
})
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
```
|
||||
|
||||
### 示例 5: 地图事件
|
||||
|
||||
```vue
|
||||
<template>
|
||||
<view class="container">
|
||||
<map
|
||||
:latitude="latitude"
|
||||
:longitude="longitude"
|
||||
:markers="markers"
|
||||
class="map"
|
||||
@tap="handleMapTap"
|
||||
@regionchange="handleRegionChange"
|
||||
@updated="handleMapUpdated"
|
||||
></map>
|
||||
</view>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
export default {
|
||||
data() {
|
||||
return {
|
||||
latitude: 39.908823,
|
||||
longitude: 116.397470,
|
||||
markers: []
|
||||
}
|
||||
},
|
||||
methods: {
|
||||
handleMapTap(e) {
|
||||
console.log('地图点击', e.detail)
|
||||
// 添加标记
|
||||
const newMarker = {
|
||||
id: Date.now(),
|
||||
latitude: e.detail.latitude,
|
||||
longitude: e.detail.longitude,
|
||||
title: '新位置'
|
||||
}
|
||||
this.markers.push(newMarker)
|
||||
},
|
||||
handleRegionChange(e) {
|
||||
console.log('地图区域变化', e.detail)
|
||||
},
|
||||
handleMapUpdated() {
|
||||
console.log('地图更新完成')
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
```
|
||||
|
||||
## 属性说明
|
||||
|
||||
| 属性名 | 类型 | 默认值 | 说明 |
|
||||
|--------|------|--------|------|
|
||||
| latitude | Number | - | 中心纬度 |
|
||||
| longitude | Number | - | 中心经度 |
|
||||
| scale | Number | 16 | 缩放级别，取值范围为 5-18 |
|
||||
| markers | Array | [] | 标记点 |
|
||||
| show-location | Boolean | false | 显示带有方向的当前定位点 |
|
||||
| controls | Array | [] | 控件 |
|
||||
|
||||
## 平台兼容性
|
||||
|
||||
| 平台 | 支持情况 |
|
||||
|------|---------|
|
||||
| H5 | ✅ |
|
||||
| 微信小程序 | ✅ |
|
||||
| 支付宝小程序 | ✅ |
|
||||
| 百度小程序 | ✅ |
|
||||
| 字节跳动小程序 | ✅ |
|
||||
| QQ 小程序 | ✅ |
|
||||
| 快手小程序 | ✅ |
|
||||
| App | ✅ |
|
||||
| 快应用 | ✅ |
|
||||
|
||||
## 注意事项
|
||||
|
||||
1. 需要使用 `gcj02` 类型的坐标
|
||||
2. `markers` 数组中的每个标记需要唯一 `id`
|
||||
3. `show-location` 可以显示当前位置
|
||||
4. 可以通过事件监听地图交互
|
||||
|
||||
## 参考资源
|
||||
|
||||
- **官方文档**: https://uniapp.dcloud.net.cn/component/map.html
|
||||
- **获取位置**: https://uniapp.dcloud.net.cn/api/location/location.html#getlocation
|
||||
Reference in New Issue
Block a user