微信小程序地图导航功能实现完整源代码附效果图(推荐)

微信小程序地图导航功能实现完整源代码附效果图攻略

一、效果介绍

此攻略实现了微信小程序地图导航功能,用户可以输入起点和终点,点击导航按钮即可在地图上显示导航路线,并提供导航提示功能。

二、实现方式

1. 准备工作

在微信小程序开发者工具中创建一个新项目,在app.json配置文件中添加需要使用的组件:

{
  "usingComponents": {
    "map": "../../miniprogram_npm/@vivaxy/wechat-map/index"
  }
}

@vivaxy/wechat-map是一款第三方组件,可以在小程序中使用高德地图。

2. 实现导航功能

在页面中使用map组件显示地图,使用小程序的input组件来获取起点和终点位置的输入,并使用高德地图API获取导航路线。

首先,在wxml文件中添加起点和终点位置的输入框和导航按钮:

<view class="form">
  <form>
    <label for="start">起点位置:</label>
    <input id="start" type="text" placeholder="请输入起点位置" bindinput="bindStartInput">
  </form>
  <form>
    <label for="destination">终点位置:</label>
    <input id="destination" type="text" placeholder="请输入终点位置" bindinput="bindDestinationInput">
  </form>
  <button type="primary" bindtap="navigate">导航</button>
</view>

然后,在js文件中实现获取起点和终点位置的函数和导航函数:

Page({
  data: {
    startLocation: '', // 起点位置
    destination: '', // 终点位置
    map: null, // 地图对象
    polyline: [], // 导航路线
  },

  // 获取起点位置
  bindStartInput(e) {
    this.setData({ startLocation: e.detail.value });
  },

  // 获取终点位置
  bindDestinationInput(e) {
    this.setData({ destination: e.detail.value });
  },

  // 点击导航按钮
  navigate() {
    const that = this;
    //获取高德地图的 key,可在高德地图开放平台申请
    wx.request({
      url: 'https://restapi.amap.com/v3/geocode/geo?key=您在高德地图开放平台的key值&address=' + that.data.startLocation,
      success: res => {
        const startLocation = res.data.geocodes[0].location.split(',');
        wx.request({
          url: 'https://restapi.amap.com/v3/geocode/geo?key=您在高德地图开放平台的key值&address=' + that.data.destination,
          success: res => {
            const destination = res.data.geocodes[0].location.split(',');
            wx.request({
              url: 'https://restapi.amap.com/v3/direction/walking?key=您在高德地图开放平台的key值&origin=' + startLocation[1] + ',' + startLocation[0] + '&destination=' + destination[1] + ',' + destination[0],
              success: res => {
                const steps = res.data.route.paths[0].steps;
                const polyline = [];
                steps.forEach(step => {
                  step.polyline.split('|').forEach(point => {
                    const latlng = point.split(',');
                    polyline.push({
                      latitude: parseFloat(latlng[1]),
                      longitude: parseFloat(latlng[0])
                    });
                  });
                });
                that.setData({ polyline });
                // 显示地图并设置地图的中心点和缩放
                that.data.map = wx.createMapContext('map');
                that.data.map.includePoints({
                  padding: [10],
                  points: polyline
                });
              }
            });
          }
        });
      }
    });
  }
})

至此,即可在小程序中完成地图导航功能。

3. 实现导航提示功能

为了让用户更方便地进行导航,我们可以添加导航提示功能。首先,在wxml文件中添加提示框:

<view class="tip">
  <view class="tip-content">{{tipText}}</view>
</view>

然后,在js文件中实现导航提示功能:

Page({
  data: {
    startLocation: '', // 起点位置
    destination: '', // 终点位置
    map: null, // 地图对象
    polyline: [], // 导航路线
    stepIndex: 0, // 当前导航到第几步
    tipText: '', // 导航提示文字
  },

  // 中途更新提示
  onHandleTip(data) {
    this.setData({
      stepIndex: data.step.index,
      tipText: data.step.instruction,
    });
  },

  // 更新完导航
  onHandleEnd(data) {
    this.setData({
      tipText: '已到达终点!',
    });
  },

  // 点击导航按钮
  navigate() {
    const that = this;
    // 获取高德地图的 key,可在高德地图开放平台申请
    wx.request({
      url: 'https://restapi.amap.com/v3/geocode/geo?key=您在高德地图开放平台的key值&address=' + that.data.startLocation,
      success: res => {
        const startLocation = res.data.geocodes[0].location.split(',');
        wx.request({
          url: 'https://restapi.amap.com/v3/geocode/geo?key=您在高德地图开放平台的key值&address=' + that.data.destination,
          success: res => {
            const destination = res.data.geocodes[0].location.split(',');
            wx.request({
              url: 'https://restapi.amap.com/v3/direction/walking?key=您在高德地图开放平台的key值&origin=' + startLocation[1] + ',' + startLocation[0] + '&destination=' + destination[1] + ',' + destination[0],
              success: res => {
                const steps = res.data.route.paths[0].steps;
                const polyline = [];
                steps.forEach(step => {
                  step.polyline.split('|').forEach(point => {
                    const latlng = point.split(',');
                    polyline.push({
                      latitude: parseFloat(latlng[1]),
                      longitude: parseFloat(latlng[0])
                    });
                  });
                });
                that.setData({ polyline });
                // 显示地图并设置地图的中心点和缩放
                that.data.map = wx.createMapContext('map');
                that.data.map.includePoints({
                  padding: [10],
                  points: polyline
                });
                // 导航提示
                wx.getSystemInfo({
                  success: function (res) {
                    const navHeight = 64 * (res.windowHeight / 750);
                    const promptTip = that.selectComponent('#prompt-tip');
                    promptTip.startNavigation({
                      steps: steps,
                      windowHeight: res.windowHeight,
                      statusBarHeight: res.statusBarHeight * (res.windowWidth / 750),
                      navHeight: navHeight,
                      that: that,
                    });
                  }
                });
              }
            });
          }
        });
      }
    });
  }
})

