高德地图API使用笔记

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

首先需要加载地图库文件

?

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

　　

绘制站点

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

   1 2 3 4 5 6 7 8 9 10 11

   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来创建站点。
   ?

   1 2 3 4 5 6 7 8 9 10 11 12 13 14

   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. 通过文本标记来创建文本
   ?

   1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23

   // 创建纯文本标记   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);

 

绘制路径

?

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27

/** * 绘制路径 * @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. 需要引入一个另外一个插件

   ?

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

   　

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

3. ?

   1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45

   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. 设置数据
   ?

   1 2 3 4

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

   　　

5. 创建轨迹路径
   ?

   1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18

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

   　　

6. 播放路径
   ?

   1	this.navg.start();

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