高德地图API使用笔记

港控/mmm° 2021-12-23 12:01 486阅读 0赞

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

## 首先需要加载地图库文件 ##

// 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: {
                width: 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][https_github.com_hp0844182_mapdemo]

转载于:https://www.cnblogs.com/hp0844182/p/10936194.html

[https_github.com_hp0844182_mapdemo]: https://github.com/hp0844182/mapdemo