1.下载这个插件 @amap/amap-jsapi-loader
import AMap from '@amap/amap-jsapi-loader'
2.初始化地图并且创建热力图
/** 初始化地图 */
async newsMap(){
this.AMap = await AMap.load({
key: '72f3b91c973bdd499a5976547149b567',
version: '1.4.15'
})
this.map = new this.AMap.Map('container', {
resizeEnable: true,
zoom: 11, //级别
center: [116.418261, 39.921984],
})
this.hot()
},
/** 热力图 */
hot(){
var points=[
{"lat":40.04372,"lng":117.627983,"count":1},
{"lat":39.955631,"lng":117.457741,"count":1},
{"lat":39.993408,"lng":117.45536,"count":1},
{"lat":39.994091,"lng":117.454597,"count":1},
{"lat":39.994202,"lng":117.454788,"count":1},
{"lat":39.894291,"lng":117.46257,"count":1},
{"lat":39.892929,"lng":117.463181,"count":1},
{"lat":39.89397,"lng":117.462479,"count":1},
{"lat":39.969528,"lng":117.372078,"count":1},
{"lat":39.994122,"lng":117.45446,"count":1},
{"lat":39.993881,"lng":117.455231,"count":1},
{"lat":40.005829,"lng":117.452492,"count":1},
{"lat":40.020748,"lng":117.451881,"count":1},
{"lat":39.969421,"lng":117.372124,"count":1},
{"lat":39.994221,"lng":117.45443,"count":1},
{"lat":39.993809,"lng":117.455597,"count":1},
{"lat":39.993809,"lng":117.455597,"count":1},
{"lat":39.994202,"lng":117.454407,"count":1},
{"lat":39.99324,"lng":117.454758,"count":1},
{"lat":39.994221,"lng":117.454338,"count":1},
{"lat":39.992401,"lng":117.456612,"count":1},
{"lat":39.994041,"lng":117.454399,"count":1},
{"lat":39.89801,"lng":117.414047,"count":1},
{"lat":39.898361,"lng":117.415947,"count":1},
{"lat":39.897999,"lng":117.414078,"count":1},
{"lat":39.99371,"lng":117.454964,"count":1},
{"lat":39.993969,"lng":117.454559,"count":1},
{"lat":39.992512,"lng":117.454826,"count":1},
{"lat":39.993889,"lng":117.455231,"count":1},
{"lat":39.99398,"lng":117.455032,"count":1},
{"lat":39.895111,"lng":117.462273,"count":1},
{"lat":39.913422,"lng":117.415283,"count":1},
{"lat":39.993832,"lng":117.455391,"count":1},
{"lat":39.993649,"lng":117.454674,"count":1},
{"lat":39.951908,"lng":117.445137,"count":1},
{"lat":39.912979,"lng":117.415421,"count":1},
{"lat":39.994099,"lng":117.454857,"count":1},
{"lat":39.991989,"lng":117.454826,"count":1},
{"lat":39.912971,"lng":117.415466,"count":1},
{"lat":39.913052,"lng":117.415482,"count":1},
{"lat":39.912979,"lng":117.417778,"count":1},
{"lat":39.891682,"lng":117.463417,"count":1},
{"lat":39.894798,"lng":117.462471,"count":1},
{"lat":39.908428,"lng":117.427,"count":1},
{"lat":39.992981,"lng":117.454773,"count":1},
{"lat":39.99403,"lng":117.455132,"count":1},
{"lat":39.993591,"lng":117.455513,"count":1},
{"lat":39.89323,"lng":117.462997,"count":1},
{"lat":39.89323,"lng":117.462997,"count":1},
{"lat":40.249329,"lng":117.366669,"count":1},
{"lat":40.24934,"lng":117.366768,"count":1},
{"lat":39.991982,"lng":117.454826,"count":1},
{"lat":39.97134,"lng":117.45507,"count":1},
{"lat":39.999599,"lng":117.394096,"count":1},
{"lat":39.993931,"lng":117.454681,"count":1},
{"lat":39.994091,"lng":117.454437,"count":1},
{"lat":39.991989,"lng":117.454826,"count":1},
{"lat":39.890659,"lng":117.463791,"count":1},
{"lat":39.89325,"lng":117.463402,"count":1},
{"lat":39.894981,"lng":117.462181,"count":1},
{"lat":39.891472,"lng":117.463547,"count":1},
{"lat":39.99374,"lng":117.455177,"count":1},
{"lat":39.994202,"lng":117.454613,"count":1},
{"lat":39.977379,"lng":117.437683,"count":1},
{"lat":39.949791,"lng":117.462158,"count":1},
{"lat":39.895088,"lng":117.462219,"count":1},
{"lat":39.993992,"lng":117.455353,"count":1},
{"lat":39.993698,"lng":117.454941,"count":1},
{"lat":39.9921,"lng":117.454437,"count":1},
{"lat":39.89389,"lng":117.462334,"count":1},
{"lat":39.89238,"lng":117.463188,"count":1},
{"lat":39.99419,"lng":117.454514,"count":1},
{"lat":39.993328,"lng":117.455078,"count":1},
{"lat":39.993752,"lng":117.454773,"count":1},
{"lat":39.984779,"lng":117.467529,"count":1},
{"lat":39.890961,"lng":117.463692,"count":1},
{"lat":39.993858,"lng":117.455139,"count":1},
{"lat":39.99202,"lng":117.4552,"count":1},
{"lat":39.993729,"lng":117.455231,"count":1},
{"lat":39.994282,"lng":117.453819,"count":1},
{"lat":39.992649,"lng":117.455009,"count":1},
{"lat":39.99379,"lng":117.45462,"count":1},
{"lat":39.872292,"lng":117.396347,"count":1},
{"lat":39.870731,"lng":117.388618,"count":1},
{"lat":39.864349,"lng":117.377289,"count":1},
{"lat":39.719238,"lng":117.331802,"count":1},
{"lat":37.43782,"lng":117.455002,"count":1},
{"lat":37.03352,"lng":117.715134,"count":1},
{"lat":35.836868,"lng":117.090286,"count":1},
{"lat":34.246021,"lng":117.31308,"count":1},
{"lat":33.815498,"lng":117.230698,"count":1},
{"lat":31.99254,"lng":118.57972,"count":1},
{"lat":31.14229,"lng":121.38549,"count":1},
{"lat":39.993961,"lng":117.454727,"count":1},
{"lat":39.993118,"lng":117.455597,"count":1},
{"lat":39.946239,"lng":117.450401,"count":1},
{"lat":39.932121,"lng":117.45546,"count":1},
{"lat":39.99403,"lng":117.453957,"count":1},
{"lat":39.99295,"lng":117.455719,"count":1},
{"lat":39.99184,"lng":117.454819,"count":1},
{"lat":39.994041,"lng":117.454681,"count":1},
{"lat":39.99287,"lng":117.454742,"count":1},
{"lat":39.9939,"lng":117.455,"count":1},
{"lat":39.992741,"lng":117.455673,"count":1},
{"lat":39.994141,"lng":117.45491,"count":1},
{"lat":39.992229,"lng":117.454903,"count":1},
{"lat":39.99369,"lng":117.455383,"count":1},
{"lat":39.969921,"lng":117.49221,"count":1},
{"lat":39.997921,"lng":117.38343,"count":1},
{"lat":39.992619,"lng":117.453873,"count":1},
{"lat":39.992069,"lng":117.454826,"count":1},
{"lat":39.993679,"lng":117.454529,"count":1},
{"lat":40.065201,"lng":117.432068,"count":1},
{"lat":39.992149,"lng":117.454521,"count":1},
{"lat":39.99395,"lng":117.454559,"count":1},
{"lat":39.993851,"lng":117.45472,"count":1},
{"lat":39.993759,"lng":117.454529,"count":1},
{"lat":39.991508,"lng":117.45636,"count":1},
{"lat":39.993858,"lng":117.454979,"count":1},
{"lat":39.967789,"lng":117.452217,"count":1},
{"lat":39.99387,"lng":117.455193,"count":1},
{"lat":39.994179,"lng":117.454727,"count":1},
{"lat":39.992538,"lng":117.456459,"count":1},
{"lat":39.99382,"lng":117.454651,"count":1},
{"lat":39.994221,"lng":117.454872,"count":1},
{"lat":39.951038,"lng":117.471687,"count":1},
{"lat":39.99416,"lng":117.454552,"count":1},
{"lat":40.005821,"lng":117.457581,"count":1},
{"lat":39.97131,"lng":117.455139,"count":1},
{"lat":39.992691,"lng":117.456352,"count":1},
{"lat":39.99379,"lng":117.455048,"count":1},
{"lat":39.99408,"lng":117.454681,"count":1},
{"lat":39.893532,"lng":117.462914,"count":1},
{"lat":39.994129,"lng":117.455147,"count":1},
{"lat":39.99292,"lng":117.455643,"count":1},
{"lat":39.99292,"lng":117.455643,"count":1},
{"lat":39.99366,"lng":117.454567,"count":1},
{"lat":40.008179,"lng":117.460098,"count":1},
{"lat":39.993721,"lng":117.454727,"count":1},
{"lat":40.044239,"lng":117.280792,"count":1},
{"lat":39.971821,"lng":117.37394,"count":1},
{"lat":39.969509,"lng":117.370239,"count":1},
{"lat":39.993839,"lng":117.454659,"count":1},
{"lat":39.89526,"lng":117.466301,"count":1},
{"lat":39.894329,"lng":117.462463,"count":1},
{"lat":39.893089,"lng":117.46302,"count":1},
{"lat":39.894791,"lng":117.46228,"count":1},
{"lat":39.994221,"lng":117.454521,"count":1},
{"lat":39.89296,"lng":117.463112,"count":1},
{"lat":39.97855,"lng":117.369019,"count":1},
{"lat":39.99416,"lng":117.454102,"count":1},
{"lat":39.99411,"lng":117.454422,"count":1},
{"lat":39.894711,"lng":117.46257,"count":1},
{"lat":39.890781,"lng":117.463707,"count":1},
{"lat":39.994129,"lng":117.454422,"count":1}
];
console.log(this.map);
this.map.plugin(["AMap.Heatmap"], ()=> {
//初始化heatmap对象
let heatmap = new this.AMap.Heatmap(this.map, {
radius: 25, //给定半径
opacity: [0, 0.8]
});
// console.log(heatmap.setDataSet);
heatmap.setDataSet({
data: points,
max: 5
});
});
},
注意 : 热力图是需要导入插件的 在html里引入cdn
<script src="//a.amap.com/jsapi_demos/static/resource/heatmapData.js"></script>
