位置与地图API

介绍

在小程序开发中，位置与地图API是非常常用的功能。它们允许开发者获取用户的地理位置信息，并在小程序中显示地图、标记位置、绘制路线等。这些功能可以广泛应用于导航、位置分享、附近服务等场景。

本文将逐步介绍如何使用小程序的位置与地图API，并通过实际案例展示其应用。

获取用户位置

小程序提供了 wx.getLocation API 来获取用户的当前位置。该API可以返回用户的经纬度、速度、高度等信息。

代码示例

javascript

wx.getLocation({
  type: 'wgs84',
  success(res) {
    const latitude = res.latitude
    const longitude = res.longitude
    console.log(`纬度: ${latitude}, 经度: ${longitude}`)
  },
  fail(err) {
    console.error('获取位置失败', err)
  }
})

输入与输出

• 输入: 无
• 输出:
  • latitude: 纬度
  • longitude: 经度
  • speed: 速度（米/秒）
  • accuracy: 位置的精确度（米）
  • altitude: 高度（米）

备注

注意：wx.getLocation 需要用户授权，开发者需要在 app.json 中声明 scope.userLocation 权限。

显示地图

小程序提供了 map 组件来显示地图。开发者可以通过设置 latitude 和 longitude 属性来指定地图的中心位置。

代码示例

html

<map
  id="myMap"
  latitude="{{latitude}}"
  longitude="{{longitude}}"
  markers="{{markers}}"
  style="width: 100%; height: 300px;">
</map>

javascript

Page({
  data: {
    latitude: 39.90469,
    longitude: 116.40717,
    markers: [{
      id: 1,
      latitude: 39.90469,
      longitude: 116.40717,
      name: '北京'
    }]
  }
})

输入与输出

• 输入:
  • latitude: 地图中心纬度
  • longitude: 地图中心经度
  • markers: 地图标记点数组
• 输出: 显示指定位置的地图，并在地图上标记指定点。

地图标记与路线绘制

除了显示地图，开发者还可以在地图上添加标记点（markers）和绘制路线（polyline）。

代码示例

html

<map
  id="myMap"
  latitude="{{latitude}}"
  longitude="{{longitude}}"
  markers="{{markers}}"
  polyline="{{polyline}}"
  style="width: 100%; height: 300px;">
</map>

javascript

Page({
  data: {
    latitude: 39.90469,
    longitude: 116.40717,
    markers: [{
      id: 1,
      latitude: 39.90469,
      longitude: 116.40717,
      name: '北京'
    }],
    polyline: [{
      points: [
        {latitude: 39.90469, longitude: 116.40717},
        {latitude: 31.23037, longitude: 121.47370}
      ],
      color: '#FF0000',
      width: 2,
      dottedLine: true
    }]
  }
})

输入与输出

• 输入:
  • markers: 标记点数组
  • polyline: 路线数组
• 输出: 在地图上显示标记点和路线。

实际案例：附近餐厅导航

假设我们要开发一个附近餐厅导航的小程序，用户可以通过该小程序查看附近的餐厅，并导航到指定餐厅。

实现步骤

1. 获取用户当前位置。
2. 根据用户位置查询附近的餐厅。
3. 在地图上显示餐厅位置。
4. 提供导航功能，绘制从用户当前位置到餐厅的路线。

代码示例

javascript

Page({
  data: {
    latitude: 0,
    longitude: 0,
    markers: [],
    polyline: []
  },
  onLoad() {
    this.getUserLocation()
  },
  getUserLocation() {
    wx.getLocation({
      type: 'wgs84',
      success: (res) => {
        this.setData({
          latitude: res.latitude,
          longitude: res.longitude
        })
        this.getNearbyRestaurants(res.latitude, res.longitude)
      }
    })
  },
  getNearbyRestaurants(latitude, longitude) {
    // 模拟获取附近餐厅数据
    const restaurants = [
      {id: 1, latitude: 39.90469, longitude: 116.40717, name: '餐厅A'},
      {id: 2, latitude: 39.90869, longitude: 116.40717, name: '餐厅B'}
    ]
    this.setData({
      markers: restaurants
    })
  },
  navigateToRestaurant(e) {
    const restaurant = e.currentTarget.dataset.restaurant
    this.setData({
      polyline: [{
        points: [
          {latitude: this.data.latitude, longitude: this.data.longitude},
          {latitude: restaurant.latitude, longitude: restaurant.longitude}
        ],
        color: '#FF0000',
        width: 2,
        dottedLine: true
      }]
    })
  }
})

输入与输出

• 输入: 用户点击餐厅标记点
• 输出: 在地图上绘制从用户当前位置到餐厅的路线

总结

通过本文，我们学习了如何使用小程序的位置与地图API来获取用户位置、显示地图、添加标记点以及绘制路线。这些功能可以广泛应用于导航、位置分享、附近服务等场景。

附加资源与练习

• 练习: 尝试在小程序中实现一个简单的导航功能，用户可以输入目的地，并在地图上显示从当前位置到目的地的路线。
• 资源:
  • 小程序官方文档 - 位置API
  • 小程序官方文档 - 地图组件