From 33c0ee7a2dac0be52f190ec2302e006e0563e16f Mon Sep 17 00:00:00 2001
From: zhenyuWang <13641039885@163.com>
Date: Wed, 7 Sep 2022 22:11:10 +0800
Subject: [PATCH] =?UTF-8?q?refactor(h5=20map):=20=20=E4=BC=98=E5=8C=96map?=
 =?UTF-8?q?=20control=E5=88=9B=E5=BB=BA=E6=96=B9=E5=BC=8F?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../h5/view/components/map/map-control.js     | 90 -------------------
 .../h5/view/components/map/map-control.vue    | 76 ++++++++++++++++
 2 files changed, 76 insertions(+), 90 deletions(-)
 delete mode 100644 src/platforms/h5/view/components/map/map-control.js
 create mode 100644 src/platforms/h5/view/components/map/map-control.vue

diff --git a/src/platforms/h5/view/components/map/map-control.js b/src/platforms/h5/view/components/map/map-control.js
deleted file mode 100644
index 6bed9e0fd7..0000000000
--- a/src/platforms/h5/view/components/map/map-control.js
+++ /dev/null
@@ -1,90 +0,0 @@
-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
-  }
-}
diff --git a/src/platforms/h5/view/components/map/map-control.vue b/src/platforms/h5/view/components/map/map-control.vue
new file mode 100644
index 0000000000..f63dae1660
--- /dev/null
+++ b/src/platforms/h5/view/components/map/map-control.vue
@@ -0,0 +1,76 @@
+<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>
-- 
GitLab