refactor(h5 map): 优化map control创建方式

src/platforms/h5/view/components/map/map-control.js

-import getRealPath from 'uni-platform/helpers/get-real-path'
-
-export default {
-  props: {
-    id: {
-      type: [Number, String],
-      default: ''
-    },
-    position: {
-      type: Object,
-      require: true
-    },
-    iconPath: {
-      type: String,
-      require: true
-    },
-    clickable: {
-      type: Boolean,
-      default: false
-    }
-  },
-  data () {
-    return {
-      control: null
-    }
-  },
-  watch: {
-    props: function () {
-      this.updateControl()
-    }
-  },
-  mounted () {
-    this.$parent.mapReady(() => {
-      this.addControl()
-    })
-  },
-  beforeDestroy () {
-    this.removeControl()
-  },
-  methods: {
-    addControl () {
-      this.control = document.createElement('div')
-      const style = this.control.style
-      style.position = 'absolute'
-      style.width = 0
-      style.height = 0
-      style.top = 0
-      style.left = 0
-      style.zIndex = 999
-      const img = new Image()
-      img.src = getRealPath(this.iconPath)
-      img.onload = () => {
-        if (this.position.width) {
-          img.width = this.position.width
-        }
-        if (this.position.height) {
-          img.height = this.position.height
-        }
-        const style = img.style
-        style.position = 'absolute'
-        style.left = (this.position.left || 0) + 'px'
-        style.top = (this.position.top || 0) + 'px'
-        style.maxWidth = 'initial'
-
-        this.control.appendChild(img)
-        this.$parent.$el.appendChild(this.control)
-      }
-      img.onclick = ($event) => {
-        if (this.clickable) {
-          this.$parent.$trigger('controltap', $event, {
-            controlId: this.id
-          })
-        }
-        $event.stopPropagation()
-      }
-    },
-    updateControl () {
-      this.removeControl()
-      this.addControl()
-    },
-    removeControl () {
-      if (this.control) {
-        this.control.remove()
-      }
-    }
-  },
-  render () {
-    return null
-  }
-}

src/platforms/h5/view/components/map/map-control.vue

+<template>
+  <div class="uni-map-control">
+    <img
+      :src="imgPath"
+      :style="positionStyle"
+      class="uni-map-control-icon"
+      @click="handleClick"
+    >
+  </div>
+</template>
+
+<script>
+import getRealPath from 'uni-platform/helpers/get-real-path'
+export default {
+  props: {
+    id: {
+      type: [Number, String],
+      default: ''
+    },
+    position: {
+      type: Object,
+      required: true
+    },
+    iconPath: {
+      type: String,
+      required: true
+    },
+    clickable: {
+      type: Boolean,
+      default: false
+    }
+  },
+  computed: {
+    imgPath () {
+      return getRealPath(this.iconPath)
+    },
+    positionStyle () {
+      let positionStyle = `top:${this.position.top || 0}px;left:${this.position.left || 0}px;`
+
+      if (this.position.width) {
+        positionStyle += `width:${this.position.width}px;`
+      }
+      if (this.position.height) {
+        positionStyle += `height:${this.position.height}px;`
+      }
+
+      return positionStyle
+    }
+  },
+  methods: {
+    handleClick ($event) {
+      if (this.clickable) {
+        this.$parent.$trigger('controltap', $event, {
+          controlId: this.id
+        })
+      }
+      $event.stopPropagation()
+    }
+  }
+}
+</script>
+
+<style>
+.uni-map-control{
+  position:absolute;
+  width:0;
+  height:0;
+  top:0;
+  left:0;
+  z-index:999;
+}
+.uni-map-control-icon{
+  position:absolute;
+  max-width:initial;
+}
+</style>