basemap.vue 934 B

1234567891011121314151617181920212223242526272829303132333435363738394041424344454647484950
  1. <template>
  2. <view class="mapbox">
  3. <map class="map" scale="3" :markers="covers" :enable-zoom="true">
  4. </map>
  5. </view>
  6. </template>
  7. <script>
  8. export default {
  9. data() {
  10. return {
  11. covers:[]
  12. }
  13. },
  14. methods: {
  15. async getweizhi(id) {
  16. const res = await this.$myRequest({
  17. url: '/api/api_gateway?method=device.device_sms_alert.user_device_map_location',
  18. data: {
  19. device_ids:id
  20. }
  21. })
  22. console.log(res)
  23. this.covers = []
  24. var obj = {
  25. latitude:Number(res[0].lat),
  26. longitude:Number(res[0].lng),
  27. iconPath:"https://webstaticimg.oss-cn-hangzhou.aliyuncs.com/bigdata_app/image/distribution/"+res[0].device_type_id+".png"
  28. }
  29. this.covers.push(obj)
  30. },
  31. },
  32. onLoad(data) {
  33. // console.log(data.device_id)
  34. this.getweizhi(data.device_id)
  35. }
  36. }
  37. </script>
  38. <style lang="less">
  39. .mapbox{
  40. width: 100%;
  41. height: 100vh;
  42. .map{
  43. width: 100%;
  44. height: 100vh;
  45. }
  46. }
  47. </style>