add

src/views/ai/index.vue

@@ -0,0 +1,64 @@
+<template>
+    <div id="containerMap" class="containerMap">
+
+    </div>
+</template>
+<script setup>
+import AMapLoader from '@amap/amap-jsapi-loader';
+import {shallowRef,onMounted} from "vue";
+
+const map = shallowRef(null);
+const AMap = ref();
+
+const initWindow=()=>{
+// 信息窗体
+let infoWindow = new AMap.value.InfoWindow({
+offset: new AMap.value.Pixel(0,-10),
+retainwhenClose: true,
+});
+}
+
+const initMap = () => {
+  AMapLoader.load({
+    key: 'cf0ede1d8833ccb51fb6b084e23a7b5e', // 申请好的Web端开发者Key，首次调用 load 时必填
+    version: '2.0', // 指定要加载的 JSAPI 的版本，缺省时默认为 1.4.15
+    plugins: ['AMap.Scale', 'AMap.ToolBar'], // 需要使用的的插件列表，如比例尺'AMap.Scale'等
+    Loca:{
+      version:'2.0.0'
+    }
+  })
+    .then((res) => {   
+      AMap.value = res
+      // 上来就显示的中心点  北京 116.397, 39.918
+      var lnglat = new res.LngLat(116.397, 39.918);
+      map.value = new res.Map('containerMap', {
+        //设置地图容器id
+        viewMode: '2D', //是否为3D地图模式
+        zoom: 15, //初始化地图级别
+        mapStyle:"amap://styles/dark",//深色模式
+        center: lnglat, //初始化地图中心点位置
+      })
+      map.value.clearMap() // 清除地图覆盖物
+      // 地图是否可拖拽和缩放
+      map.value.setStatus({
+        dragEnable: true, // 是否可拖拽
+        zoomEnable: true, // 是否可缩放
+      })
+
+      initWindow()
+      
+    })
+    .catch((e) => {
+      console.log('error', e)
+    })
+}
+onMounted(() => {
+  initMap()
+})
+</script>
+<style lang='scss' scoped>
+.containerMap{
+    width: 100%;
+    height: calc(100vh - 60px);
+}
+</style>

src/views/alarm/index.vue

@@ -0,0 +1,64 @@
+<template>
+    <div id="containerMap" class="containerMap">
+
+    </div>
+</template>
+<script setup>
+import AMapLoader from '@amap/amap-jsapi-loader';
+import {shallowRef,onMounted} from "vue";
+
+const map = shallowRef(null);
+const AMap = ref();
+
+const initWindow=()=>{
+// 信息窗体
+let infoWindow = new AMap.value.InfoWindow({
+offset: new AMap.value.Pixel(0,-10),
+retainwhenClose: true,
+});
+}
+
+const initMap = () => {
+  AMapLoader.load({
+    key: 'cf0ede1d8833ccb51fb6b084e23a7b5e', // 申请好的Web端开发者Key，首次调用 load 时必填
+    version: '2.0', // 指定要加载的 JSAPI 的版本，缺省时默认为 1.4.15
+    plugins: ['AMap.Scale', 'AMap.ToolBar'], // 需要使用的的插件列表，如比例尺'AMap.Scale'等
+    Loca:{
+      version:'2.0.0'
+    }
+  })
+    .then((res) => {   
+      AMap.value = res
+      // 上来就显示的中心点  北京 116.397, 39.918
+      var lnglat = new res.LngLat(116.397, 39.918);
+      map.value = new res.Map('containerMap', {
+        //设置地图容器id
+        viewMode: '2D', //是否为3D地图模式
+        zoom: 15, //初始化地图级别
+        mapStyle:"amap://styles/dark",//深色模式
+        center: lnglat, //初始化地图中心点位置
+      })
+      map.value.clearMap() // 清除地图覆盖物
+      // 地图是否可拖拽和缩放
+      map.value.setStatus({
+        dragEnable: true, // 是否可拖拽
+        zoomEnable: true, // 是否可缩放
+      })
+
+      initWindow()
+      
+    })
+    .catch((e) => {
+      console.log('error', e)
+    })
+}
+onMounted(() => {
+  initMap()
+})
+</script>
+<style lang='scss' scoped>
+.containerMap{
+    width: 100%;
+    height: calc(100vh - 60px);
+}
+</style>

