微信小程序，高德地图

微信小程序使用高德地图

效果图预览

高德内操作

• 高德开放平台：

  • 注册账号(https://lbs.amap.com/)

  • 去高德地图平台申请小程序应用的 key
    

  • 应用管理(https://console.amap.com/dev/key/app) -> 我的应用 -> 创建新应用

    • 生成的 key 即可用在程序中
      

• 下载相关 sdk 文件，导入 amap-wx.js 到项目中：https://lbs.amap.com/api/wx/download

小程序内

创建 AMapWX 对象

import amap from "@/static/amap-wx.130.js";

this.amapPlugin = new amap.AMapWX({
  key: this.mapKey, // 对应高德里申请的key
});

api

• getRegeo

// 获取位置
this.amapPlugin.getRegeo({
  success: (data) => {
    console.log('当前定位', data)
    ...
  },
  // 获取位置失败
  fail: (err) => {
    uni.showToast({
      title: "获取位置失败，请重启小程序",
      icon: "error",
    });
  },
});

获取路线

• 公交：getTransitRoute
• 步行：getWalkingRoute

getTransitRouteData() {
  // 注意格式，'23.18139, 113.48067'此格式无效, 经纬度小数点不超过6位
  const cur_des = {
    origin: "113.48067" + "," + "23.18139",
    destination: "113.30997" + "," + "23.08277",
  };
  this.amapPlugin.getTransitRoute({
    ...cur_des,
    city: this.city,
    strategy: 2,
    success: (data) => {
      console.log("getTransitRouteData", data);
    },
    // 获取位置失败
    fail: (err) => {
      ...
    },
  });
}

微信小程序地图

实用功能

• includePoints: 缩放视野以包含所有给定的坐标点

let mapc = uni.createMapContext("maps", this);
mapc.includePoints({
  points: cur_points,
  padding: [100, 100, 100, 100], // 设置上右下左的间距(px)
  success: function (e) {
    console.log("includePoints", e);
  },
});

map 组件

js