Uniapp小程序实战之利用腾讯地图获取定位

简介

本文将详细介绍如何使用Uniapp和腾讯地图API获取用户的位置信息，包括如下内容：

1. 如何在Uniapp项目中引入腾讯地图API
2. 如何获取用户的地理位置信息

步骤

步骤一：引入腾讯地图API

在Uniapp项目中使用腾讯地图API需要在项目的 index.html 文件中添加如下代码：

<script src="https://map.qq.com/api/js?v=2.exp&key=YOUR_KEY"></script>

其中YOUR_KEY需要替换成你在腾讯地图开发者平台申请的应用密钥。

步骤二：创建地图实例

在Uniapp项目中，在需要使用地图的页面的 <template> 标签中添加一个 div 标签作为地图容器：

<template>
  <div class="map-container" id="map"></div>
</template>

然后在该页面的 script 标签中创建地图实例：

export default {
  mounted() {
    this.initMap()
  },
  methods: {
    initMap() {
      // 创建地图实例
      const map = new qq.maps.Map(document.getElementById("map"), {
        center: new qq.maps.LatLng(39.916527, 116.397128), // 默认地图中心点
        zoom: 14, // 默认缩放级别
      })
    },
  },
}

步骤三：获取用户位置信息

使用腾讯地图API获取用户位置信息需要调用 qq.maps.Geolocation 对象的 getLocation() 方法。在代码中添加如下代码：

export default {
  mounted() {
    this.initMap()
    this.getUserLocation()
  },
  methods: {
    async getUserLocation() {
      // 获取用户位置信息
      const geolocation = new qq.maps.Geolocation(YOUR_KEY, "MyLocation")
      const getPosition = () =>
        new Promise((resolve, reject) => {
          geolocation.getLocation(
            ({ lat, lng }) => resolve({ lat, lng }),
            ({ message }) => reject(message)
          )
        })
      try {
        const { lat, lng } = await getPosition()
        console.log(`用户位置：${lat},${lng}`)
      } catch (e) {
        console.error(e)
      }
    },
    initMap() {
      // 创建地图实例
      const map = new qq.maps.Map(document.getElementById("map"), {
        center: new qq.maps.LatLng(39.916527, 116.397128), // 默认地图中心点
        zoom: 14, // 默认缩放级别
      })
    },
  },
}

在调用 getPosition() 方法时通过 await 等待获取用户位置信息，如果获取成功，则输出经纬度信息到控制台，否则打印错误信息到控制台。

示例说明

示例一：显示用户位置信息

在地图上显示用户的位置信息，将获取到的经纬度传递给地图实例即可。修改 getUserLocation() 方法中的代码，添加如下代码：

async getUserLocation() {
  // 获取用户位置信息
  const geolocation = new qq.maps.Geolocation(YOUR_KEY, "MyLocation")
  const getPosition = () =>
    new Promise((resolve, reject) => {
      geolocation.getLocation(
        ({ lat, lng }) => resolve({ lat, lng }),
        ({ message }) => reject(message)
      )
    })
  try {
    const { lat, lng } = await getPosition()
    console.log(`用户位置：${lat},${lng}`)
    // 在地图上显示用户位置
    const center = new qq.maps.LatLng(lat, lng)
    const map = new qq.maps.Map(document.getElementById("map"), {
      center,
      zoom: 14,
    })
    const marker = new qq.maps.Marker({
      position: center,
      map,
    })
  } catch (e) {
    console.error(e)
  }
}

示例二：显示用户位置信息和周围的POI点

在地图上显示用户位置信息和周围的POI点，可以使用腾讯地图API的 qq.maps.places.SearchService 对象进行搜索。修改 getUserLocation() 方法中的代码，添加如下代码：

async getUserLocation() {
  // 获取用户位置信息
  const geolocation = new qq.maps.Geolocation(YOUR_KEY, "MyLocation")
  const getPosition = () =>
    new Promise((resolve, reject) => {
      geolocation.getLocation(
        ({ lat, lng }) => resolve({ lat, lng }),
        ({ message }) => reject(message)
      )
    })
  try {
    const { lat, lng } = await getPosition()
    console.log(`用户位置：${lat},${lng}`)
    // 在地图上显示用户位置和周围的POI点
    const center = new qq.maps.LatLng(lat, lng)
    const map = new qq.maps.Map(document.getElementById("map"), {
      center,
      zoom: 14,
    })
    const marker = new qq.maps.Marker({
      position: center,
      map,
    })
    // 搜索周围的POI点
    const searchService = new qq.maps.places.SearchService({
      location: center,
      // 搜索半径，单位为米
      radius: 1000,
    })
    searchService.search("附近的餐馆", (result) => {
      const pois = result.detail.pois
      pois.forEach(({ name, location }) => {
        const marker = new qq.maps.Marker({
          position,
          map,
        })
        const infowindow = new qq.maps.InfoWindow({
          map,
        })
        qq.maps.event.addListener(marker, "click", () => {
          infowindow.open()
          infowindow.setContent(name)
          infowindow.setPosition(position)
        })
      })
    })
  } catch (e) {
    console.error(e)
  }
}

在调用 searchService.search() 方法时传入搜索关键词和搜索半径，然后处理搜索结果并在地图上显示POI点的名称。