微信小程序开发：实现地图导航功能

一、前言

地图导航功能是市面上许多APP的基本功能之一，实现地图导航功能是微信小程序开发中一个比较常见的需求。本文将介绍如何利用微信小程序自带的地图组件和高德地图API实现地图导航功能。

二、概述

在微信小程序开发中，地图导航功能实现主要包含以下几个步骤：

1. 在小程序中添加地图组件；
2. 获取用户当前位置；
3. 将用户当前位置和目的地位置在地图上标出；
4. 利用高德地图API获取两点间的路线规划；
5. 在地图上显示路线规划。

三、添加地图组件

微信小程序提供了一个地图组件，可以在小程序中直接添加。添加地图组件的方法如下：

1. 在代码中添加以下代码片段：

<map id="myMap" 
    style="width: 100%; height: 300px;" 
    show-scale 
    enable-overlooking 
    enable-zoom 
    enable-rotate 
    bindregionchange="regionChange" 
    bindtap="tapMap">
</map>

 

1. 在对应的Page或Component文件中添加以下代码：

Page({
    data: {
        longitude: 0,
        latitude: 0
    },
    onLoad: function() {
        var that = this
        wx.getLocation({
            success: function(res)