Merge branch 'xj' of http://192.168.0.115:3000/bill/public-fuse into xj

src/app/map/App.vue

@@ -1,13 +1,37 @@
 <template>
-  <div>地图页面</div>
-  <div ref="mapEl" style="height: 300px"></div>
+  <!-- <div>地图页面</div> -->
+  <div ref="mapEl" class="map-container"></div>
 </template>
 
 <script setup lang="ts">
 import AMapLoader from "@amap/amap-jsapi-loader";
 import { onMounted, ref } from "vue";
 
+const mockData = [
+  {
+    id: "1",
+    pos: [113.49950059050184, 22.32067452371977],
+    title: "tttsaaa",
+    icon: "//a.amap.com/jsapi_demos/static/demo-center/icons/poi-marker-default.png",
+    url: "https://baidu.com"
+  },
+  {
+    id: "2",
+    pos: [113.4705899650537, 22.154966705378126],
+    title: "hello string11",
+    icon: "//a.amap.com/jsapi_demos/static/demo-center/icons/poi-marker-default.png",
+    url: "https://google.com"
+  },
+  {
+    id: "3",
+    pos: [113.60847140949818, 22.235271980933565],
+    title: "hello string11",
+    icon: "//a.amap.com/jsapi_demos/static/demo-center/icons/poi-marker-default.png",
+    url: "https://yahoo.com"
+  }
+]
 const mapEl = ref<HTMLDivElement>();
+
 const loadMap = async () => {
   const AMap = await AMapLoader.load({
     plugins: ["AMap.PlaceSearch"],
@@ -15,13 +39,58 @@ const loadMap = async () => {
     version: "2.0",
   });
 
+
   const map = new AMap.Map(mapEl.value, {
     WebGLParams: {
       preserveDrawingBuffer: true,
     },
     resizeEnable: true,
   });
+
+
+  //添加插件
+  AMap.plugin(["AMap.ToolBar", "AMap.Scale", "AMap.HawkEye", 'AMap.MapType'], function () {
+    //异步同时加载多个插件
+    // map.addControl(new AMap.HawkEye()); //显示缩略图
+    map.addControl(new AMap.Scale()); //显示当前地图中心的比例尺
+    map.addControl(new AMap.MapType()); //显示当前地图中心的比例尺
+  });
+  console.log('map', map)
+
+  const initMakers = () => {
+    mockData.forEach(item => {
+      // console.log(item)
+      const marker = new AMap.Marker({
+        icon: "//a.amap.com/jsapi_demos/static/demo-center/icons/poi-marker-default.png",
+        position: item.pos,
+        title: item.title,
+        label: item.title,
+        extData: { url: item.url, id: item.id }
+        // offset: new AMap.Pixel(-26, -54),
+      });
+
+      marker.setMap(map);
+      marker.on('click', () => {
+        const data = marker.getExtData()
+        window.open(data.url)
+        console.log('click', data)
+      })
+    })
+  }
+  initMakers();
+
 };
 
 onMounted(loadMap);
 </script>
+<style>
+body {
+  padding: 0;
+  margin: 0;
+}
+
+.map-container {
+  width: 100%;
+  height: 100vh;
+}
+</style>