app-map.vue 2.6 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293
  1. <template>
  2. <view :style="{background: `${marginTopColor}`,paddingTop: `${marginTop}rpx`}">
  3. <view class="main-center app-map"
  4. :style="{background: `${backgroundColor}`,padding: `${paddingY}rpx ${paddingX}rpx`, backgroundImage: `url(${backgroundPicUrl? backgroundPicUrl : ''})`}">
  5. <map enable-3D
  6. show-compass
  7. enable-overlooking
  8. enable-zoom
  9. enable-scroll
  10. enable-rotate
  11. show-location
  12. @callouttap="openMap"
  13. :markers="markers"
  14. :latitude="latitude"
  15. :longitude="longitude"
  16. :style="{height: `${height}rpx`}"
  17. ></map>
  18. </view>
  19. </view>
  20. </template>
  21. <script>
  22. // 头条小程序 不支持 地图组件
  23. export default {
  24. name: "app-map",
  25. props: {
  26. backgroundColor: String,
  27. backgroundPicUrl: String,
  28. height: Number,
  29. latitude: String,
  30. longitude: String,
  31. marginTop: Number,
  32. marginTopColor: String,
  33. paddingX: Number,
  34. paddingY: Number,
  35. address: {
  36. type: String,
  37. default() {
  38. return '';
  39. }
  40. },
  41. },
  42. data() {
  43. return {
  44. markers: [],
  45. };
  46. },
  47. mounted() {
  48. const self = this;
  49. let marker = {
  50. iconPath: "../../../static/image/summary-map.png",
  51. id: 0,
  52. width: 43,
  53. height: 43,
  54. latitude: this.latitude,
  55. longitude: this.longitude,
  56. };
  57. if (self.address) {
  58. marker.callout = {
  59. content: self.address,
  60. color: '#353535',
  61. fontSize: '13',
  62. bgColor: '#FFFFFF',
  63. display: 'ALWAYS',
  64. textAlign: 'center',
  65. padding: '20rpx',
  66. }
  67. }
  68. self.markers = [marker];
  69. },
  70. methods: {
  71. openMap() {
  72. uni.openLocation({
  73. latitude: parseFloat(this.latitude),
  74. longitude: parseFloat(this.longitude),
  75. name: this.address,
  76. address: this.address,
  77. })
  78. },
  79. }
  80. }
  81. </script>
  82. <style scoped lang="scss">
  83. .app-map {
  84. background-repeat: no-repeat;
  85. background-size: 100% 100%;
  86. map {
  87. width: 100%;
  88. }
  89. }
  90. </style>