自定义地图选择位置：Uniapp踩坑笔记

2023-08-31 14:17:08

Uniapp 畅游地图世界：微信小程序地图选择位置攻略

前言

地图在我们的日常生活中扮演着至关重要的角色，让我们了解世界并与之互动。随着技术的发展，地图功能也逐渐融入到了我们的移动应用中。Uniapp作为跨平台应用开发框架，自然也支持地图功能。本文将带领你领略 Uniapp 中微信小程序地图选择位置的奥妙。

准备工作

踏上地图征程之前，我们需做好一些准备：

安装 Uniapp 项目： 按照 Uniapp 官方文档进行安装和初始化。
安装地图组件： 在项目根目录的 package.json 文件中添加依赖：

{
  "dependencies": {
    "uniapp-map": "^3.0.0"
  }
}

配置腾讯地图 API： 在 manifest.json 文件中添加如下配置：

{
  "uniappManifest": {
    "subPackages": [{
      "root": "map",
      "pages": [{
        "path": "map",
        "style": {}
      }]
    }],
    "usingComponents": {
      "wx-map": "map/wx-map"
    }
  }
}

实现地图选择位置

1. 创建页面并添加地图组件

在 Uniapp 项目中创建新页面，并在页面模板中添加以下代码：

<template>
  <view>
    <wx-map scale="16" latitude="39.90403" longitude="116.40752" markers="{{markers}}" bind:markertap="markerTap"></wx-map>
  </view>
</template>

scale： 设置地图缩放级别（3-19）
latitude 和 longitude： 设置地图中心点经纬度
markers： 设置地图标记点
bind:markertap： 绑定标记点点击事件

2. 逻辑脚本

在页面逻辑脚本中添加以下代码：

export default {
  data() {
    return {
      markers: [{
        id: 0,
        latitude: 39.90403,
        longitude: 116.40752,
        title: '北京天安门',
        description: '故宫博物院'
      }]
    };
  },
  methods: {
    markerTap(e) {
      console.log(e.detail.markerId);
    }
  }
};

markers： 添加标记点信息
markerTap： 处理标记点点击事件

支持卫星图

要启用卫星图，请在地图组件的 mode 属性中设置为 satellite ：

<wx-map scale="16" latitude="39.90403" longitude="116.40752" mode="satellite" markers="{{markers}}" bind:markertap="markerTap"></wx-map>

经纬度转地址

要将经纬度转换成地址，可以使用腾讯地图 API 的逆地址解析功能：

wx.getLocation({
  type: 'gcj02',
  success: (res) => {
    const latitude = res.latitude;
    const longitude = res.longitude;
    wx.request({
      url: 'https://apis.map.qq.com/ws/geocoder/v1/?location=' + latitude + ',' + longitude + '&key=YOUR_KEY',
      success: (res) => {
        console.log(res.data.result.address);
      }
    });
  }
});

地址搜索列表

要显示地址搜索列表，可以使用腾讯地图 API 的地址搜索功能：

wx.request({
  url: 'https://apis.map.qq.com/ws/place/v1/suggestion/?keyword=' + keyword + '&key=YOUR_KEY',
  success: (res) => {
    this.setData({
      addressList: res.data.data
    });
  }
});

拖动地图提示位置

要拖动地图并提示位置，可以使用 wx.chooseLocation 方法：

wx.chooseLocation({
  success: (res) => {
    const latitude = res.latitude;
    const longitude = res.longitude;
    const address = res.address;
    this.setData({
      latitude: latitude,
      longitude: longitude,
      address: address
    });
  }
});