添加一个独立的 /geo 路由, 并解决在 app.vue 中设置 style height:100% 无效的问题

设置高度100%时，div的高度会等同于其父元素的高度。而上面中id为app的div（vue挂载的div）的父节点是body标签，body标签的父节点是html标签。在默认情况下html和body标签的高度为auto，而浏览器是不会自动给标签添加高度的，所以html和body标签就为0，自然子div的高度设置为100%就不起作用了。

src/App.vue

@@ -54,7 +54,10 @@ export default {
   margin-top: 15px;
   text-align: center;
 }
-
+html,body,#app{
+  height: 100%;
+  width: 100%;
+}
 /*.fade-enter-active,.fade-leave-active {
   -webkit-transition:opacity 1s;
   transition:opacity 1s

src/router/geo.js

@@ -0,0 +1,8 @@
+const GeoMap = () => import('views/geo/GeoMap')
+
+export default {
+  path: '/geo',
+  name: 'GeoMap',
+  component: GeoMap,
+  meta: { needAuth: false }
+}

src/router/index.js

@@ -8,6 +8,7 @@ import VodRouter from './vod'
 import MapRouter from './map'
 import ChartRouter from './chart'
 import VoteRouter from './vote'
+import GeoRouter from './geo'
 
 // 懒加载引入页面组件，es6语法
 // ********************************************************************************************************************
@@ -47,6 +48,7 @@ const routes = [
   VodRouter,
   ChartRouter,
   VoteRouter,
+  GeoRouter,
   {
     path: '/login',
     name: 'Login',

src/views/geo/GeoMap.vue

@@ -0,0 +1,75 @@
+<template>
+  <div id="container" class="amap-wrapper">
+  </div>
+</template>
+
+<script>
+import AMapLoader from '@amap/amap-jsapi-loader'
+
+export default {
+  name: 'GeoMap',
+  data() {
+    return {
+      amap: null,
+      plugins: ['Scale'],
+      // zoom=6 的比例尺为 100km
+      zoom: 5,
+      mapCenter: [108.337237, 33.881985],
+      mapKeys: {
+        securityJsCode: '983d6ee43bab3edf3693e91508f94aa9',
+        key: '7b75ab2839ce68b884c7a682501ea774'
+      }
+    }
+  },
+  mounted() {
+    this.initAMap()
+  },
+  unmounted() {
+    this.map?.destroy()
+  },
+  created() {
+    document.title = 'GeoMap'
+  },
+  methods: {
+    initAMap() {
+      window._AMapSecurityConfig = {
+        securityJsCode: this.mapKeys.securityJsCode
+      }
+      AMapLoader.load({
+        key: this.mapKeys.key, // 申请好的Web端开发者Key，首次调用 load 时必填
+        version: '1.4.15', // 指定要加载的 JSAPI 的版本，缺省时默认为 1.4.15
+        plugins: ['AMap.Autocomplete', 'AMap.PlaceSearch', 'AMap.Scale', 'AMap.OverView', 'AMap.ToolBar',
+          'AMap.MapType', 'AMap.PolyEditor', 'AMap.CircleEditor', 'AMap.MassMarks', 'AMap.Size',
+          'AMap.Pixel'], // 需要使用的的插件列表，如比例尺'AMap.Scale'，支持添加多个如：['...','...']
+        AMapUI: { // 重点就是这个
+          version: '1.0',
+          plugins: ['misc/PathSimplifier', 'overlay/SimpleMarker']// SimpleMarker设置自定义图标，PathSimplifier轨迹展示组件
+        }
+      }).then((AMap) => {
+        // 设置地图容器id
+        this.map = new AMap.Map('container', {
+          viewMode: '2D', // 是否为3D地图模式
+          zoom: this.zoom, // 初始化地图级别
+          center: this.mapCenter // 初始化地图中心点位置
+        })
+
+        // 点击地图事件(获取经纬度)
+        this.map.on('click', (e) => {
+          var lng = e.lnglat.getLng()
+          var lat = e.lnglat.getLat()
+          this.$message.info('选中坐标: (' + lng + ',' + lat + ')')
+        })
+      }).catch((e) => {
+        this.$message.error(e)
+      })
+    }
+  }
+}
+</script>
+
+<style>
+.amap-wrapper {
+  width: 100%;
+  height: 100%;
+}
+</style>