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

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

一、效果介绍

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

二、实现方式

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的urlencode()URL编码函数浅析

    PHP的urlencode()函数 urlencode()函数是PHP内置的URL编码函数,用于将字符串编码为符合URL规范的格式,包括将一些特殊字符转换为URL编码形式。该函数一般用于将URL参数进行编码,防止出现乱码等问题。 urlencode()函数的语法 urlencode()函数的语法非常简单,只需要传入一个字符串作为参数即可,例如: $url =…

    PHP 2023年5月23日
    00
  • PHP转换文本框内容为HTML格式的方法

    如果你想要将一个文本框中输入的内容,以HTML格式渲染出来,可以通过使用PHP的htmlspecialchars函数。下面是这个过程的完整攻略: 步骤一:获取文本框内容 首先,你需要使用PHP来获取文本框中的输入内容。如果你使用的是POST方式提交表单,那么可以通过$_POST[“textarea_name”]来获取文本框的内容。例如,如果你的文本框的名称是…

    PHP 2023年5月26日
    00
  • 深入学习微信网址链接解封的防封原理visit_type

    我来详细讲解一下“深入学习微信网址链接解封的防封原理visit_type”的完整攻略。 什么是visit_type? visit_type是微信对于用户访问链接的一种分类标志,一般分为3种: 正常:表示用户是通过正常的方式访问链接,例如直接在浏览器中输入网址、从搜索引擎跳转等。 自定义来源:表示用户在访问链接时,来源经过了特殊的处理,例如通过自定义的二维码、…

    PHP 2023年5月23日
    00
  • 用PHP实现小型站点广告管理

    下面我会详细讲解“用PHP实现小型站点广告管理”的完整攻略。 什么是小型站点广告管理? 小型站点广告管理指的是在自己创建的小型网站中,自己进行广告投放、展示和管理。通过该功能,我们可以将广告资源积累起来,简化了从接收广告到发布广告的流程。 实现广告管理的技术 要实现小型站点广告管理功能,需要掌握以下技术: PHP编程技能 MySQL数据库基础 前端知识如HT…

    PHP 2023年5月23日
    00
  • PHP实现采集程序原理和简单示例代码

    下面详细讲解一下“PHP实现采集程序原理和简单示例代码”的完整攻略。 什么是采集程序? 采集程序指的是从互联网上获取特定信息的程序。这些信息可以是图片、文字、视频等等,采集程序可以自动化地从指定的网站或页面抓取这些信息,然后按照指定的方式对其进行存储或处理。 采集程序有很多应用场景,如爬虫、数据分析、SEO优化等等。 PHP实现采集程序的原理 PHP实现采集…

    PHP 2023年5月23日
    00
  • 小程序实现登录功能

    小程序实现登录功能需要进行以下步骤: 步骤一:前端页面设计 在小程序前端页面上添加登录按钮,并通过 JS 代码实现以下功能: 点击登录按钮后,调用小程序提供的 wx.login() 接口,获取到需要向服务器发送登录请求的 code; 将获取到的 code 发送给服务器,通过服务器获取到 sessionKey 和 openId; 将获取到的 sessionKe…

    PHP 2023年5月30日
    00
  • VUE搭建分布式医疗挂号系统的前台预约挂号步骤详情

    VUE搭建分布式医疗挂号系统的前台预约挂号步骤详情 准备工作 在开始前,我们需要先确保已经安装好以下软件: Node.js Vue.js 步骤一:创建Vue.js项目 使用Vue.js官方提供的命令行工具vue-cli快速创建Vue.js项目。 # 全局安装vue-cli npm install -g vue-cli # 创建项目 vue create my…

    PHP 2023年5月27日
    00
  • php安全配置记录和常见错误梳理(总结)

    PHP安全配置记录和常见错误梳理(总结) 为什么需要安全配置 PHP是一种服务器端脚本语言,广泛使用于Web开发领域。但是,由于其灵活的语法和动态的特性,也容易导致一些安全问题。不恰当的PHP配置会导致服务器被黑客入侵或被攻击者利用来进行远程执行任意代码等攻击。因此,保护PHP应用程序的安全是非常重要的。 PHP安全配置记录 1. 禁用不必要的PHP函数 P…

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