小程序高德路径规划，玩转多方案切换与marker交互

在小程序中运用高德地图 API 实现多路径规划方案切换

准备工作

• 注册高德地图开放平台账号

访问高德地图开放平台官网 (https://lbs.amap.com/)，注册账号并登录。在控制台中，创建新的应用并获取 API 密钥。

• 高德地图小程序 SDK

下载高德地图小程序 SDK (https://lbs.amap.com/api/javascript-api/sdk/) 并解压到小程序项目目录中。在小程序项目中，配置高德地图小程序 SDK 的依赖：

{
  "usingComponents": {
    "map": "path/to/amap-wx.js"
  }
}

• 初始化高德地图小程序 SDK

在小程序页面的生命周期函数中，初始化高德地图小程序 SDK：

onLoad() {
  this.mapCtx = wx.createMapContext("map");
}

路径规划

• 创建路径规划实例

this.pathPlanning = new AMap.Driving({
  map: this.mapCtx
});

• 设置路径规划起点与终点

this.pathPlanning.search({
  origin: "起点坐标",
  destination: "终点坐标"
});

• 监听路径规划结果

this.pathPlanning.on('complete', (data) => {
  // 处理路径规划结果
});

路径线路上展示 Marker

• 创建 Marker 点

const marker = new AMap.Marker({
  position: "marker坐标",
  icon: "marker图标",
  title: "marker标题",
  content: "marker内容"
});

• 将 Marker 点添加到地图上

this.mapCtx.addMarker(marker);

Marker 交互

• 监听 Marker 点击事件

marker.on('click', (data) => {
  // Marker 点击事件处理
});

• Marker 点击事件处理

marker.on('click', (data) => {
  wx.showModal({
    title: '提示',
    content: '你点击了 Marker：' + data.title,
    showCancel: false
  });
});

结语

通过高德地图开放平台 API，开发者可以在小程序中轻松实现多条路径规划方案的切换，并在路径线路上展示多个 Marker 并赋予它们交互功能。这种强大的功能为小程序提供了便捷且全面的地图服务，提升了用户体验。

常见问题解答

1. 如何切换不同的路径规划方案？

使用 pathPlanning.search 方法，提供新的起点和终点坐标即可切换路径规划方案。

2. 如何自定义 Marker 的样式？

通过设置 icon 属性，可以为 Marker 设置自定义的图片或图标。

3. 如何获取 Marker 点击事件中的数据？

在 Marker 点击事件的回调函数中，data 参数包含了 Marker 的位置、标题和内容等信息。

4. 如何在地图上添加多个 Marker？

可以使用 addMarker 方法多次向地图中添加不同的 Marker。

5. 如何在地图上清除所有 Marker？

使用 clearMarkers 方法可以清除地图上所有已添加的 Marker。