import { ref } from 'vue'

export function useMap() {
  let map = ref(null)
  let marker = ref(null)

  // 初始化地图
  const initMap = (id, lat, lng, scale = 15, satellite) => {
    map.value = new BMapGL.Map(id)
    map.value.centerAndZoom(new BMapGL.Point(lat, lng), scale)
    map.value.enableScrollWheelZoom(true)
    if (satellite) map.value.setMapType(BMAP_SATELLITE_MAP)
  }

  // 添加图标
  const addMarker = (icon, position = [0, 0], size = [20, 20], offset = [0, 0]) => {
    var iconPath = new BMapGL.Icon(icon, new BMapGL.Size(...size), {
      // 指定定位位置。
      // 当标注显示在地图上时，其所指向的地理位置距离图标左上
      // 角各偏移10像素和25像素。您可以看到在本例中该位置即是
      // 图标中央下端的尖角位置。
      // 设置图片偏移。
      // 当您需要从一幅较大的图片中截取某部分作为标注图标时，您
      // 需要指定大图的偏移位置，此做法与css sprites技术类似。
      //   imageOffset: new BMapGL.Size(...offset) // 设置图片偏移
    })
    var point = new BMapGL.Point(...position)
    // 创建标注对象并添加到地图
    marker.value = new BMapGL.Marker(point, { icon: iconPath })
    map.value.addOverlay(marker.value)
  }

  // 清除覆盖物
  const clearOverlays = () => {
    map.value.clearOverlays()
  }
  // 清除某一个覆盖物
  const removeOverlay = (i) => {
    map.value.removeOverlay(i)
  }
  return { map, marker, initMap, addMarker, clearOverlays, removeOverlay }
}
