uni 地图小程序新手常见

uni小程序默认使用的为腾讯地图api.

默认开放为：1万次 / 日，并发：5次 / 秒 。
缩放等级为3-20。
以下仅为区域、画线、标记参考。

地图常见参数

表头
markers	标记点，类蓝色部分
polygons	不规则区域，黑色的框
polyline	路线绿色和红色部分

image.png

markers

配合路线回归api则可以实现，类似小车之类跟着走的动画。
1 回归动画

this.mapCtx.moveAlong({
        markerId: 0,
        //   path: this.points.map(({ longitude, latitude }) => ({ longitude, latitude })),
        path: [
          {
            longitude: this.point.longitude - 0.003,
            latitude: this.point.latitude,
          },
          {
            longitude: this.point.longitude - 0.0025,
            latitude: this.point.latitude - 0.001,
          },
          {
            longitude: this.point.longitude - 0.0025,
            latitude: this.point.latitude - 0.001,
          },
          {
            longitude: this.point.longitude - 0.002,
            latitude: this.point.latitude - 0.0015,
          },
          {
            longitude: this.point.longitude - 0.0015,
            latitude: this.point.latitude - 0.0018,
          },
          {
            longitude: this.point.longitude - 0.001,
            latitude: this.point.latitude - 0.0018,
          },
        ],
        duration: 1000 * 5,
        complete: () => {
          // // console.log('complete=======>')
          // this.moving = false
        },
      });

2 常见markers数据格式

    // 标记点
    markers() {
      return [
        {
          id: 0,
          longitude: "",
          latitude: "",
          //   longitude: this.point.longitude,
          //   latitude: this.point.latitude,
          iconPath: this.icons[0],
          width: 25,
          height: 25,
        },
        {
          id: 1,
          longitude: this.point.longitude,
          latitude: this.point.latitude - 0.002,
          iconPath: this.icons[1],
          width: 25,
          height: 25,
        },
        {
          id: 2,
          longitude: this.point.longitude - 0.002,
          latitude: this.point.latitude - 0.002,
          iconPath: this.icons[2],
          width: 25,
          height: 25,
        },
      ];
    },

polygons

电子围栏或区域划分，填充色或边框之类。

polygons:[
        {
          strokeWidth: 1,
          strokeColor: "#000000",
          // fillColor: '#ffffff',
          points: [
            {
              longitude: this.point.longitude - 0.003,
              latitude: this.point.latitude * 1 + 0.001,
            },
            {
              longitude: this.point.longitude * 1 + 0.003,
              latitude: this.point.latitude * 1 + 0.001,
            },

            {
              longitude: this.point.longitude * 1 + 0.003,
              latitude: this.point.latitude - 0.001,
            },
            {
              longitude: this.point.longitude - 0.003,
              latitude: this.point.latitude - 0.001,
            },
          ],
        },
      ];

polyline 路线

多配合moveToLocation，实现📍的视野外回正。

this.mapCtx.moveToLocation({
        //moveToLocation将地图中心移动到当前定位点，不生效话map上写上show-location
        latitude: this.latitude,
        longitude: this.longitude,
});

多端颜色路线1-colorList
彩虹线（即地图常见的堵车轨迹红绿黄那种）存在时，color自动失效，也就是所谓的多段颜色。

[
  {
    points:[...],
   colorList:['xx','xx2','xx3']
   width:4
   }
]

多端颜色路线2

[
        {
          points: [
            {
              longitude: this.point.longitude - 0.003,
              latitude: this.point.latitude,
            },
            {
              longitude: this.point.longitude - 0.0025,
              latitude: this.point.latitude - 0.001,
            },
          ],
          color: "#55aa7fdd",
          width: 4,
        },
        {
          points: [
            {
              longitude: this.point.longitude - 0.0025,
              latitude: this.point.latitude - 0.001,
            },
            {
              longitude: this.point.longitude - 0.002,
              latitude: this.point.latitude - 0.0015,
            },
            {
              longitude: this.point.longitude - 0.0015,
              latitude: this.point.latitude - 0.0018,
            },
            {
              longitude: this.point.longitude - 0.001,
              latitude: this.point.latitude - 0.0018,
            },
          ],
          width: 4,
          color: "#ffaa7f",
        },
      ];