vue页面使用Echarts地图

添加一个loadBMapApi.js存放百度地图api

loadBMapApi.js页面内容

mapak替换成你的秘钥ak

export default function loadBMap(mapak) {

    return new Promise(function(resolve, reject) {

        if (typeof BMap !== 'undefined') {

            resolve(BMap)

            return true

        }

        window.onBMapCallback = function() {

            resolve(BMap)

        }

        let script = document.createElement('script')

        script.type = 'text/javascript'

        script.src = 'http://api.map.baidu.com/api?v=2.0&ak='+mapak+'&callback=onBMapCallback'

        script.onerror = reject

        document.head.appendChild(script)

    })

}

 

使用vue页面

需要给div添加绝对样式不然Echarts渲染地图会超出容器

百度地图会默认添加一个绝对定位的样式，但是绝对定位是相对于离他最近的position值为relative的容器的，因此只需要给容器添加position：relative属性值即可解决

<div ref="heatRef" :class="className" style="height: 300px; width: 460px;position: relative;" />

 

<script setup>

import  * as echarts from 'echarts'

import  'echarts/extension/bmap/bmap'

import  loadBMap  from  '@/utils/loadBMapApi'

function heatChart() {

  let chart = echarts.init(proxy.$refs.heatRef)

  chart.setOption({

      animation: false,

      bmap: {

        center: [120.13066322374, 30.240018034923],

        zoom: 14,

        roam: true

      },

      visualMap: {

        show: false,

        top: 'top',

        min: 0,

        max: 5,

        seriesIndex: 0,

        calculable: true,

        inRange: {

          color: ['blue', 'blue', 'green', 'yellow', 'red']

        }

      },

      series: [

        {

          type: 'heatmap',

          coordinateSystem: 'bmap',

          data: [],//热力图数据

          pointSize: 5,

          blurSize: 6

        }

      ]

  })

    // 添加百度地图插件

    var bmap = chart.getModel().getComponent('bmap').getBMap();

    bmap.addControl(new BMap.MapTypeControl());

}

onMounted(() => {

    loadBMap("ak秘钥").then(()=>{

        heatChart()

    })

})

</script>