【uniapp】地图路线轨迹，路线规划，兼容H5与APP端！
1、介绍与使用
介绍：地图路线规划，调用高德api自动连线，只需申请高德web服务即可，只需传key，起点终点就可实现自动连线，可根据需求自行调整。
导入使用：插件地址，uni-app项目引入即可使用，支持 android 、ios 和 h5。
2、代码示例
<template> <view class="container"> <map id="map" :latitude="latitude" :longitude="longitude" :markers="markers" :polyline="polyline" :style="{width: '100%',height: '100vh'}"> </map> </view> </template> <script> import { calculateDrivingRoute } from '@/js_sdk/y-mapservice/mapservice.js'; export default { data() { return { latitude: 39.908823, // 默认纬度（北京） longitude: 116.397470, // 默认经度 //地图 mapContext: undefined, mapPlus: undefined, //标记 markers: [], //路线 polyline: [], //起点 startLon: 0, startLat: 0, //终点 endLon: 0, endLat: 0 } }, onLoad(opt) { // 可根据自己需求获取，接口获取/定位获取 this.startLon = opt.startLon; this.startLat = opt.startLat; this.endLon = opt.endLon; this.endLat = opt.endLat; }, onReady() { this.mapContext = uni.createMapContext("map", this); this.mapPlus = this.mapContext.$getAppMap(); this.refreshMap(); }, methods: { refreshMap() { // 定位到地图中间位置 this.mapContext.moveToLocation({ latitude: this.startLat, longitude: this.startLon }); // 添加标记 this.markers = [{ id: 0, latitude: this.startLat, longitude: this.startLon, iconPath: '/static/index/map-ta.png', // 标记图标 }, { id: 1, latitude: this.endLat, longitude: this.endLon, iconPath: '/static/index/map-wo.png', // 标记图标 } ]; // 计算并显示路线 this.calculateRoute(); }, async calculateRoute(){ try { console.log('开始计算路线'); //填写高德开发者申请的《web服务》的 key const apiKey = ''; const path = await calculateDrivingRoute( apiKey, parseFloat(this.startLon), parseFloat(this.startLat), parseFloat(this.endLon), parseFloat(this.endLat), ); // 设置路线 this.polyline = [{ points: path, color: '#4dbe7c', width: 10, arrowLine: true }]; console.log('路线已设置到地图'); } catch (error) { console.error('路线计算失败:', error); // 失败时不显示路线 this.polyline = []; } } }, } </script>