echarts4+bmap+vue2地图显示不出来

在vue单页应用中，百度地图的ak认证获取需放在index.html的head里，否则地图将显示不出来。

index.html

<head>
  <meta charset="utf-8">
  <script type="text/javascript" src="https://api.map.baidu.com/api?v=3.0&ak=S4KKfPTez9LKGm4DtoY2BQ5527qxQ3QE"></script>
</head>

helloWorld.vue

<template>
  <div id="map"></div>
</template>
<script>
import echarts from 'echarts'
import 'echarts/extension/bmap/bmap'

export default {
  name: 'SMap',
  data () {
    return {
    	list:[],
        myChart: null
    }
  },
  mounted(){
      // 基于准备好的dom，初始化echarts实例
        this.myChart = echarts.init(document.getElementById('map'));
   
        // 指定图表的配置项和数据
        var option = {
        	bmap: {
                center: [108.114129, 34.550339],
                zoom: 5,
                roam: true
  			},
        	series : [
                {
                    name: '人员',
                    type: 'scatter',
                    coordinateSystem: 'bmap',
                    data: this.list,
                    symbolSize: function (val) {
                        return val[2] / 10;
                    },
                    label: {
                        formatter: '{b}',
                        position: 'right',
                        show: false
                    },
                    itemStyle: {
                        color: '#B81820'
                    },
                    emphasis: {
                        label: {
                            show: true
                        }
                    }
                }
            ]
        };

        // 使用刚指定的配置项和数据显示图表。
        this.myChart.setOption(option);
  },
}
</script>

来源：CSDN

作者：Tempta36

链接：https://blog.csdn.net/Tempta36/article/details/104579283

标签

bmap

易学教程内所有资源均来自网络或用户发布的内容，如有违反法律规定的内容欢迎反馈！
该文章没有解决你所遇到的问题?点击提问,说说你的问题,让更多的人一起探讨吧!