feat：完善景区页面

src/hooks/map.js

@@ -0,0 +1,30 @@
+import { ref } from 'vue'
+export function useMap() {
+  let map = ref(null)
+  // 初始化地图
+  const initMap = (id, lat, lng, scale = 15) => {
+    map.value = new BMapGL.Map(id)
+    map.value.centerAndZoom(new BMapGL.Point(lat, lng), scale)
+    map.value.enableScrollWheelZoom(true)
+  }
+
+  // 添加图标
+  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)
+    // 创建标注对象并添加到地图
+    var marker = new BMapGL.Marker(point, { icon: iconPath })
+    map.value.addOverlay(marker)
+  }
+
+  return { map, initMap, addMarker }
+}