微信小程序 高德地图路线规划实现过程详解

下面我将针对“微信小程序 高德地图路线规划实现过程详解”给出完整攻略。

1. 准备工作

在进行微信小程序中的路线规划实现前,需要先前往高德开放平台进行申请并获取到 Web API Key,之后根据所需进行接口授权,获取相关权限。之后需要创建微信小程序,并获取到AppId,最后在 小程序后台-开发-开发设置 中将域名加入到 request 合法域名中。

2. 实现步骤

2.1 引入高德地图SDK

首先需要在小程序的 page.json 文件中添加高德地图SDK的引用地址:

{
  "usingComponents": {
    "amap": "path/to/amap/amap"
  }
}

然后通过 npm 安装 wx-amap-graphicswx-amap-wx 模块:

npm i wx-amap-graphics wx-amap-wx --save

在小程序页面中引入:

import Amap from './libs/amap-wx.js'
import AmapGraphics from './libs/amap-wx-graphics.js'

2.2 获取定位信息

wx.getLocation({
  type: 'gcj02',
  success(res) {
    console.log(res)
  }
})

wx.getLocation() 函数是微信小程序提供的获取用户地理位置的接口。其中 type 参数指定了返回值的坐标系,gcj02 是中国国家测绘局制定的坐标系,也是高德地图所采用的坐标系。获取到用户当前所处位置后,可以用来设置起点坐标点。

2.3 实现路线规划

wx.request({
  url: 'https://restapi.amap.com/v3/direction/driving',
  data: {
    origin: `${startLocation.lng},${startLocation.lat}`,
    destination: `${endLocation.lng},${endLocation.lat}`,
    key: '高德地图Web API Key'
  },
  success(res) {
    console.log(res)
  }
})

在路线规划过程中,需要使用高德地图提供的 “direction/driving” 接口,该接口实现了驾车路线的计算,并返回路线方案规划的结果。其中 {startLocation, endLocation} 是构造好的起点及终点地理位置对象。请求成功后,依据结果完成后续业务逻辑。

2.4 渲染地图

通过高德地图SDK将路线渲染至地图上。在微信小程序开发过程中,可以使用 <amap /> 组件:

<amap class="map" id="myMap" scale="15"
  polyline="{{polyline}}"
  markers="{{markers}}"
  circles="{{circles}}"
  controls="{{controls}}"
  bindcomplete="onMapComplete"
/>

其中,<amap /> 组件是高德地图的渲染组件,通过各类属性将路线及其他地理信息渲染至地图上实现展示效果。各类属性中的 markers 用于设置地图标记点,可以通过设置不同的图标及其他属性之实现对地理位置的标注;polyline 属性用于设置地图上的路径线段;controls 则用于控制地图视图上的缩放尺度等事件的控制。

3. 示例

下面是一个基于微信小程序,通过高德地图实现驾车路线规划的示例代码:

// index.js
import Amap from './libs/amap-wx.js'
import AmapGraphics from './libs/amap-wx-graphics.js'

