1、引入 map 和 json資料

<script src="https://webapi.amap.com/maps?v=1.4.15&key=151bb84e60e049d73a5d6f78b12b7000&plugin=AMap,AMap.CustomLayer,AMap.ControlBar,AMap.Heatmap"></script>
 
import AMap from 'AMap'
import HeatData from '../heatmap'

2、配置地圖

mounted () {
//地圖配置項
this.map = new AMap.Map('mapContent', {
  viewMode: 
 
'3D',
  pitch: 45,
  resizeEnable: true,
  center: [117.138245, 31.834392],
  zoom: 17,
  mapStyle: 'amap://styles/2de08eeb11b2025dc74ddede43708d08'
}),
//資料配置項
var heatmapData = HeatData
let dataMap = {}, newData = []
for (var i = 0; i < heatmapData.length; i++) {
  var ai = heatmapData[i]
  if (!dataMap[ai.type]) {
    newData.push({
      type: ai.type,
      data: [ai]
    })
    dataMap[ai.type] 
 
= ai
  } else {
    for (var j = 0; j < newData.length; j++) {
      var dj = newData[j]
      if (dj.type === ai.type) {
        dj.data.push(ai)
        break
      }
    }
  }
}
var heatmapOpts = {
  '3d': {
    heightBezier: [3.8, 0.5, 1.4, 0.8],
    gridSize: 2,
    heightScale: 0.9
  }
}
var heatmap 
 
= new AMap.Heatmap(this.map, heatmapOpts)
heatmap.setDataSet({
  data: heatmapData,
  max: 100
})
}

3、json 資料 [{ "company": "電子有限公司", "type": "設計", "count": "0", "lng": "117.211278", "lat": "31.853308" }, { "company": "微電子有限公司", "type": "設計", "count": "0", "lng": "117.205006", "lat": "31.851579" }, { "company": "股份有限公司", "type": "設計", "count": "0", "lng": "117.231817", "lat": "31.77023" }] smile