地理位置与地图（uni.getLocation、map 组件）

地理位置与地图在uni-app中的应用

uni-app提供了uni.getLocationAPI和map组件来实现地理位置相关功能。这些功能在现代移动应用中非常常见，比如外卖APP的定位、共享单车的附近车辆显示等。

uni.getLocation API详解

uni.getLocation是uni-app中获取设备当前位置的核心API。它支持获取经纬度、速度、高度等位置信息。

基本用法

uni.getLocation({
  type: 'wgs84',
  success: function (res) {
    console.log('当前位置的经度：' + res.longitude);
    console.log('当前位置的纬度：' + res.latitude);
  },
  fail: function (err) {
    console.error('获取位置失败：', err);
  }
});

参数说明

• type: 坐标类型
  • wgs84: 返回GPS坐标
  • gcj02: 返回国测局坐标
• altitude: 是否获取高度信息（默认false）
• geocode: 是否需要解析地址信息（默认false）
• highAccuracyExpireTime: 高精度定位超时时间(ms)

实际应用示例

// 获取当前位置并显示详细地址
getCurrentLocation() {
  uni.getLocation({
    type: 'gcj02',
    geocode: true,
    success: (res) => {
      this.longitude = res.longitude
      this.latitude = res.latitude
      this.address = res.address
      uni.showToast({
        title: '定位成功',
        icon: 'success'
      })
    },
    fail: (err) => {
      console.error(err)
      uni.showToast({
        title: '定位失败',
        icon: 'none'
      })
    }
  })
}

map组件使用指南

uni-app的map组件是基于各平台原生地图实现的，功能强大但需要注意平台差异。

基本属性

<map 
  id="myMap"
  :longitude="longitude"
  :latitude="latitude"
  scale="16"
  show-location
  markers="markers"
  @markertap="handleMarkerTap"
  style="width: 100%; height: 300px;">
</map>

常用属性详解

1. 基础定位属性

   • longitude: 中心经度
   • latitude: 中心纬度
   • scale: 缩放级别(3-20)

2. 控件显示

   • show-location: 显示带有方向的当前定位点
   • show-compass: 显示指南针
   • enable-zoom: 是否支持缩放
   • enable-scroll: 是否支持拖动

3. 覆盖物

   • markers: 标记点数组
   • polyline: 路线数组
   • circles: 圆形覆盖物
   • controls: 控件数组

markers标记点示例

data() {
  return {
    markers: [{
      id: 1,
      latitude: 39.90469,
      longitude: 116.40717,
      title: '北京市',
      iconPath: '/static/location.png',
      width: 30,
      height: 30,
      callout: {
        content: '北京市中心',
        color: '#ffffff',
        bgColor: '#007AFF',
        padding: 5,
        borderRadius: 4
      }
    }]
  }
}

地图交互与事件处理

map组件支持多种交互事件，可以实现丰富的用户体验。

常用事件

<map
  @tap="handleMapTap"
  @markertap="handleMarkerTap"
  @regionchange="handleRegionChange"
  @callouttap="handleCalloutTap">
</map>

事件处理示例

methods: {
  handleMapTap(e) {
    console.log('地图点击坐标：', e.detail)
    this.addMarker(e.detail.latitude, e.detail.longitude)
  },
  
  handleMarkerTap(e) {
    const markerId = e.markerId
    uni.showModal({
      title: this.markers[markerId].title,
      content: '您点击了这个标记点'
    })
  },
  
  addMarker(lat, lng) {
    const newMarker = {
      id: Date.now(),
      latitude: lat,
      longitude: lng,
      iconPath: '/static/marker.png'
    }
    this.markers.push(newMarker)
  }
}

高级地图功能实现

路线绘制

// 在data中定义polyline
polyline: [{
  points: [
    {latitude: 39.90469, longitude: 116.40717},
    {latitude: 39.91469, longitude: 116.41717}
  ],
  color: '#FF0000',
  width: 2,
  dottedLine: false
}]

