📃 获取位置信息及地图操作

uni-app 内置了 高德地图 的API调用。

获取当前位置

uni.getLocation({
  type: 'gcj02',
  success: res => {
    console.log(JSON.stringify(res));
    this.text = JSON.stringify(res)
  }
})

可选参数有：

• altitude：true|false，默认false，是否获取高度信息, App和头条小程序不支持
• type：默认为 wgs84 返回 gps 坐标，gcj02 返回国测局坐标，可用于 uni.openLocation 的坐标

success的回调参数：

• latitude 纬度，浮点数，范围为-90~90，负数表示南纬
• longitude 经度，浮点数，范围为-180~180，负数表示西经
• speed 速度，浮点数，单位m/s
• altitude 高度，单位 m
• accuracy 位置的精确度
• verticalAccuracy 垂直精度，单位 m（Android 无法获取，返回 0）
• horizontalAccuracy 水平精度，单位 m

选择地理位置

uni.chooseLocation({
  success: res => {
    console.log(JSON.stringify(res));
    this.text = JSON.stringify(res)
  }
})

选择之后执行成功回调，可获取如下参数：

• name 位置名称
• address 详细地址
• latitude 纬度，浮点数，范围为-90~90，负数表示南纬
• longitude 经度，浮点数，范围为-180~180，负数表示西经

获取并查看当前位置

使用 uni.openLocation 可根据传入的经纬度进行定位，如果使用 uni.getLocation 获取的位置，需要指定类型为 gcj02

uni.getLocation({
  type: 'gcj02', //返回可以用于uni.openLocation的经纬度
  success: res => {
    uni.openLocation({
      latitude: res.latitude,
      longitude: res.longitude,
      success: () => {
        console.log('success');
      }
    });
  }
});

uni.openLocation(OBJECT) 的参数可通过 uni.getLocation 获取到, 包括:

map 组件

以下示例, 通过获取当前位置, 在地图上标记当前位置

<template>
    <view>
    <button type="primary" @click="open">获取地理位置</button>
    <view>
      <map style="width: 100%; height: 300px;" :latitude="latitude" :longitude="longitude" :markers="covers"></map>
    </view>
    </view>
</template>
<script>
    export default {
        data() {
            return {
        latitude: 0,
        longitude: 0,
        covers: []
            }
        },
        methods: {
            open () {
        uni.getLocation({
          type: 'gcj02', //返回可以用于uni.openLocation的经纬度
          success: res => {
            this.latitude = res.latitude
            this.longitude = res.longitude
            this.covers = [{
              id: 0,
              latitude: res.latitude,
              longitude: res.longitude,
              iconPath: '../../../static/logo.png',
              callout: {
                content: '测试标记'
              }
            }]
          }
        });
      }
        }
    }
</script>

map 组件的属性

map 组件的事件

:::warning uni-app 只支持 gcj02 坐标 :::

标记点 markers

标记点用于在地图上显示标记的位置

marker 上的气泡 callout
点击标记点时, 会显示 callout, 可将 display 设为 ‘ALWAYS’ 一直显示

marker 上的气泡 label
显示在标记点下方的说明文本

折线标记 polyline

指定一系列坐标点，从数组第一项连线至最后一项

圆标记 circles

在地图上显示圆

地图控件 controls

在地图上显示控件，控件不随着地图移动

position

地图组件的经纬度必填，如果不填经纬度则默认值是北京的经纬度。

地图事件

点击事件 tap
当点击地图时触发, tap 事件返回类似如下形似的事件对象：

{
  "mp": {
    "type": "tap",
    "target": {
      "dataset": {
        "eventid": "72e81d87-2"
      },
      "id": "",
      "offsetTop": 92,
      "offsetLeft": 0
    },
    "currentTarget": {
      "dataset": {
        "eventid": "72e81d87-2"
      },
      "id": "",
      "offsetTop": 92,
      "offsetLeft": 0
    },
    "timeStamp": 1557387301964,
    "detail": {}
  },
  "type": "tap",
  "timeStamp": 1557387301964,
  "target": {
    "dataset": {
      "eventid": "72e81d87-2"
    },
    "id": "",
    "offsetTop": 92,
    "offsetLeft": 0
  },
  "detail": {},
  "currentTarget": {
    "dataset": {
      "eventid": "72e81d87-2"
    },
    "id": "",
    "offsetTop": 92,
    "offsetLeft": 0
  }
}

地图上下文

uni.createMapContext(mapId,this)

创建并返回 map 上下文 mapContext 对象。在自定义组件下，第二个参数传入组件实例this，以操作组件内 <map> 组件。

mapContext 对象的方法列表

getCenterLocation

获取当前地图中心的经纬度, 使用方式如下:

<template>
    <view>
    <button @click="getCenterLocation">getCenterLocation</button>
    <view>
      <map style="width: 100%; height: 300px;"
        id="map"
        :latitude="25"
        :longitude="102"
        :markers="covers"
      ></map>
    </view>
    </view>
</template>
<script>
    export default {
        data() {
            return {
        map: null
            }
        },
    mounted () {
      this.map = uni.createMapContext('map',this)
    },
        methods: {
      getCenterLocation () {
        this.map.getCenterLocation({
          success: (res) => {
            console.log(JSON.stringify(res));
          }
        })
      }
        }
    }
</script>

返回格式如下:

{"latitude":25.041660769305633,"longitude":102.70562234652215,"errMsg":"getMapCenterLocation:ok"}

getRegion

this.map.getRegion({
  success: (res) => {
    console.log(JSON.stringify(res));
  }
})

返回格式如下:

{"northeast":{"latitude":25.045561,"longitude":102.711284},"southwest":{"latitude":25.037752,"longitude":102.69997},"errMsg":"getMapRegion:ok"}

getScale

getScale () {
  this.map.getScale({
    success: (res) => {
      console.log(JSON.stringify(res));
    }
  })
}

返回格式如下:

{"scale":16,"errMsg":"getMapScale:ok"}

:::info 如果想在App端实现更多地图功能，可通过$getAppMap()获取原生地图对象plus.maps.Map :::

plus.maps.Map

参考资料

• DCloud 地图插件配置
• uni-app 获取地理位置
• uni-app 地图组件上下文
• uni-app map组件
• H5+ map
• 地图坐标转换（火星、谷歌、百度、腾讯、高德等坐标）
• 我的提问：部分机型开启定位权限后，wx.getLocation走fail回调
• 我的提问：wx.getLocation在同一个位置多次定位，获取到的经纬度不同
• 微信小程序开启地理位置授权+获取当前位置城市信息（对接高德API）
• 高德位置服务 - 逆地址解析
• 腾讯位置服务 - 逆地址解析