uniapp 地图组件
uniapp 地图组件使用指南
uniapp 提供了 map 组件用于在应用中嵌入地图功能，支持展示地图、标记位置、路线规划等。以下是详细的使用方法和注意事项。
基础用法
在页面中添加 map 组件，设置基本属性：
<template>
<view>
<map
id="myMap"
:latitude="latitude"
:longitude="longitude"
:markers="markers"
style="width: 100%; height: 300px;">
</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/location.png'
}]
}
}
}
</script>属性说明
latitude和longitude：地图中心点的经纬度。markers：标记点数组，支持自定义图标、标题等。scale：地图缩放级别，默认为 16。show-location：是否显示用户当前位置。
交互功能
通过 @markertap 监听标记点点击事件：
<map
@markertap="handleMarkerTap"
:markers="markers">
</map>
<script>
export default {
methods: {
handleMarkerTap(e) {
console.log('标记点被点击', e.markerId)
}
}
}
</script>地图控件
添加控件（如指南针、缩放按钮）：
<map
:controls="controls"
@controltap="handleControlTap">
</map>
<script>
export default {
data() {
return {
controls: [{
id: 1,
position: { left: 10, top: 10 },
iconPath: '/static/compass.png',
clickable: true
}]
}
},
methods: {
handleControlTap(e) {
console.log('控件被点击', e.controlId)
}
}
}
</script>路线规划
调用 uni.getLocation 获取当前位置，结合地图组件实现路线规划：
uni.getLocation({
type: 'gcj02',
success: (res) => {
this.latitude = res.latitude
this.longitude = res.longitude
}
})注意事项
- 地图组件在部分平台上需要配置权限，例如高德地图或腾讯地图的 SDK 配置。
- 真机调试时需确保已申请相关定位权限。
markers和controls的数据变化需通过setData更新。
通过以上方法，可以快速实现 uniapp 中的地图功能，满足大多数应用场景需求。
