高德地图热力图,刷新才会显示热力图,其他页面切换过来不展示?

新手上路,请多包涵

从其他页面切换过来,不显示热力图数据。只有刷新了才会展示,不知道问题在哪?

    mounted() {
    this.init1()
    this.$nextTick(() => {
      this.addMarker()
      
    })
  },
init1() {
      console.log('加载地图')
      const This = this
      //实例化地图
      const map = new AMap.Map('container', {
        resizeEnable: true,
        zoom: This.cpInfo.zoom,
        zooms: [3, 17],
        mapStyle: 'amap://styles/blue', ////默认地图样式(normal)靛青蓝blue

        center: This.cpInfo.center,
      })
      map.setDefaultCursor('crosshair')
      this.map = map
      this.AMap = AMap
      this.loadHeatPlugin()
    },
    // 加载热力图插件
    loadHeatPlugin() {
      console.log('加载热力图插件')
      const This = this
      This.map.plugin(['AMap.HeatMap'], function () {
        This.heatMao = new AMap.HeatMap(This.map, {
          radius: 25, // 每个点的覆盖范围半径,单位是像素
          opacity: [0, 0.8],
          gradient: {
            0.3: 'blue',
            0.5: 'green',
            0.7: 'yellow',
            0.9: 'red',
          },
        })
        This.initHeatMapLiveApp()
      })
    },
    // 加载热力图数据
    initHeatMapLiveApp() {
      console.log('加载热力图数据')
      //设置数据集:该数据为北京部分“公园”数据
      this.heatMaoList = [
        { lng: '116.012743', lat: '31.754593', count: 8 },
        { lng: '116.012963', lat: '31.754639', count: 9 },
        { lng: '116.012941', lat: '31.754753', count: 9 },
        { lng: '116.012866 ', lat: '31.754807', count: 10 },
        { lng: '116.012437', lat: '31.755026,', count: 8 },
        { lng: ' 116.012528', lat: '31.755022', count: 5 },
        { lng: '116.012362', lat: '31.755113', count: 9 },
        { lng: ' 116.012437 ', lat: '31.755254', count: 7 },
        { lng: ' 116.012437', lat: '31.755382', count: 8 },
        { lng: '116.01248', lat: '31.75546', count: 9 },
        { lng: '116.012818', lat: '31.755528', count: 9 },
        { lng: '116.012823 ', lat: '31.755218', count: 10 },
        { lng: '116.012823', lat: '31.755218', count: 8 },
        { lng: ' 116.012823', lat: '31.755218', count: 5 },
        { lng: '116.012823', lat: '31.755218', count: 9 },
        { lng: '116.012823 ', lat: '31.755218', count: 7 },
        { lng: ' 116.013102', lat: '31.755127', count: 8 },
        { lng: ' 116.013065', lat: '31.755033', count: 9 },
        { lng: '116.013167', lat: '31.755152', count: 9 },
        { lng: '116.013258 ', lat: '31.755275', count: 10 },
        { lng: '116.01329', lat: '31.755457', count: 8 },
        { lng: '116.013124', lat: '31.755553', count: 9 },
        { lng: '116.01307 ', lat: '31.755462', count: 7 },
        { lng: '116.012941', lat: '31.755302', count: 8 },
        { lng: '116.012829', lat: '31.755156', count: 9 },
        { lng: '116.012829', lat: '31.755074', count: 9 },
        { lng: '116.012872 ', lat: '31.755033', count: 10 },
        { lng: '116.012893', lat: '31.754978', count: 8 },
        { lng: '116.013489 ', lat: '31.755544', count: 5 },
        { lng: '116.013542', lat: '31.755599', count: 9 },
        { lng: '116.013478 ', lat: '31.755621', count: 7 },
        { lng: '116.013403', lat: '31.755612', count: 8 },
        { lng: '116.013435', lat: '31.755685', count: 9 },
        { lng: '116.013355', lat: '31.755713', count: 9 },
        { lng: '116.013435', lat: '31.755836', count: 9 },
        { lng: '116.013521 ', lat: '31.755736', count: 10 },
        { lng: '116.013564', lat: '31.755822', count: 8 },
        { lng: '116.013462 ', lat: '31.7559', count: 5 },
        { lng: '116.013693', lat: '31.755891', count: 9 },
        { lng: '116.013752 ', lat: '31.755913', count: 7 },
        { lng: '116.013574', lat: '31.75626', count: 8 },
        { lng: ' 116.013585', lat: '31.756338', count: 5 },
        { lng: '116.013778', lat: '31.756397', count: 9 },
        { lng: '116.013896 ', lat: '31.756438', count: 7 },
        { lng: '116.013886', lat: '31.756424', count: 8 },
        { lng: '116.013982', lat: '31.756447', count: 9 },
        { lng: '116.013918', lat: '31.756383', count: 9 },
        { lng: '116.014569 ', lat: '31.755701', count: 3 },
        { lng: '116.014622', lat: '31.755564', count: 5 },
        { lng: '116.014703 ', lat: '31.755446', count: 3 },
        { lng: '116.014553', lat: '31.755396', count: 5 },
        { lng: '116.014515 ', lat: '31.755555', count: 7 },
        { lng: '116.014134 ', lat: '31.754762', count: 10 },
        { lng: '116.014172', lat: '31.754862', count: 8 },
        { lng: ' 116.014215', lat: '31.754766', count: 5 },
        { lng: '116.013866', lat: '31.754908', count: 9 },
        { lng: '116.013946 ', lat: '31.754999', count: 7 },
        { lng: '116.013968', lat: '31.754912', count: 8 },
        { lng: '116.01349', lat: '31.754068', count: 9 },
        { lng: '116.013582', lat: '31.754032', count: 9 },
        { lng: '116.013453 ', lat: '31.753977', count: 10 },
        { lng: '116.01378', lat: '31.754506', count: 8 },
        { lng: '116.013775 ', lat: '31.754597', count: 5 },
        { lng: '116.013582', lat: '31.754483', count: 9 },
      ]
      // this.heatMaoList = heatmapData
      this.heatMao.setDataSet({
        data: this.heatMaoList, // 加载数据一节中,js文件内保存所有数据的变量。
        max: 10, // 见gradient的例子
      })
    },
阅读 1.7k
撰写回答
你尚未登录,登录后可以
  • 和开发者交流问题的细节
  • 关注并接收问题和回答的更新提醒
  • 参与内容的编辑和改进,让解决方法与时俱进