src/views/camer/index.vue

@@ -0,0 +1,64 @@
+<template>
+    <div id="containerMap" class="containerMap">
+
+    </div>
+</template>
+<script setup>
+import AMapLoader from '@amap/amap-jsapi-loader';
+import {shallowRef,onMounted} from "vue";
+
+const map = shallowRef(null);
+const AMap = ref();
+
+const initWindow=()=>{
+// 信息窗体
+let infoWindow = new AMap.value.InfoWindow({
+offset: new AMap.value.Pixel(0,-10),
+retainwhenClose: true,
+});
+}
+
+const initMap = () => {
+  AMapLoader.load({
+    key: 'cf0ede1d8833ccb51fb6b084e23a7b5e', // 申请好的Web端开发者Key，首次调用 load 时必填
+    version: '2.0', // 指定要加载的 JSAPI 的版本，缺省时默认为 1.4.15
+    plugins: ['AMap.Scale', 'AMap.ToolBar'], // 需要使用的的插件列表，如比例尺'AMap.Scale'等
+    Loca:{
+      version:'2.0.0'
+    }
+  })
+    .then((res) => {   
+      AMap.value = res
+      // 上来就显示的中心点  北京 116.397, 39.918
+      var lnglat = new res.LngLat(116.397, 39.918);
+      map.value = new res.Map('containerMap', {
+        //设置地图容器id
+        viewMode: '2D', //是否为3D地图模式
+        zoom: 15, //初始化地图级别
+        mapStyle:"amap://styles/dark",//深色模式
+        center: lnglat, //初始化地图中心点位置
+      })
+      map.value.clearMap() // 清除地图覆盖物
+      // 地图是否可拖拽和缩放
+      map.value.setStatus({
+        dragEnable: true, // 是否可拖拽
+        zoomEnable: true, // 是否可缩放
+      })
+
+      initWindow()
+      
+    })
+    .catch((e) => {
+      console.log('error', e)
+    })
+}
+onMounted(() => {
+  initMap()
+})
+</script>
+<style lang='scss' scoped>
+.containerMap{
+    width: 100%;
+    height: calc(100vh - 60px);
+}
+</style>

src/views/device/index.vue

@@ -0,0 +1,64 @@
+<template>
+    <div id="containerMap" class="containerMap">
+
+    </div>
+</template>
+<script setup>
+import AMapLoader from '@amap/amap-jsapi-loader';
+import {shallowRef,onMounted} from "vue";
+
+const map = shallowRef(null);
+const AMap = ref();
+
+const initWindow=()=>{
+// 信息窗体
+let infoWindow = new AMap.value.InfoWindow({
+offset: new AMap.value.Pixel(0,-10),
+retainwhenClose: true,
+});
+}
+
+const initMap = () => {
+  AMapLoader.load({
+    key: 'cf0ede1d8833ccb51fb6b084e23a7b5e', // 申请好的Web端开发者Key，首次调用 load 时必填
+    version: '2.0', // 指定要加载的 JSAPI 的版本，缺省时默认为 1.4.15
+    plugins: ['AMap.Scale', 'AMap.ToolBar'], // 需要使用的的插件列表，如比例尺'AMap.Scale'等
+    Loca:{
+      version:'2.0.0'
+    }
+  })
+    .then((res) => {   
+      AMap.value = res
+      // 上来就显示的中心点  北京 116.397, 39.918
+      var lnglat = new res.LngLat(116.397, 39.918);
+      map.value = new res.Map('containerMap', {
+        //设置地图容器id
+        viewMode: '2D', //是否为3D地图模式
+        zoom: 15, //初始化地图级别
+        mapStyle:"amap://styles/dark",//深色模式
+        center: lnglat, //初始化地图中心点位置
+      })
+      map.value.clearMap() // 清除地图覆盖物
+      // 地图是否可拖拽和缩放
+      map.value.setStatus({
+        dragEnable: true, // 是否可拖拽
+        zoomEnable: true, // 是否可缩放
+      })
+
+      initWindow()
+      
+    })
+    .catch((e) => {
+      console.log('error', e)
+    })
+}
+onMounted(() => {
+  initMap()
+})
+</script>
+<style lang='scss' scoped>
+.containerMap{
+    width: 100%;
+    height: calc(100vh - 60px);
+}
+</style>