前端熊二
前端熊二
  • 发布:2023-11-20 14:44
  • 更新:2023-11-20 14:49
  • 阅读:155

map组件,nvue文件中绘制圆的数据变化了,视图不变化,vue文件正常

分类:nvue
2023-11-20 14:44 负责人:无 分享
已邀请:
前端熊二

前端熊二 (作者)


<template>  
  <view class="index">  
    <map  
      id="map"  
      ref="map"  
      :style="'width: 100%; height:' + height"  
      :latitude="latitude"  
      :longitude="longitude"  
      :markers="covers"  
      :circles="circles"  
      :show-location="true"  
      :scale="scale"  
      :max-scale="18"  
      :show-scale="true"  
      @markertap="markertap"  
      @callouttap="callouttap"  
      @regionchange="regionchange"  
      @controltap="controltap"  
    >  
    </map>  
  </view>  
</template>  

<script>  
export default {  
  data() {  
    return {  
      show: false,  
      title: 'map',  
      latitude: 39.909,  
      longitude: 116.39742,  
      scale: 16,  
      mapContext: '',  
      covers: [  
        {  
          id: 1,  
          latitude: 39.909,  
          longitude: 116.39742,  
          iconPath: '../../static/map.png',  
          width: 30,  
          height: 30,  
          data: {  
            name: '雨奇科技',  
            list: 'wawaw',  
          },  
          customCallout: {  
            display: 'BYCLICK',  
            anchorY: 0,  
            anchorX: 0,  
          },  
        },  
        {  
          id: 2,  
          latitude: 39.9,  
          longitude: 116.39,  
          iconPath: '../../static/map.png',  
          width: 30,  
          height: 30,  
          data: {  
            name: '峰值时刻',  
            list: 'dadada',  
          },  
          customCallout: {  
            display: 'BYCLICK',  
            anchorY: 0,  
            anchorX: 0,  
          },  
        },  
      ],  
      // 地图控件  
      controls: [  
        {  
          id: 1,  
          iconPath: '../../static/map.png',  
          position: {  
            top: 700,  
          },  
          clickable: true,  
        },  
      ],  
      // 显示圆配置  
      circles: [  
        {  
          //在地图上显示圆  
          latitude: 139,  
          longitude: 35,  
          fillColor: '#D9E6EF', //填充颜色  
          color: '#A7B6CB', //描边的颜色  
          radius: 50000, //半径  
          strokeWidth: 2, //描边的宽度  
        },  
      ],  
    }  
  },  
  props: {  
    height: {  
      type: String,  
      default: '100vh',  
    },  
  },  
  onShow() {},  
  mounted() {  
    this.getLocation()  
    //获取map上下文  
    this.mapContext = uni.createMapContext('map', this)  
    // 缩放视野展示所有经纬度 [上,右,下,左]  
    this.mapContext.includePoints({  
      padding: [150, 150, 150, 150], // 设置地图边缘与 marker 的间距  
    })  
  },  
  methods: {  
    getLocation() {  
      uni.getLocation({  
        type: 'gcj02',  
        success:   
          this.circles.push({  
            //在地图上显示圆  
            latitude: res.latitude,  
            longitude: res.longitude,  
            fillColor: '#D9E6EF', //填充颜色  
            color: '#A7B6CB', //描边的颜色  
            radius: 50000, //半径  
            strokeWidth: 2, //描边的宽度  
          })  
          this.covers[0].latitude = res.latitude  
          this.covers[0].longitude = res.longitude  
          this.latitude = res.latitude  
          this.longitude = res.longitude  
          this.renderMarkers()  
          this.scale = 16  
          this.mapContext.getScale({  
            success: () => {  
              this.$nextTick(() => {  
                this.scale = 16  
              })  
            },  
          })  
        },  
      })  
    },  
    // 点击标记点  
    markertap(e) {  
      console.log(e, '点击标记点')  
      const filteredData = this.covers.filter((item) => item.id === e.detail.markerId)[0]  
      this.latitude = filteredData.latitude  
      this.longitude = filteredData.longitude  
      this.mapContext.moveToLocation({  
        latitude: this.latitude,  
        longitude: this.longitude,  
      })  
    },  

    // 获取当前地图中心的经纬度  
    getCenterLocation() {  
      this.mapContext.getCenterLocation({  
        success: (res) => {  
          this.circles.splice(0, 1, {  
            //在地图上显示圆  
            latitude: res.latitude,  
            longitude: res.longitude,  
            fillColor: '#D9E6EF', //填充颜色  
            color: '#A7B6CB', //描边的颜色  
            radius: 50000, //半径  
            strokeWidth: 2, //描边的宽度  
          })  
          this.covers[0].latitude = res.latitude  
          this.covers[0].longitude = res.longitude  
          this.renderMarkers()  
        },  
      })  
    },  

    // 移动地图  
    regionchange(e) {  
      // 缩放级别  
      if (e.causedBy != 'drag') {  
        this.mapContext.getScale({  
          success: (res) => {  
            this.scale = res.scale  
          },  
        })  
      }  
      if (e.type === 'end' && e.causedBy === 'drag') {  
        this.getCenterLocation() // 地图移动时获取中心点的经纬度  
        //在安卓中是 end 事件  
      } else if (e.type === 'regionchange' && e.causedBy != 'drag') {  
        // 在ios中是 regionchange  
        this.getCenterLocation()  
      }  
    },  

    //重新渲染 markers  
    renderMarkers() {  
      this.mapContext.addMarkers({  
        markers: this.covers,  
        clear: true,  
      })  
    },  

    // 点击控件  
    controltap(e) {  
      const id = e.detail.controlId  
      if (id === 1) {  
        this.getLocation()  
      }  
    },  
  },  
}  
</script>  

<style>  

</style>

要回复问题请先登录注册