vue.js高德地图实现热点图代码实例

1.在index.html引入高德地图JSAPI<scriptsrc="https://webapi.amap.com/maps?v=1.3&key=xxx"></script>2

1.在index.html引入高德地图JSAPI

 <script src="https://webapi.amap.com/maps?v=1.3&key=xxx"></script>

2.地图dom

<div class="map-container">
 <div id="container" style="width:100%;height:500px"></div>
</div>

3.js实现

export default {
	data() {},
 methods:{
 initMap(){
 let map = new AMap.Map('container', {
 features: ['bg', 'road'],
 resizeEnable: true,
 center: [116.397428, 39.90923],
 zoom: 11,
 viewMode: '2D',
 pitch: 50,
 showZoomBar:true,
 });
 if (!this.isSupportCanvas()) {
 this.$Message.info('热力图仅对支持canvas的浏览器适用,您所使用的浏览器不能使用热力图功能,请换个浏览器试试~')
 }
 let heatmap;	
 let heatmapData=[];
 //从接口获取数据 
 //官网示例数据结构 http://a.amap.com/jsapi_demos/static/resource/heatmapData.js
 this.$axios.get("/map/data").then(res => {
 if(res.success) { 
 if(res.data){
 res.data.forEach(item=>{
 let obj={
 lng:item.longitude,
 lat:item.latitude,
 count:item.count,
 }
 heatmapData.push(obj);
 })
 map.plugin(["AMap.Heatmap"], function() {
 //初始化heatmap对象
  heatmap = new AMap.Heatmap(map, {
       radius: 25, //给定半径
       opacity: [0, 0.8],
       gradient:{
         0.5: 'blue',
         0.65: 'rgb(117,211,248)',
         0.7: 'rgb(0, 255, 0)',
         0.9: '#ffea00',
         1.0: 'red'
      }
 });
 //设置数据集
 heatmap.setDataSet({
 data: heatmapData,
 max: 5
 });
 });
 }else{
 heatmapData =[];
 }
 } else {
 heatmapData =[];
 }
 });
 }
 },
 isSupportCanvas() {//判断浏览区是否支持canvas
 var elem = document.createElement('canvas');
 return !!(elem.getContext && elem.getContext('2d'));
 },
}

参考：https://lbs.amap.com/api/javascript-api/example/selflayer/heatmap

以上所述是小编给大家介绍的vue.js高德地图实现热点图详解整合，希望对大家有所帮助，如果大家有任何疑问请给我留言，小编会及时回复大家的。在此也非常感谢大家对脚本之家网站的支持！

vue.js高德地图实现热点图 vue.js高德地图热点图