c语言编程笔录

首页 >   > 笔记大全

笔记大全

利用uniapp开发一个简单的地图导航

更新时间：2023-10-14

需求分析

地图导航一般都需要定位功能，这就需要使用到地图API。在此我们将使用高德地图的API。通过定位获取用户的当前位置，找出目的地的经纬度，再在地图上进行导航。因此我们需要使用uniapp提供的定位API和高德地图SDK。

代码实现

首先在manifest.json文件中添加高德地图的key，如下所示：

{
  "app-plus": {
    "res": {
      "apiKey": "在此处输入高德地图apiKey"
    }
  }
}

接下来在需要使用地图的页面的js文件中，引入高德地图sdk和uniapp提供的定位API，如下所示：

import { getSetting, openSetting, getLocation } from '@uni/location';
import $ from 'jquery';
let AMap = require('@/common/libs/amap-wx.js');
// 引入UI组件库
import AMapUI from '@amap/amapui-plugin-react'

通过定位API获取用户当前位置，如下所示：

async getLocation() {
  let setting = await getSetting();
  if (!setting.authSetting['scope.userLocation']) {
    await openSetting();
  }
  let location = await getLocation();
  console.log('当前位置', location);
  // 返回值示例：
  // {
  //   longitude: 116.409119,
  //   latitude: 39.904577
  // }
  return { longitude: location.longitude, latitude: location.latitude };
}

在获取到用户的位置后，我们可以调用高德地图的导航功能，将用户当前位置和目的地位置，在地图上进行导航。代码如下所示：

async navigate() {
  // 获取用户当前位置
  let location = await this.getLocation();
  let { longitude, latitude } = location;
  let destPosition = new AMap.LngLat(this.dest.longitude, this.dest.latitude);
  let currentPosition = new AMap.LngLat(longitude, latitude);

  AMap.plugin('AMap.Driving', () => {
    var driving = new AMap.Driving({
      policy: AMap.DrivingPolicy.LEAST_TIME,
      map: this.map,
      panel: 'panel'
    });
    driving.search([currentPosition, destPosition], (status, result) => {
      // ...
    });
  });
}

代码规范

在编写代码时，应注意命名规范，变量名要能够清晰的表达出变量的含义，函数和类的命名要符合常规，代码注释要够详细，这样有助于其他开发人员维护代码。此外，在使用sdk时要注意版本号，不能使用过期的sdk版本，否则会有兼容性问题。

最后，遵循前后端分离的开发模式，前端只负责视图展示和用户交互，不应该在前端中处理业务逻辑；而业务逻辑应该交给后端，这样有利于代码维护和后续开发。

图文推荐