简单小程序地图导航

小程序地图导航实现方法

原创已于 2025-11-17 15:37:02 修改 · 613 阅读

21 ·

CC 4.0 BY-SA版权

文章标签：

#小程序

于 2025-11-16 17:44:05 首次发布

最近在开发一个小程序的项目，接触到了地图导航这一块，然后就对其进行了深入了解，然后在此分享一下我的收获和心得

1. 使用小程序API直接实现

代码实现起来比较简单，实现的目标效果也可以满足我们需求

实现代码（wx.openLocation）：

wx.openLocation({
  latitude: 23.132345,  // 商家纬度
  longitude: 113.324567, // 商家经度
  name: '星巴克(天河店)', // 商家名称
  address: '广东省广州市天河区天河路123号', // 商家地址
  scale: 15 // 地图缩放级别，范围5-18
});

当你调用这个小程序的API时，就会出现这样一个地图画面（微信开发者工具上的效果），通过点击去这里就可以调用手机上的地图APP了，这样就可以实现实时导航，良好的用户体验。

这个和美团上的实现效果比较相似，不管用户去选择哪个地图去进行导航，都可以达到其目标

如果想直接看到实现效果可以直接使用下面代码

<button
    class="location-btn"
    @click="handleViewLocation(23.132345,
                        113.324567,
                        '星巴克(天河店)',
                        '广东省广州市天河区天河路123号', 15)"
    >
<wd-icon name="location" size="18px" custom-style="color: #333;" />
    <span class="btn-text">查看位置</span>
</button>

  // 查看位置
  const handleViewLocation = (latitude: number, longitude: number, name: string, address: string, scale: 15) => {
    if (latitude && longitude) {
      uni.openLocation({
        latitude,
        longitude,
        name,
        address,
        scale,
      });
    }
    else {
      Toast('位置信息不完整');
    }
  };