Vue框架实现百度地图热力图（简单易懂，学了就会）

实现百度地图热力图（Vue框架）

最近比赛项目有一个需求是实现前端的展示，展示热力图，费了一些功夫才弄好，记录一下实现的过程。如果想调用百度地图API，首先你需要得在官网注册一个帐号然后申请一个密钥，注册网：http://lbsyun.baidu.com/index.php?title=lbscloud
直接上代码，需要在项目中的index.html中添加如下代码

<script src="http://api.map.baidu.com/api?v=2.0&ak=密匙"></script>

然后再构建热力图

<template lang="html">
    <div id="load">
        <!--存放百度地图容器-->
        <div id="container"></div>
    </div>
</template>

<script>
    export default {
    
        data() {
    
            return {
    
                // 热力图的点数据，lng：点的经度 点的lat纬度 count：点的热力程度
                points: [
                    {
    "lng":123.418261,"lat":41.921984,"count":50},
                    {
    "lng":123.423332,"lat":41.916532,"count":51},
                    {
    "lng":123.419787,"lat":41.930658,"count":15},
                    {
    "lng":123.418455,"lat":41.920921,"count":40},
                    {
    "lng":123.418843,"lat":41.915516,"count":100},
                    {
    "lng":123.42546,"lat":41.918503,"count":6},
                    {
    "lng":123.423289,"lat":41.919989,"count":18},
                    {
    "lng":123.418162,"lat":41.915051,"count":80},
                    {
    "lng":123.422039,"lat":41.91782,"count":11},
                    {
    "lng":123.41387,"lat":41.917253,"count":7},
                    {
    "lng":123.41773,"lat":41.919426,"count":42},
                    {
    "lng":123.421107,"lat":41.916445,"count":4},
                    {
    "lng":123.417521,"lat":41.917943,"count":27},
                    {
    "lng":123.419812,"lat":41.920836,"count":23},
                    {
    "lng":123.420682,"lat":41.91463,"count":60},
                    {
    "lng":123.415424,"lat":41.924675,"count":8},
                    {
    "lng":123.419242,"lat":41.914509,"count":15},
                    {
    "lng":123.422766,"lat":41.921408,"count":25