Página inicial Explorar Ajuda
Entrar
zhilian
/
admin-ui
1
0
Fork 0
Arquivos Issues 0 Pull Requests 0 Wiki
Ver código fonte

feat: 增加地图ak和地图中心电从参数中获取

yanglzh 1 ano atrás
pai
18c90525e4
commit
0efb5c8453
5 arquivos alterados com 22 adições e 10 exclusões
Visão dividida Mostrar estatísticas do Diff
  1. 1 0
      README rule.md
  2. 0 1
      index.html
  3. 7 0
      src/App.vue
  4. 1 3
      src/main.ts
  5. 13 6
      src/views/iot/device/instance/component/map.vue

+ 1 - 0
README rule.md
Ver arquivo 

@@ -6,5 +6,6 @@
 
 4. 页面撑满
 
 5. 表格高度
 
 6. 文件上传，图片上传 增加 source 字段
 
+7. 地图ak和地图中心电从参数中获取
 
 多余log
 
 大页面分组件

+ 0 - 1
index.html
Ver arquivo 

@@ -5,7 +5,6 @@
 
 	<meta http-equiv="X-UA-Compatible" content="IE=edge" />
 
 	<meta name="viewport" content="width=device-width, initial-scale=1.0" />
 
 	<link rel="icon" href="/favicon.ico" />
 
-	<script type="text/javascript" src="https://api.map.baidu.com/api?v=1.0&type=webgl&ak=sGgaYnGYF87fy9dVDvLF5GemYMH02aax"></script>
 
 	<title></title>
 
 </head>
 
 <body>

+ 7 - 0
src/App.vue
Ver arquivo 

@@ -29,6 +29,13 @@ export default defineComponent({
 
 			localStorage.setItem('sysinfo', JSON.stringify(res));
 
 			sessionStorage.setItem('btnNoAuth', res.sysButtonSwitch ? '' : '1');
 
 			sessionStorage.setItem('colNoAuth', res.sysColumnSwitch ? '' : '1');
 
+			// 增加map配置
 
+			const script = document.createElement('script');
 
+			script.type = 'text/javascript';
 
+			script.src = `//api.map.baidu.com/api?v=1.0&type=webgl&ak=${res.mapAccessKey}&callback=onBMapCallback`
 
+			document.head.appendChild(script);
 
+			// 加上callback才会加载成功
 
+			window.onBMapCallback = () => {}
 
 		});
 
 	},
 
 	setup() {

+ 1 - 3
src/main.ts
Ver arquivo 

@@ -23,11 +23,9 @@ import pagination from '/@/components/pagination/index.vue'
 
 //引入json数据展示
 
 import JsonViewer from "vue3-json-viewer"
 
 
-
 
 import VForm3 from 'vform3-builds'  //引入VForm3库
 
 import 'vform3-builds/dist/designer.style.css'  //引入VForm3样式
 
 
-
 
 const app = createApp(App);
 
 
 directive(app);
 
@@ -49,4 +47,4 @@ app.config.globalProperties.getUpFileUrl = getUpFileUrl
 
 app.config.globalProperties.handleTree = handleTree
 
 app.config.globalProperties.useDict = useDict
 
 app.config.globalProperties.selectDictLabel = selectDictLabel
 
-app.config.globalProperties.mittBus = mitt();
 
+app.config.globalProperties.mittBus = mitt();

+ 13 - 6
src/views/iot/device/instance/component/map.vue
Ver arquivo 

@@ -13,13 +13,13 @@
 
           <el-input v-model="lng" placeholder="经度" />
 
           <div>-</div>
 
           <el-input v-model="lat" placeholder="纬度" />
 
-           <el-button @click="searchByCoordinate" type="primary">搜索</el-button>
 
+          <el-button @click="searchByCoordinate" type="primary">搜索</el-button>
 
         </div>
 
 
         <div class="map" ref="mapContainer"></div>
 
         <!-- 地址解析结果 -->
 
         <div class="address-result" v-if="address">
 
-<!--          解析到地址：{{ address }}-->
 
+          <!--          解析到地址：{{ address }}-->
 
           <el-form-item label="经度" class="input-item">
 
             <el-input v-model="lng" />
 
           </el-form-item>
 
@@ -40,6 +40,7 @@
 
 import { defineEmits, defineExpose, nextTick, ref } from 'vue';
 
 import { Search } from '@element-plus/icons-vue';
 
 
+
 
 const mapContainer = ref<HTMLElement | null>(null);
 
 const address = ref('');
 
 const lng = ref('');
 
@@ -64,7 +65,13 @@ const openDialog = (row: any) => {
 
       lat.value = row.lat;
 
       searchByCoordinate();
 
     } else {
 
-      map.centerAndZoom('沈阳市', 10);
 
+      const mapLngAndLat = JSON.parse(localStorage.sysinfo || '{"mapLngAndLat": null}').mapLngAndLat
 
+      if (mapLngAndLat) {
 
+        const [lng, lat] = mapLngAndLat.split(',')
 
+        map.centerAndZoom(new BMapGL.Point(lng.trim(), lat.trim()), 10)
 
+      } else {
 
+        map.centerAndZoom('北京', 10);
 
+      }
 
     }
 
     map.enableScrollWheelZoom(true);
 
 
@@ -123,10 +130,10 @@ const setAddressByCoordinate = (lng: string | number, lat: string | number) => {
 
   // 新查询经纬度方法
 
   map?.centerAndZoom(new BMapGL.Point(lng, lat), 18);
 
   // 创建地理编码实例, 并配置参数获取乡镇级数据
 
-  const myGeo = new BMapGL.Geocoder({extensions_town: true});
 
+  const myGeo = new BMapGL.Geocoder({ extensions_town: true });
 
   // 根据坐标得到地址描述
 
-  myGeo.getLocation(new BMapGL.Point(lng, lat), function(result){
 
-    if (result){
 
+  myGeo.getLocation(new BMapGL.Point(lng, lat), function (result) {
 
+    if (result) {
 
       address.value = result.content.poi_desc;
 
       if (oldAddress.value) {
 
         address.value = oldAddress.value;