mapView.vue 1.4 KB

1234567891011121314151617181920212223242526272829303132333435363738394041424344454647484950515253545556575859606162636465666768697071727374757677
  1. <template>
  2. <view>
  3. <view class="">
  4. <view class="">
  5. <map id="map" class="mapbody" :style="'height:'+mapHeight+'rpx;'" :latitude="latitude" :longitude="longitude" :markers="covers" @regionchange="regionChange">
  6. </map>
  7. </view>
  8. </view>
  9. </view>
  10. </template>
  11. <script>
  12. export default {
  13. name:"mapView",
  14. props: {
  15. pcovers:'',
  16. },
  17. data() {
  18. return {
  19. mapHeight:0,
  20. mapready:false,
  21. covers:[],
  22. includePoints:[],
  23. latitude:0,
  24. longitude:0
  25. };
  26. },
  27. created() {
  28. var info = uni.getSystemInfoSync();
  29. console.log(info);
  30. this.mapHeight=info.windowHeight/2;
  31. this.mapContext = uni.createMapContext("map",this);
  32. },
  33. watch: {
  34. pcovers(val){
  35. this.covers = this.pcovers;
  36. let include = [];
  37. for(var i=0;i<this.covers.length;i++){
  38. let poi = {
  39. longitude: this.covers[i].longitude,
  40. latitude: this.covers[i].latitude
  41. }
  42. include.push(poi);
  43. }
  44. this.latitude=this.pcovers[2].latitude;
  45. this.longitude=this.pcovers[2].longitude;
  46. }
  47. },
  48. methods: {
  49. regionChange(){
  50. var that = this;
  51. if(!this.mapready){
  52. return;
  53. }
  54. this.mapContext.getCenterLocation({
  55. success: res => {
  56. console.log('getCenterLocation');
  57. },
  58. fail: res => {
  59. console.log("getCenterLocation11")
  60. }
  61. })
  62. },
  63. },
  64. }
  65. </script>
  66. <style>
  67. .mapbody{
  68. width: 100%;
  69. }
  70. </style>