From 6c994becee2498c67127ba5c11f0ea73ad63e07a Mon Sep 17 00:00:00 2001
From: zhenyuWang <13641039885@163.com>
Date: Sun, 4 Sep 2022 00:34:23 +0800
Subject: [PATCH] =?UTF-8?q?feat(h5=20map):=20control=20=E6=8A=BD=E7=A6=BB?=
=?UTF-8?q?=E7=BB=84=E4=BB=B6?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit
---
.../h5/view/components/map/index.vue | 74 ++-------------
.../h5/view/components/map/map-control.js | 90 +++++++++++++++++++
2 files changed, 98 insertions(+), 66 deletions(-)
create mode 100644 src/platforms/h5/view/components/map/map-control.js
diff --git a/src/platforms/h5/view/components/map/index.vue b/src/platforms/h5/view/components/map/index.vue
index d6840563a..e7ed397fb 100644
--- a/src/platforms/h5/view/components/map/index.vue
+++ b/src/platforms/h5/view/components/map/index.vue
@@ -9,6 +9,11 @@
:key="item.id"
v-bind="item"
/>
+
{
- this.createControls()
- })
- },
includePoints () {
this.mapReady(() => {
this.fitBounds(this.includePoints)
@@ -223,7 +224,6 @@ export default {
beforeDestroy () {
this.removePolyline()
this.removeCircles()
- this.removeControls()
this.removeLocation()
},
methods: {
@@ -446,9 +446,6 @@ export default {
if (this.circles && Array.isArray(this.circles) && this.circles.length) {
this.createCircles()
}
- if (this.controls && Array.isArray(this.controls) && this.controls.length) {
- this.createControls()
- }
if (this.showLocation) {
this.createLocation()
}
@@ -590,61 +587,6 @@ export default {
})
circles.splice(0, circles.length)
},
- createControls () {
- const maps = this._maps
- var _self = this
- var map = this._map
- var controls = this.controlsSync
- this.removeControls()
- this.controls.forEach(option => {
- var position = option.position || {}
- var control = document.createElement('div')
- var img = new Image()
- control.appendChild(img)
- var style = control.style
- style.position = 'absolute'
- style.width = 0
- style.height = 0
- style.top = 0
- style.left = 0
- style.zIndex = 999
- img.onload = () => {
- if (option.position.width) {
- img.width = option.position.width
- }
- if (option.position.height) {
- img.height = option.position.height
- }
- var style = img.style
- style.position = 'absolute'
- style.left = (position.left || 0) + 'px'
- style.top = (position.top || 0) + 'px'
- style.maxWidth = 'initial'
- }
- img.src = this.$getRealPath(option.iconPath)
- img.onclick = function ($event) {
- if (option.clickable) {
- _self.$trigger('controltap', $event, {
- controlId: option.id
- })
- }
- $event.stopPropagation()
- }
- if (IS_AMAP) {
- this.$refs.mapContainer.appendChild(control)
- } else {
- map.controls[maps.ControlPosition.TOP_LEFT].push(control)
- }
- controls.push(control)
- })
- },
- removeControls () {
- var controls = this.controlsSync
- controls.forEach(control => {
- control.remove()
- })
- controls.splice(0, controls.length)
- },
createLocation () {
const maps = this._maps
const map = this._map
diff --git a/src/platforms/h5/view/components/map/map-control.js b/src/platforms/h5/view/components/map/map-control.js
new file mode 100644
index 000000000..6bed9e0fd
--- /dev/null
+++ b/src/platforms/h5/view/components/map/map-control.js
@@ -0,0 +1,90 @@
+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
+ }
+}
--
GitLab