Page({
  data: {
    startLocation: {},
    endLocation: {},
    polyline: [],
    circles: [],
    markers: [],
    controls: [{
      id: 1,
      iconPath: '/images/plus.png',
      position: {
        left: 10,
        top: 10,
        width: 40,
        height: 40
      },
      clickable: true
    }, {
      id: 2,
      iconPath: '/images/minus.png',
      position: {
        left: 10,
        top: 60,
        width: 40,
        height: 40
      },
      clickable: true
    }]
  },

  onLoad() {
    this.onCreateMap()
  },

  onCreateMap() {
    let s = wx.getSystemInfoSync()
    let w = s.windowWidth
    let h = s.windowHeight

    this.amap = new Amap.AMapWX({
      key: '高德地图Web API Key',
      version: '1.4.0'
    })

    let that = this
    this.amap.getRegeo({
      success: data => {
        let startLocation = {
          lng: data[0].longitude,
          lat: data[0].latitude
        }
        let endLocation = {
          lng: data[0].longitude + 0.015,
          lat: data[0].latitude + 0.01
        }
        that.setData({
          startLocation,
          endLocation
        })
        that.getRoute()
      },
      fail: info => {
        console.log(info)
      }
    })
  },

  getRoute() {
    wx.showLoading({
      title: '正在加载...',
    })

    let that = this
    wx.request({
      url: 'https://restapi.amap.com/v3/direction/driving',
      data: {
        origin: `${that.data.startLocation.lng},${that.data.startLocation.lat}`,
        destination: `${that.data.endLocation.lng},${that.data.endLocation.lat}`,
        key: '高德地图Web API Key'
      },
      success(res) {
        wx.hideLoading()
        console.log(res)

        let steps = res.data.route.paths[0].steps
        let path = []
        let markers = []
        let segments = []
        for (let i = 0; i < steps.length; i++) {
          let polyline = []
          let points = steps[i].polyline.split(';')
          let startPoint = {
            lng: parseFloat(points[0].split(',')[0]),
            lat: parseFloat(points[0].split(',')[1])
          }
          let endPoint = {
            lng: parseFloat(points[points.length - 1].split(',')[0]),
            lat: parseFloat(points[points.length - 1].split(',')[1])
          }
          path.push({
            points,
            color: "#0091ff",
            width: 6
          })
          markers.push({
            iconPath: "/images/marker.png",
            longitude: startPoint.lng,
            latitude: startPoint.lat,
            width: 50,
            height: 50
          })
          if (i === 0) {
            segments.push({
              start: that.data.startLocation,
              end: startPoint
            })
          } else {
            let lastStep = steps[i - 1]
            let lastPoints = lastStep.polyline.split(';')
            let lastEndPoint = {
              lng: parseFloat(lastPoints[lastPoints.length - 1].split(',')[0]),
              lat: parseFloat(lastPoints[lastPoints.length - 1].split(',')[1])
            }
            segments.push({
              start: lastEndPoint,
              end: startPoint
            })
          }
        }
        markers.push({
          iconPath: "/images/mark_b.png",
          longitude: that.data.endLocation.lng,
          latitude: that.data.endLocation.lat,
          width: 50,
          height: 50
        })

        that.setData({
          polyline: path,
          markers: markers,
          segments: segments
        })
      },
      fail: err => {
        wx.hideLoading()
        console.log(err)
      }
    })
  },

  onMapComplete() {
    let that = this
    this.amap.createMarkers({
      markers: that.data.markers,
      success: data => {
        console.log(data)
      }
    })
    this.amap.createPolyline({
      polylines: that.data.polyline,
      success: data => {
        console.log(data)
      }
    })

    this.amap.getCenterLocation({
      success: data => {
        console.log(data)
      }
    })

    this.setData({
      circles: [{
        longitude: that.data.startLocation.lng,
        latitude: that.data.startLocation.lat,
        fillColor: '#FF000033',
        radius: 80
      }, {
        longitude: that.data.endLocation.lng,
        latitude: that.data.endLocation.lat,
        fillColor: '#FF000033',
        radius: 80
      }]
    })
  },

  handleClickControl(e) {
    let id = e.controlId
    let scale = this.amap.getScale()
    if (id === 1) {
      scale += 1
    } else {
      scale -= 1
    }
    this.amap.setScale(scale)
  }
})

另外,这里还需注意将页面中 amap 组件的尺寸及其他属性进行添加和设置以达到最终的路线及地图展示的效果。

本站文章如无特殊说明,均为本站原创,如若转载,请注明出处:微信小程序 高德地图路线规划实现过程详解 - Python技术站

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

