在页面中加载Apache ECharts 5/百度地图

文章目录

• 一、在页面中加载百度地图
• 二、地图色斑图

一、在页面中加载百度地图

1、打开“百度地图开放平台”，用百度账号登录。

2、进入百度地图开放平台 右上角点击 我的 | 站内信 | 应用管理 | 我的应用。

3、单击“创建应用”：

应用类型：浏览器端。

白名单：*

创建应用成功后，系统将返回一个AK值。

4、在index.html的标记对中写入：

注意：

（1）脚手架vue-cli 2.x 的index.html在static文件夹中

（2）脚手架vue-cli 3.x 的index.html在public文件夹中

<script 
type="text/javascript"
src="//api.map.baidu.com/api?v=2.0&ak=fVuGNFdooRBSHd21OEsBOGu5a0XaDa4e&s=1">
</script>
           

上述代码：src="//api.map.baidu.com/apiv=2.0&ak=fVuGNFdooRBSHd21OEsBOGu5a0XaDa4e&s=1"（标黄是自己的AK值）

5、在.vue文件中创建地图容器

在 methods：中执行下列代码：

showMap(){
     let map = new BMap.Map(baiduMap);    	//创建地图
     let point = new BMap.Point(114.508851, 37.0682); 	//创建坐标点（经度,纬度）
      map.centerAndZoom(point, 15);		//将坐标点放置在中心
      let marker = new BMap.Marker(point);		//创建标记
      map.addOverlay(marker);			//显示标记并覆盖建筑物
      map.enableScrollWheelZoom(true);	//开启鼠标滚轮缩放
      map.setMapStyle({ style: 'midnight' }) 	//地图风格
 }
           

第一步创建地图必须写地图容器的id值

如果没有id值可以用选择器找到节点赋值一个变量然后把变量放到里面 如下：

var xx=document.querySelect(".map")

let map = new BMap.Map(xx); //创建地图

6、在mounted()中调用showMap()

mounted(){
       this.showMap();
 }
           

二、地图色斑图

1、找到表示地图资源的文件：json/js。

2、书写加载色斑图的代码:

geoHome(){
            let airData = [
              { name: '北京', value: 39.92 },
              { name: '天津', value: 39.13 },
              { name: '上海', value: 31.22 },
              { name: '重庆', value: 66 },
              { name: '河北', value: 147 },
              { name: '河南', value: 113 },
              { name: '云南', value: 25.04 },
              { name: '辽宁', value: 50 },
              { name: '黑龙江', value: 114 },
              { name: '湖南', value: 175 },
              { name: '安徽', value: 117 },
              { name: '山东', value: 92 },
              { name: '新疆', value: 84 },
              { name: '江苏', value: 67 },
              { name: '浙江', value: 84 },
              { name: '江西', value: 96 },
              { name: '湖北', value: 273 },
              { name: '广西', value: 59 },
              { name: '甘肃', value: 99 },
              { name: '山西', value: 39 },
              { name: '内蒙古', value: 58 },
              { name: '陕西', value: 61 },
              { name: '吉林', value: 51 },
              { name: '福建', value: 29 },
              { name: '贵州', value: 71 },
              { name: '广东', value: 38 },
              { name: '青海', value: 57 },
              { name: '西藏', value: 24 },
              { name: '四川', value: 58 },
              { name: '宁夏', value: 52 },
              { name: '海南', value: 54 },
              { name: '台湾', value: 88 },
              { name: '香港', value: 66 },
              { name: '澳门', value: 77 }
            ];
            let geoHome=document.querySelector(".geoHome");
            let chart=this.$echarts.init(geoHome);
            let url='http://localhost:8081/static/china.json';
            this.$axios.get(url).then(res=>{
              console.log(res.data);
              this.$echarts.registerMap('chinaMap',res.data);
              let option={
                title:{
                  text:'户籍归属色斑图',
                  left:'center',
                  textStyle:{
                    color:'#ffffff'
                  }
                },
                geo: {
                  type: 'map',
                  map: 'chinaMap', // chinaMap需要和registerMap中的第一个参数保持一致
                  roam: false, // 设置允许缩放以及拖动的效果
                  label: {
                    show: false,    // 展示标签
                    fontSize:10
                  },
                  itemStyle:{
                    areaColor:'#3da3e0'
                  },
                  emphasis:{
                    itemStyle:{
                      areaColor:'#65fdf0'
                    }
                  }
                },
                series: [
                  {
                    data: airData,
                    geoIndex: 0, // 将空气质量的数据和第0个geo配置关联在一起
                    type: 'map'
                  }
                ],
                visualMap: {
                  min: 800,
                  max: 50000,
                  inRange: {
                    color: ['#63f8ef', '#021ec7'] // 控制颜色渐变的范围
                  },
                  calculable: true // 出现滑块
                }
              };
              chart.setOption(option);
            })
          }