数据可视化入门实战系列2--百度地图demo

一、前言
1、背景说明

最近在做数据可视化的项目，从网上找了一下，没有相关的学习资料，打算结合自己的摸索，写一个系列的入门实战课程。

2、使用框架

1、vue2.x
2、echarts4+
3、threejs
4、vue-cli2.9+
5、nodejs12+
6、百度地图api

二、项目准备
1、百度地图api官网申请

参考百度地图api官网手册，进行api的密钥申请，地址如下
http://lbsyun.baidu.com/index.php?title=jspopular3.0/guide/getkey
申请完了之后，在控制台查看访问百度地图的密钥。

2、引入百度地图api

在vue工程的index.html中，head标签中引入以下代码，在ak处修改申请的密钥（即第二步中的ak）
<script type="text/javascript" src="http://api.map.baidu.com/api?v=3.0&ak=申请的密钥">
</script>

3、在build/webpack.base.conf.js中的module.exports={}中加入以下代码：
externals:{

'BMap': 'BMap',
'BMap_Symbol_SHAPE_POINT':'BMap_Symbol_SHAPE_POINT'

}
4、修改界面的height

**默认情况下,页面的heigh为0，需要设置成100%，才能显示在界面中**
（1）index.html
<style type="text/css">  
  html{height:100%}  
  body{height:100%;margin:0px;padding:0px;}
  #app{height:100%}
</style>

（2）app.vue

（3）HelloWorld.vue
<style scoped>
    .hello {
     height: 100%;
    }
</style>

5、编写HelloBmap.vue组件

代码如下，注意一定要设置height，不然不会显示。
<template>
<div id="container" ref="container">
</div>
</template>
<script>
import BMap from 'BMap'
export default {
  name: 'HelloBmap',
  methods: {
    drawMap () {
      var map = new BMap.Map('container')
      var point = new BMap.Point(116.404, 39.915)
      map.centerAndZoom(point, 5)
      map.enableScrollWheelZoom(true)
    }
  },
  mounted () {
    this.drawMap()
  }
}
</script>
<style lang="stylus" scoped>
  #container
    height: 100%
    width 100%
</style>

6、在HelloWorld中添加HelloBmap组件

代码如下:
<template>
 <div class="hello">
 <hello-bmap />
 </div>
</template>
<script>
import HelloBmap from './HelloBmap'
export default {
  name: 'HelloWorld',
  components: {
    HelloBmap
  }
}
</script>
<style scoped>
  .hello {
    height: 100%;
  }
</style>

7、效果图

三、源码
码云链接：https://gitee.com/Codexiongda...
需要修改百度地图ak，才能运行