refactor(map): adjust some styles

src/views/device/detail/components/DeviceMap.vue

@@ -1,5 +1,10 @@
 <template>
-  <div ref="map" />
+  <div ref="map">
+    <i
+      class="o-icon--active el-icon-place u-pointer"
+      @click="onPlace"
+    />
+  </div>
 </template>
 
 <script>
@@ -13,12 +18,6 @@ export default {
       required: true
     }
   },
-  data () {
-    return {
-      ak: process.env.VUE_APP_BAIDU_MAP_AK,
-      show: false
-    }
-  },
   computed: {
     center () {
       const { longitude, latitude } = this.device
@@ -31,8 +30,9 @@ export default {
     center () {
       if (this.center) {
         if (this.map) {
-          this.map.setZoomAndCenter(18, this.center)
+          this.map.setCenter(this.center)
           this.map.getAllOverlays('marker')[0].setPosition(this.center)
+          this.map.setFitView()
         } else {
           this.initMap()
         }
@@ -45,6 +45,9 @@ export default {
   mounted () {
     this.center && this.initMap()
   },
+  activated () {
+    this.map?.setFitView(null, true)
+  },
   beforeDestroy () {
     this.map?.destroy()
   },
@@ -56,15 +59,35 @@ export default {
         plugins: ['']
       }).then(AMap => {
         this.map = new AMap.Map(this.$refs.map, {
-          zoom: 18,
           center: this.center
         })
         this.map.add(new AMap.Marker({
           position: this.center,
           icon: 'https://webapi.amap.com/theme/v1.3/markers/n/mark_r.png'
         }))
+        this.map.setFitView()
       })
+    },
+    onPlace () {
+      this.map?.setFitView()
     }
   }
 }
 </script>
+
+<style lang="scss" scoped>
+.o-icon--active {
+  display: inline-flex;
+  justify-content: center;
+  align-items: center;
+  position: absolute;
+  top: 0;
+  left: 0;
+  width: 48px;
+  height: 48px;
+  font-size: 24px;
+  border-radius: 50%;
+  background-color: #fff;
+  z-index: 9;
+}
+</style>