uniapp引入高德地图 描绘路线

### 实现 UniApp 中使用高德地图 API 绘制路线

为了在 UniApp 应用程序中利用高德地图 API 完成路径绘制，需遵循特定流程并注意一些细节。

#### 准备工作
确保已获取合法有效的高德地图 Key 并完成相应配置[^3]。此密钥用于初始化 SDK 和调用服务接口。

#### 创建与引入必要的资源文件
按照说明将 `amap-wx.js` 复制至项目目录下，并依据实际应用场景适当重命名该 JavaScript 文件及其内部引用名称以适应不同环境下的兼容性要求[^4]。接着，在目标页面内导入处理后的 AMap 插件：

import amapFile from '../../utils/amap-uni.js';

#### 编写具体逻辑代码片段
下面给出一段简化版的 Vue 单文件组件模板作为例子展示如何发起导航请求以及渲染路径轨迹：

<template>
  <!-- 地图容器 -->
</template>

<script>
export default {
  data() {
    return {
      mapObj: null, // 存储地图实例对象
      polylineArr: [],// 路径坐标集合
    };
  },
  onLoad(option){
     let _this=this;
     var key = '您申请到的应用Key'; 
     new amapFile.AMapWX({key:key}).getReGeocoder({
       success:function(data){  
         console.log(JSON.stringify(data));
         _this.initMap();
        }
     });
  },
  methods:{
    initMap(){
      this.mapObj=new AMap.Map('container',{
          zoom:10,
          center:[116.397428,39.90923],// 默认中心点可替换为起点终点平均值或其他合理位置
      });

      const start=[116.397428,39.90923]; // 设置起始地点经纬度数组形式
      const end =[116.407428,39.91923];// 结束地点同理
      
      // 构建步行/驾车模式参数体
      var drivingOption={
            origin:start.join(','),destination:end.join(','),
            policy:AMap.DrivingPolicy.LEAST_TIME,// 可选策略最短时间优先等
            extensions:'all',
            showTraffic:true,
            hideMarkers:false,
            isOutline:true,
            outlineColor:'#ffeeff'
      };

      // 发送路径查询命令
      AMap.plugin(['AMap.Driving'],function(){    
           var driving= new AMap.Driving(drivingOption);
           
           driving.search((status,result)=>{
               if(status==='complete'){
                   result.paths.forEach(path=>{
                       path.steps.forEach(step=>{                        
                           step.path.forEach(point=>{
                               _this.polylineArr.push([point.lng,point.lat]);
                           })
                       })                    
                   })

                  // 添加折线要素到地图上
                  var polyline =new AMap.Polyline({
                      path:_this.polylineArr,
                      strokeWeight : 6,
                      strokeOpacity : 0.9,
                      strokeStyle :'solid',
                      strokeColor :"#FFCC00"
                  });
                  
                 _this.mapObj.add(polyline);

              }else{
                alert("线路规划失败");
              }
          });
      });
      
   }
}
};
</script>

上述示例展示了从加载地图插件到最后成功画出连接两点之间的最优行驶方案全过程。需要注意的是这里仅提供了基础框架结构，开发者还需根据业务需求进一步完善错误处理机制、优化用户体验等方面的工作。