irrmap.vue 1.2 KB

12345678910111213141516171819202122232425262728293031323334353637383940414243444546474849505152535455565758596061
  1. <template>
  2. <view>
  3. <view class="mapbox">
  4. <map class="map" :markers="covers" :latitude="latitude" :longitude="longitude"></map>
  5. </view>
  6. </view>
  7. </template>
  8. <script>
  9. export default {
  10. data() {
  11. return {
  12. latitude: "",
  13. longitude: "",
  14. covers: []
  15. }
  16. },
  17. onLoad(option) {
  18. console.log(option)
  19. // var
  20. var res = option.lnglat.split(",")
  21. var obj = {}
  22. obj.latitude = Number(res[1])
  23. this.latitude = Number(res[1])
  24. obj.longitude = Number(res[0])
  25. this.longitude = Number(res[0])
  26. obj.title = option.basename
  27. obj.id = 1
  28. obj.callout = { //自定义标记点上方的气泡窗口 点击有效
  29. content: option.basename, //文本
  30. color: '#ffffff', //文字颜色
  31. fontSize: 14, //文本大小
  32. borderRadius: 2, //边框圆角
  33. bgColor: '#00c16f', //背景颜色
  34. display: 'ALWAYS', //常显
  35. }
  36. obj.iconPath = "../../static/images/distribution/f2df86753bf7c9e311a59f632f5c545.png"
  37. this.covers.push(obj)
  38. console.log(this.covers)
  39. },
  40. methods: {
  41. }
  42. }
  43. </script>
  44. <style lang="scss">
  45. .mapbox {
  46. width: 100%;
  47. height: 100vh;
  48. .map {
  49. width: 100%;
  50. height: 100%;
  51. /deep/.csssprite {
  52. display: none;
  53. }
  54. }
  55. }
  56. </style>