高德地图API使用笔记

最近公司项目需要用到高德地图绘制路径回放功能，在这里做下笔记记录一下。

首先需要加载地图库文件

// key对应为你申请的key
    <script type="text/javascript" src='//webapi.amap.com/maps?v=1.4.10&key=cb7979ff006d672830bb59a4a394d2c9'></script>

　　

绘制站点

1. 首先初始化地图dom对象

    var setting = {
             resizeEnable: true, //是否监控地图容器尺寸变化
             center: [116.397428, 39.90923], //初始化地图中心点
             zoom: 11,//初始化地图层级
             zooms: [3, 20], // 可见层级范围
             mapStyle: "",  // 地图皮肤
         }
     // 合并参数
     setting = Object.assign(setting, option);
     // 初始化地图
     this.mapObj = new global.AMap.Map(elm,setting);
   

2. 通过circleMarker来创建站点。

   var circleMarker = new AMap.CircleMarker({
           center:center,  // 站点坐标，定位圆点位置
           radius:5+Math.random()*10,//3D视图下，CircleMarker半径不要超过64px
           strokeColor:'white', //边框颜色
           strokeWeight:2,  // 边框宽度
           strokeOpacity:0.5, //边框透明度
           fillColor:'rgba(0,0,255,1)', // 圆点填充颜色
           fillOpacity:0.5, // 圆点填充透明度
           zIndex:10,    
           bubble:true, //是否将覆盖物的鼠标或touch等事件冒泡到地图上 
           cursor:'pointer',
           clickable: true
         })
     circleMarker.setMap(map)
   

绘制文本

1. 通过文本标记来创建文本

   // 创建纯文本标记
     var text = new AMap.Text({
         text:'纯文本标记',
         anchor:'center', // 设置文本标记锚点
         draggable:true,
         cursor:'pointer',
         angle:10,
         style:{
             'padding': '.75rem 1.25rem',
             'margin-bottom': '1rem',
             'border-radius': '.25rem',
             'background-color': 'white',
             'width': '15rem',
             'border-width': 0,
             'box-shadow': '0 2px 6px 0 rgba(114, 124, 245, .5)',
             'text-align': 'center',
             'font-size': '20px',
             'color': 'blue'
         },
         position: [116.396923,39.918203]
     });
   
     text.setMap(map);
   

绘制路径

/**
* 绘制路径
* @points:gps点集合、option配置参数
*/
      this.drawLine = function (points, option = {}) {
          // 默认配置
          let settingLine = {
              path: points,
              isOutline: true,
              outlineColor: '#eeeeee',
              borderWeight: 1,
              strokeColor: "#71AD32",
              strokeOpacity: 1,
              strokeWeight: 3,
              // 折线样式还支持 'dashed'
              strokeStyle: "solid",
              // strokeStyle是dashed时有效
              strokeDasharray: [10, 5],
              lineJoin: 'round',
              lineCap: 'round',
              zIndex: 10,
          }
          // 合并参数
          settingLine = Object.assign(settingLine, option);
          // 绘制路径
          const polyline = new window.AMap.Polyline(settingLine);
      }

　　

播放行驶轨迹

1. 需要引入一个另外一个插件

   <script src="//webapi.amap.com/ui/1.0/main.js?v=1.0.11"></script>
   

   　

2. 创建一个绘制轨迹的实例

3. global.AMapUI.load(['ui/misc/PathSimplifier', 'lib/$'], function (PathSimplifier, $) {
             if (!PathSimplifier.supportCanvas) {
                 alert('当前环境不支持 Canvas！');
                 return;
             }
             const pathSimplifierIns = new PathSimplifier({
                 zIndex: 300,
                 map: mapObj,
   
                 getPath: (pathData, pathIndex) => {
                     let points = pathData.points, lnglatList = [];
                     for (let i = 0, len = points.length; i < len; i++) {
                         lnglatList.push(points[i].lnglat);
                     }
                     return lnglatList;
                 },
                 getHoverTitle: (pathData, pathIndex, pointIndex) => {
   
                 },
                 renderOptions: {
                     eventSupport: false,
                     pathLineStyle: {
                         lineWidth: 0,
                         fillStyle: null,
                         strokeStyle: null,
                         borderStyle: null
                     },
                     startPointStyle: {
                         radius: 8,        // radius:   {number} 点的半径
                         fillStyle: "#4f88fe",        // fillStyle:  {string}  填充色，比如 red, rgb(255,0,0), rgba(0,0,0,1)等 
                         strokeStyle: "#2342b5",        // strokeStyle:  {string} 描边色
                         lineWidth: 2        // lineWidth:  {number} 描边宽度
                     },
                     endPointStyle: {
                         radius: 8,        // radius:   {number} 点的半径
                         fillStyle: "#d172db",        // fillStyle:  {string}  填充色，比如 red, rgb(255,0,0), rgba(0,0,0,1)等 
                         strokeStyle: "#90249d",        // strokeStyle:  {string} 描边色
                         lineWidth: 2        // lineWidth:  {number} 描边宽度
                     }
                 }
             });
   
             self.pathSimplifierIns = pathSimplifierIns;
             self.PathSimplifier = PathSimplifier;
         })
   

   　　

   　

4. 设置数据

   this.pathSimplifier.pathSimplifierIns.setData([{
         name: '轨迹0',
         path: posArr
     }]);
   

   　　

5. 创建轨迹路径

   this.navg = this.pathSimplifier.pathSimplifierIns.createPathNavigator(0, {
         loop: false, //循环播放
         speed: 500 * 2, //巡航速度，单位千米/小时
         pathNavigatorStyle: {
            12,
           height: 30,
           //使用图片
           content: this.carIcon,
           //经过路径的样式
           pathLinePassedStyle: {
             lineWidth: 3,
             strokeStyle: '#FF6547',
             borderWidth: 1,
             borderStyle: '#eeeeee',
             dirArrowStyle: false
           }
         }
       });
   

   　　

6. 播放路径

   this.navg.start();
   

   　　示例代码：https://github.com/hp0844182/mapdemo