在地图上绘制覆盖物

本文介绍覆盖物添加、移除的方法，及如何对覆盖物进行传参。

添加标注

const div = document.createElement("div")
const img = document.createElement("img")
div.style.width = "100px"
div.style.height = "100px"
img.style.width = "100%"
img.style.height = "100%"

img.src = "https://xxx.com/xxx.png"

const marker = new DiMapApi.Marker(div)
marker.setLngLat([116.38267, 39.908179])

// 标记添加到地图
marker.addTo(map)

// 移除标记
marker.remove()

绘制圆

const circle = new DiMapApi.Circle({
  map,
  center: [116.39511, 39.90694], // 圆位置
  radius: 50, // 圆半径
  strokeColor: "#006600", // 边框颜色
  strokeOpacity: 1, // 边框透明度
  strokeWeight: 2, // 边框宽度
  fillColor: "#006600", // 填充颜色
  fillOpacity: 1 // 填充透明度
})

// 圆展示
circle.show()

// 圆隐藏
circle.hide()

// 圆销毁
circle.destroy()

添加线覆盖物

const polyline = new DiMapApi.Polyline({
  map,
  path: [
    [116.35811, 39.90311],
    [116.36332, 39.89835],
    [116.37181, 39.89876],
    [116.37271, 39.90688]
  ],
  outlineColor: "#000000", // 外边框
  strokeColor: "#006600", // 外边框颜色
  strokeStyle: "solid", // 外边框类型
  lineCap: "butt", // 线两端线帽的样式,默认无头 butt
  lineJoin: "miter", // 线拐点连接处的样式，默认尖角 miter
  strokeWeight: 6, // 线宽度
  strokeOpacity: 1, // 线透明度
  borderWeight: 2, // 边框砍断
  isOutline: false, // 是否带边框
  showDir: true // 是否显示方向箭头, 默认为 false
})

// 线展示
polyline.show()

// 线隐藏
polyline.hide()

// 线销毁
polyline.destroy()

添加面覆盖物

const polygon = new DiMapApi.Polygon({
  map,
  path: [[
    [116.40231, 39.91336],
    [116.40191, 39.92319],
    [116.3915, 39.92292],
    [116.39218, 39.91306],
    [116.40231, 39.91336]
  ]],
  fillColor: 'red' // 填充颜色
})

// 面显示
polygon.show()

// 面隐藏
polygon.hide()

// 面销毁
polygon.destroy()