至此,即可在小程序中完成导航提示功能。

总结

通过以上步骤的实现,即可完成微信小程序地图导航功能。要注意实现过程中需要获取高德地图的key值,同时在进行步骤提示功能时,建议使用高级搜索来获取更为精确的结果。

本站文章如无特殊说明,均为本站原创,如若转载,请注明出处:微信小程序地图导航功能实现完整源代码附效果图(推荐) - Python技术站

(0)
上一篇 2023年5月23日
下一篇 2023年5月23日

相关文章

  • PHP 高手之路(三)

    PHP 高手之路(三)完整攻略 概述 PHP 高手之路(三)是一篇较为深入的 PHP 语言技巧和实践文章,它包含了 PHP 领域的一些高级特性,例如:面向对象、设计模式、异常处理、事件管理等。本文假定你已经具备了 PHP 基础知识,并熟练掌握了 PHP 面向过程的编程实践。 目录 面向对象 类的定义与实例化 属性和方法 继承 抽象类和接口 魔术方法 设计模式…

    PHP 2023年5月25日
    00
  • php使用socket调用http和smtp协议实例小结

    PHP 是一种广泛使用的脚本语言,在应用开发领域中,常常需要使用 PHP 调用外部网络服务,如 HTTP 协议和 SMTP 协议等。本文将详细讲解如何使用 PHP 的 socket 手动调用 HTTP 和 SMTP 协议,并提供两条示例说明。 什么是 socket? 在开始讲解如何使用 socket 调用 HTTP 和 SMTP 协议之前,我们先来了解一下 …

    PHP 2023年5月26日
    00
  • PHP七种数据类型知识点总结

    PHP七种数据类型知识点总结 在PHP中,数据可以分为七种类型:整型(integer)、浮点型(float)、字符串(string)、布尔型(boolean)、数组(array)、对象(object)和空类型(null)。本文将为您详细介绍这七种数据类型及其相关知识。 整型(integer) 整型即整数类型。在PHP中,整型的范围大小跟所使用的系统结构相关,…

    PHP 2023年5月26日
    00
  • smarty学习笔记之常见代码段用法总结

    下面是“smarty学习笔记之常见代码段用法总结”的完整攻略。 一、什么是Smarty? Smarty是一个PHP的模板引擎,它把PHP逻辑和HTML页面的分离,可以让HTML页面与PHP菜单逻辑分离开。 二、Smarty的安装 在Windows环境下,可以通过在Apache服务器环境的PHP目录下安装Smarty来使其工作。 三、常见的Smarty代码段用…

    PHP 2023年5月26日
    00
  • fpm模式下读取到is_cli为何为true

    目录 问题出现和简单排查 排查 经过思考和猜测,严重怀疑是fpm读取到了cli下的opcache 原起 粗浅探索 测试代码 opcache配置 共享内存缓存与文件缓存 php-fpm下读取到is_cli为true,不知道你们是否遇到过,我是遇到了。。。。有人会说,即使为true又怎么了,你是没遇到有些根据is_cli来走不同逻辑判断的,如果读取的是错的就会引…

    PHP 2023年4月17日
    00
  • 基于PHP技术开发客服工单系统

    作为一名网站作者,您希望为您的网站开发一款客服工单系统来方便用户提出问题并得到及时的回复和解决。在这里,我们将使用PHP技术来开发这个系统。下面是完整的攻略: 开发环境的搭建 首先,您需要搭建PHP的开发环境。您可以使用XAMPP、WAMP等工具来快速搭建PHP环境。如果您是Mac或Linux用户,您可以通过终端来安装Apache、PHP及MySQL。 设计…

    PHP 2023年5月24日
    00
  • php读取文件内容的几种方法详解

    PHP读取文件内容的几种方法详解 在PHP中,读取文件内容是一项比较常用的操作。本文将介绍PHP读取文件内容的几种方法,包含了常用的几种方法以及一些较为高级的读取方法。 1. 使用file_get_contents()函数读取文件内容 file_get_contents()函数可用于读取文件,并且自动将文件内容读取到字符串中。 示例代码: $file_con…

    PHP 2023年5月23日
    00
  • PHP循环遍历数组的3种方法list()、each()和while总结

    下面我就为你详细讲解“PHP循环遍历数组的3种方法list()、each()和while总结”的完整攻略。 1. list()方法 list()方法是用来将数组的值赋给一组变量的方法。它的语法如下: list($var1, $var2, …) = $array; 在使用list()方法时需要注意的是,本方法只能用于索引数组(即数组的键名为数字),且数组的…

    PHP 2023年5月26日
    00
合作推广
合作推广
分享本页
返回顶部