diff --git a/src/platforms/h5/view/components/map/index.vue b/src/platforms/h5/view/components/map/index.vue
index d6840563a1a47fcc20e93ddf53f1e3607c0a6e67..e7ed397fb670df598281ca4b798bd22a3ac9a1ca 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 0000000000000000000000000000000000000000..6bed9e0fd7d766b326478071eb5e08198c1d6f39
--- /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
+ }
+}