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 中的地图功能，满足大多数应用场景需求。