从其他页面切换过来,不显示热力图数据。只有刷新了才会展示,不知道问题在哪?
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的例子
})
},