相关文章

  • php简单socket服务器客户端代码实例

    当前PHP版本为7.4.21,以下是“PHP简单socket服务器客户端代码实例”的完整攻略: 什么是Socket Socket是一种通信机制,可以实现不同计算机节点之间的数据传输。在Socket通信中,通信双方都需要运行Socket,其工作流程如下: 服务器程序绑定一个端口号,并且监听来自客户端的连接请求 客户端程序连接服务器 服务器接受客户端连接请求,建…

    PHP 2023年5月24日
    00
  • PHP 函数call_user_func和call_user_func_array用法详解

    PHP 函数call_user_func和call_user_func_array用法详解 在 PHP 中,我们可以通过调用函数来完成某些操作。但有时候,我们需要在运行时动态地调用函数,这时就可以使用 call_user_func 和 call_user_func_array 函数,本文将对这两个函数的使用方法进行详细讲解。 call_user_func c…

    PHP 2023年5月26日
    00
  • PHP简单实现模拟登陆功能示例

    说明: 为了更好地演示示例,我将在本文中使用“PHP CURL”来模拟浏览器行为,并且将使用豆瓣网进行演示。 制定计划 在开始编写实现模拟登陆功能的示例之前,首先需要制定一个计划,确定以下信息: 确定要模拟登陆的网站; 确定要模拟登陆的用户信息,例如用户名和密码; 确定要提交的表单数据和请求方式; 确定使用哪个库或框架来实现模拟登陆。 在本示例中,我将使用“…

    PHP 2023年5月27日
    00
  • 约苗怎么预约接种疫苗?约苗预约接种疫苗教程

    约苗怎么预约接种疫苗?约苗预约接种疫苗教程 1. 前言 由于新冠疫情的影响,目前全国范围内正在进行疫苗接种工作。为了更高效、快捷地走出疫情,越来越多的地区采用“约苗”方式进行接种预约。那么,在这里我们来介绍一下如何进行“约苗”预约接种的具体流程。 2. 接种要求 在进行“约苗”预约接种之前,需要具备以下条件: 年满18岁且符合接种条件的人员; 确认所在社区疫…

    PHP 2023年5月23日
    00
  • PHP写日志的实现方法

    下面我来详细讲解”PHP写日志的实现方法”的完整攻略。 1. 什么是日志? 在计算机世界里,日志是记录事件的文件或条目。它可以为您提供有关您的应用程序的有价值的信息和统计数据,从而帮助您确定您的应用程序发生了什么情况。 2. 为什么需要PHP写日志? 在PHP开发中,写日志是非常重要的,因为您永远不知道在您的应用程序中会出现哪些问题。日志可以记录问题并帮助您…

    PHP 2023年5月27日
    00
  • PHP的substr_replace将指定两位置之间的字符替换为*号

    针对这个问题,我来给你详细讲解下“PHP的substr_replace将指定两位置之间的字符替换为*号”的攻略,包含以下几个方面的内容: substr_replace函数的基本使用方法。 substr_replace函数替换字符串中间字符的示例说明。 substr_replace函数替换字符串中间多个字符的示例说明。 下面,逐一进行讲解。 substr_re…

    PHP 2023年5月26日
    00
  • PHP 翻页 实例代码

    接下来我将为您详细讲解关于“PHP 翻页 实例代码”的完整攻略。 什么是翻页? 翻页(Paging或Pagination)是指在页面上分多个条目或栏目显示信息,需要在用户界面上实现将这些条目或栏目分批次或一页一页显示的功能。对于常见的网页来说,翻页是一种方便用户查看大量数据的方式,是一个基本而又普遍的需求。 翻页实现的主要难点 PHP实现翻页主要的难点在于计…

    PHP 2023年5月24日
    00
  • 详解PHP实现执行定时任务

    下面是详解PHP实现执行定时任务的完整攻略: 什么是定时任务 定时任务是指需要定期执行的任务,可以是某个特定时间点或者是周期性地执行。在Web开发中,常见的定时任务有自动备份数据库、清理无用文件等等。 实现定时任务的方式 实现定时任务的方式有多种,常见的有以下几种: 使用计划任务工具,如Crontab(Linux系统)或Windows计划任务(Windows…

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