圆形覆盖物

circles: [{
  latitude: 39.90469,
  longitude: 116.40717,
  color: '#FF0000AA',
  fillColor: '#00FF0055',
  radius: 500,
  strokeWidth: 1
}]

地图控件

controls: [{
  id: 1,
  iconPath: '/static/refresh.png',
  position: {
    left: 10,
    top: 10,
    width: 30,
    height: 30
  },
  clickable: true
}]

性能优化与注意事项

1. 地图性能优化

   • 避免频繁更新地图数据
   • 合理使用cover-view覆盖原生组件
   • 对于大量标记点考虑使用聚合标记

2. 常见问题

   • iOS平台需要配置定位权限描述
   • 安卓平台需要申请定位权限
   • 真机调试时注意https限制

// 检查定位权限示例
checkLocationPermission() {
  uni.authorize({
    scope: 'scope.userLocation',
    success: () => {
      this.getCurrentLocation()
    },
    fail: () => {
      uni.showModal({
        title: '提示',
        content: '需要获取您的位置信息',
        success: (res) => {
          if (res.confirm) {
            uni.openSetting()
          }
        }
      })
    }
  })
}

平台差异与兼容处理

不同平台的地图实现有差异，需要特别注意：

1. 微信小程序

   • 支持丰富的覆盖物类型
   • 需要配置合法域名
   • 支持map组件的同层渲染

2. H5平台

   • 基于浏览器Geolocation API
   • 需要https环境
   • 精度可能较低

3. App平台

   • 使用原生地图控件
   • 功能最全面
   • 需要配置权限

// 平台兼容代码示例
getMapProvider() {
  // #ifdef MP-WEIXIN
  return 'wx'
  // #endif
  
  // #ifdef H5
  return 'h5'
  // #endif
  
  // #ifdef APP-PLUS
  return 'native'
  // #endif
}

实际业务场景实现

场景1：附近商家显示

// 获取附近商家
getNearbyShops() {
  uni.getLocation({
    type: 'gcj02',
    success: (res) => {
      uni.request({
        url: 'https://api.example.com/nearby-shops',
        data: {
          lat: res.latitude,
          lng: res.longitude,
          radius: 1000 // 1公里范围内
        },
        success: (shopRes) => {
          this.shops = shopRes.data
          this.updateMapMarkers()
        }
      })
    }
  })
},

updateMapMarkers() {
  this.markers = this.shops.map(shop => ({
    id: shop.id,
    latitude: shop.location.lat,
    longitude: shop.location.lng,
    iconPath: '/static/shop.png',
    title: shop.name
  }))
}

场景2：轨迹记录

// 记录运动轨迹
startTracking() {
  this.trackPoints = []
  this.trackingInterval = setInterval(() => {
    uni.getLocation({
      type: 'wgs84',
      success: (res) => {
        this.trackPoints.push({
          latitude: res.latitude,
          longitude: res.longitude
        })
        this.updateTrackLine()
      }
    })
  }, 5000) // 每5秒记录一次
},

updateTrackLine() {
  this.polyline = [{
    points: this.trackPoints,
    color: '#0000FF',
    width: 4
  }]
},

stopTracking() {
  clearInterval(this.trackingInterval)
}

地图插件与扩展

uni-app生态中有许多地图相关插件可以增强功能：

1. 第三方地图插件

   • 高德地图插件
   • 百度地图插件
   • 腾讯地图插件

2. 功能扩展插件

   • 地图选点插件
   • 热力图插件
   • 3D地图插件

// 使用高德地图插件示例
const amap = require('@/common/amap-wx.js')
const myAmap = new amap.AMapWX({
  key: '您的高德地图key'
})

myAmap.getRegeo({
  location: `${longitude},${latitude}`,
  success: (data) => {
    console.log('逆地理编码结果:', data)
  }
})