irrmap.vue 1.3 KB

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