Marker.vue 4.0 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164
  1. <template>
  2. <div>
  3. <slot></slot>
  4. </div>
  5. </template>
  6. <script>
  7. import commonMixin from '../base/mixins/common.js'
  8. import bindEvents from '../base/bindEvent.js'
  9. import {createLabel, createIcon, createPoint} from '../base/factory.js'
  10. export default {
  11. name: 'bm-marker',
  12. mixins: [commonMixin('overlay')],
  13. props: {
  14. position: {},
  15. offset: {},
  16. icon: {},
  17. massClear: {
  18. type: Boolean,
  19. default: true
  20. },
  21. dragging: {
  22. type: Boolean,
  23. default: false
  24. },
  25. clicking: {
  26. type: Boolean,
  27. default: true
  28. },
  29. raiseOnDrag: {
  30. type: Boolean,
  31. default: false
  32. },
  33. draggingCursor: {
  34. type: String
  35. },
  36. rotation: {
  37. type: Number
  38. },
  39. shadow: {
  40. type: Object
  41. },
  42. title: {
  43. type: String
  44. },
  45. label: {
  46. type: Object
  47. },
  48. animation: {
  49. type: String
  50. },
  51. top: {
  52. type: Boolean,
  53. default: false
  54. },
  55. zIndex: {
  56. type: Number,
  57. default: 0
  58. }
  59. },
  60. watch: {
  61. 'position.lng' (val, oldVal) {
  62. const {BMap, originInstance, position, renderByParent, $parent} = this
  63. if (val !== oldVal && val >= -180 && val <= 180) {
  64. originInstance.setPosition(createPoint(BMap, {lng: val, lat: position.lat}))
  65. }
  66. renderByParent && $parent.reload()
  67. },
  68. 'position.lat' (val, oldVal) {
  69. const {BMap, originInstance, position, renderByParent, $parent} = this
  70. if (val !== oldVal && val >= -74 && val <= 74) {
  71. originInstance.setPosition(createPoint(BMap, {lng: position.lng, lat: val}))
  72. }
  73. renderByParent && $parent.reload()
  74. },
  75. 'offset.width' (val, oldVal) {
  76. const {BMap, originInstance} = this
  77. if (val !== oldVal) {
  78. originInstance.setOffset(new BMap.Size(val, this.offset.height))
  79. }
  80. },
  81. 'offset.height' (val, oldVal) {
  82. const {BMap, originInstance} = this
  83. if (val !== oldVal) {
  84. originInstance.setOffset(new BMap.Size(this.offset.width, val))
  85. }
  86. },
  87. icon: {
  88. deep: true,
  89. handler (val) {
  90. const {BMap, originInstance, rotation} = this
  91. originInstance && originInstance.setIcon(createIcon(BMap, val))
  92. rotation && originInstance && originInstance.setRotation(rotation)
  93. }
  94. },
  95. massClear (val) {
  96. val ? this.originInstance.enableMassClear() : this.originInstance.disableMassClear()
  97. },
  98. dragging (val) {
  99. val ? this.originInstance.enableDragging() : this.originInstance.disableDragging()
  100. },
  101. clicking () {
  102. this.reload()
  103. },
  104. raiseOnDrag () {
  105. this.reload()
  106. },
  107. draggingCursor (val) {
  108. this.originInstance.setDraggingCursor(val)
  109. },
  110. rotation (val) {
  111. this.originInstance.setRotation(val)
  112. },
  113. shadow (val) {
  114. this.originInstance.setShadow(val)
  115. },
  116. title (val) {
  117. this.originInstance.setTitle(val)
  118. },
  119. label (val) {
  120. this.reload()
  121. },
  122. animation (val) {
  123. this.originInstance.setAnimation(global[val])
  124. },
  125. top (val) {
  126. this.originInstance.setTop(val)
  127. },
  128. zIndex (val) {
  129. this.originInstance.setZIndex(val)
  130. }
  131. },
  132. methods: {
  133. load () {
  134. const {BMap, map, position, offset, icon, massClear, dragging, clicking, raiseOnDrag, draggingCursor, rotation, shadow, title, label, animation, top, renderByParent, $parent, zIndex} = this
  135. const overlay = new BMap.Marker(new BMap.Point(position.lng, position.lat), {
  136. offset,
  137. icon: icon && createIcon(BMap, icon),
  138. enableMassClear: massClear,
  139. enableDragging: dragging,
  140. enableClicking: clicking,
  141. raiseOnDrag,
  142. draggingCursor,
  143. rotation,
  144. shadow,
  145. title
  146. })
  147. this.originInstance = overlay
  148. label && overlay && overlay.setLabel(createLabel(BMap, label))
  149. overlay.setTop(top)
  150. overlay.setZIndex(zIndex)
  151. bindEvents.call(this, overlay)
  152. if (renderByParent) {
  153. $parent.reload()
  154. } else {
  155. map.addOverlay(overlay)
  156. }
  157. overlay.setAnimation(global[animation])
  158. }
  159. }
  160. }
  161. </script>