uniapp微信小程序map地图使用polygon绘制多边形片区

微信小程序-组件-地图-map文档

polygon 指定一系列坐标点，根据 points 坐标数据生成闭合多边形

html

<map id="map" style="width: 100vw;height: 100vh;" :latitude="latitude" :longitude="longitude" :markers="markers" :polygons="polygons" @tap="mapTap" @callouttap="onCallouttap"></map>

javascript

export default {
  data() {
    return {
      polygons: [{
        strokeWidth: 1,
        strokeColor: '#000000',
        fillColor: '#ffffff',
        points: [
          {
            latitude: "23.08288402644847",
            longitude: "113.30218549997039"
          },
          {
            latitude: "23.085168159298544",
            longitude: "113.33830101347007"
          },
          {
            latitude: "23.046124888637255",
            longitude: "113.34326689639329"
          },
          {
            latitude: "23.04654030072217",
            longitude: "113.28683640541976"
          },
          {
            latitude: "23.081845770334308",
            longitude: "113.28299913608771"
          },
          {
            latitude: "23.083506975476055",
            longitude: "113.30286266433609"
          },
          {
            latitude: "23.08288402644847",
            longitude: "113.30218549997039"
          }
        ]
      }],
      latitude: 39.909,
      longitude: 116.39742
    }
  },
  methods: {
    mapTap({
      detail: {
        latitude,
        longitude
      }
    }) {
      // 点击地图
      console.log('latitude', latitude)
      console.log('longitude', longitude)
    },
    onCallouttap({
      detail: {
        markerId
      }
    }) {
      // 标记id
      console.log('markerId', markerId)
    }
  },
  computed: {
    markers() {
      // return ''
      return [{
        id: 1,
        latitude: 23.063289012440045,
        longitude: 113.31491751403087,
        // 解除注释，使用完成透明图片可以隐藏标记的图标
        // 完成透明图片icon
        // iconPath: 'http://oss.eoway.cn/upload/files/2020-09-30-15-03-59-rn278.png',
        // width: 50,
        // height: 16,
        label: {
          content: '海珠片区',
          color: '#00AE5D',
          fontSize: 14,
          textAlign: 'center'
        }
      }]
    }
  }
}

polygons 是一个数组，一个元素代表一个片区，设置多个片区设置多个元素。

上面示例中，使用markers标记了多边形的中心点，如需隐藏标记的图标，可以给markers标记设置透明的png图片。

在map组件上绑定@markertap、@callouttap 点击标记时，返回标记的markerId，也就是id。

在map组件上绑定@tap，点击地图时触发，返回点击位置信息，可以获取到点击位置的latitude和longitude。

polygon 多边形设置fillColor填充颜色透明度。

css颜色十六进制末尾加两位实现透明度变化对照

转载：《css颜色十六进制末尾加两位实现透明度变化对照》

使用css颜色十六进制设置 polygon fillColor 背景色的透明度，strokeColor描边也可以设置透明度。

polygons: [{
  strokeWidth: 1,
  strokeColor: '#bbdfd1AD',
  fillColor: '#bbdfd1AD'
  points:[
    // ...
  ]
}]