vue使用高德地图

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"

}]