uni-app支付宝小程序map地图组件基础操作+画多边形+打点连线

我们可以参考uni-app官网链接 地图块

显示气泡标注和多边形

	<map
				v-if="longitude && latitude"
				style="width: 100%; height: 100%;"
				id="myMap"
				ref="myMap"
				:latitude="latitude"
				:longitude="longitude"
				:scale="16"
				:show-location="true"
				:enable-satellite="true"
        		:include-points="farmlandList[0].mapAreaList"
				:markers="markerPoints"
				:polygon="markerPolygon"
				@markerTap="tapMarker"
			>
			</map>

这里farmlandList的大概的结构：

 farmlandList: [
        // // 一个农田的完整信息如下:
        // {
        // 	id: 100, // 农田id
        // 	name: '张三的农田', // 农田名称
        // 	status: 2, // 认证状态(2-审核中; 4-已认证)
        // 	// 地块闭合坐标点列表
        // 	mapAreaList: [
        // 		// 至少3个点
        // 		{
        // 			latitude: 30.32113482877577, // 纬度
        // 			longitude: 120.18156108860434, // 经度
        // 		},
        // 		// ...
        // 	]
        // },
        // // ...
      ]

include-points属性因为我们这个地图是存在多个多变形，我们是显示了接口中第一个多边形坐标组。
markers是显示标记点,这里我们因为业务需求留了3个状况，如果没有认证，标记停留当前经纬度，显示立即认证标签，其余的为遍历farmlandList展示后端数据传值过来的数据：

    markerPoints() {
   
      // 未认证过农田
      if (this.farmlandList.length === 0) {
   
        return [
          {
   
            id: "initial-certification",
            longitude: this.longitude,
            latitude: this.latitude,
            iconPath: "/static/markLand/dot_hidden.png",
            anchorX: 0.5,
            anchorY: 0,
            width: 1,
            height: 1,
            label: {
   
              content: "立即认证 >",
              color: "#ffffff",
              fontSize: 14,
              borderRadius: 10,
              bgColor: "#C89D67",
              padding: 16,
            },
          },
        ];
      }

      // 认证过农田且当前存在审核中/已认证的农田
      return this.farmlandList.map((item) => {
   
        // 已认证
        if (item.status === 4) {
   
          return {
   
            id: Math.random().toString().substr(2),
            longitude: item.centerPoint.longitude,
            latitude: item.centerPoint.latitude,
            iconPath: "/static/markLand/dot_hidden.png",
            anchorX: 0.5,
            anchorY: 0,
            width: 1,
            height: 1,
            label: {
   
              content:
                item.name.length > 6
                  ? `${
   item.name.substr(0,