echars + vue + 百度地图使用

地图使用"/>

echars + vue + 百度地图使用

默认已经echarts   

import echarts from 'echarts'
import "echarts/map/js/china.js"; // 引入中国地图数据
import "echarts/map/js/world.js";
import bmap from 'echarts/extension/bmap/bmap.js'
import { loadBMap } from '@/assets/js/es5/map.js'

这里用的echarts的实列 代码省略掉

loadBMP文件

这里封装一下 因为会报一个错 错误原因在mounted 调用地图 而地图还没加载好import { loadBMap } from ./map.js'/* eslint-disable */
export function loadBMap (ak) {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 ='.0&ak=' + ak + '&__ec_v__=20190126&callback=onBMapCallback' // 版本号自己控制script.onerror = rejectdocument.head.appendChild(script)})
}

尝试自定义地图样式 代码  省略掉了地图的坐标代码 最后会附上

 var myChart = echarts.init(document.getElementById('china'), theme)let option = {title: {text: '全国主要城市空气质量 - 百度地图',subtext: 'data from PM25.in',sublink: '',left: 'center'},tooltip: {trigger: 'item'},bmap: {center: [104.114129, 37.550339],zoom: 5,roam: true,mapStyle: {styleJson: goodsData}},series: [{name: 'pm2.5',type: 'scatter',coordinateSystem: 'bmap',data: convertData(datas),symbolSize: function (val) {return val[2] / 10},encode: {value: 2},label: {formatter: '{b}',position: 'right',show: false},emphasis: {label: {show: true}}},{name: 'Top 5',type: 'effectScatter',coordinateSystem: 'bmap',data: convertData(datas.sort(function (a, b) { return b.value - a.value }).slice(0, 6)),symbolSize: function (val) {return val[2] / 10},encode: {value: 2},showEffectOn: 'render',rippleEffect: {brushType: 'stroke'},label: {formatter: '{b}',position: 'right',show: true},itemStyle: {shadowBlur: 10,shadowColor: '#333'},emphasis: {scale: true},zlevel: 1}]}myChart.setOption(option)let bmap = myChart.getModel().getComponent("bmap").getBMap();bmap.setMapStyle({ styleJson: goodsData, });// 创建城市选择控件var cityControl = new BMap.CityListControl({// 控件的停靠位置（可选，默认左上角）anchor: BMAP_ANCHOR_TOP_LEFT,// // 控件基于停靠位置的偏移量（可选）// offset: new bmap.Size(10, 5)});// 将控件添加到地图上bmap.addControl(cityControl);// 使用刚指定的配置项和数据显示图表。$(window).resize(function () {   // 自适应myChart.resize();})

在mounted中调用上面的方法 更具需求自己修改

 mounted () {this.$nextTick(() => {loadBMap("XMpRSRWH7DbM5A5gL8ShHhWWOG2XAuIg").then(() => {this.createdChart()})})},

因为在json里面配置百度自定义的样式不起作用 所以在外面自己在引入一遍

样式的代码直接 到百度自己生成  百度地图个性化编辑器

[{"featureType": "land","elementType": "geometry","stylers": {"color": "#242f3eff"}}, {"featureType": "manmade","elementType": "geometry","stylers": {"color": "#242f3eff"}
}, {"featureType": "water","elementType": "geometry","stylers": {"color": "#17263cff"}
}, {"featureType": "road","elementType": "geometry.fill","stylers": {"color": "#9e7d60ff"}
}, {"featureType": "road","elementType": "geometry.stroke","stylers": {"color": "#554631ff"}
}, {"featureType": "districtlabel","elementType": "labels.text.fill","stylers": {"color": "#d69563ff"}
}, {"featureType": "districtlabel","elementType": "labels.text.stroke","stylers": {"color": "#17263cff","weight": 3}
}, {"featureType": "poilabel","elementType": "labels.text.fill","stylers": {"color": "#d69563ff"}
}, {"featureType": "poilabel","elementType": "labels.text.stroke","stylers": {"color": "#17263cff","weight": 3}
}, {"featureType": "subway","elementType": "geometry","stylers": {"visibility": "off"}
}, {"featureType": "railway","elementType": "geometry","stylers": {"visibility": "off"}
}, {"featureType": "poilabel","elementType": "labels.icon","stylers": {"visibility": "off"}
}, {"featureType": "subwaylabel","elementType": "labels","stylers": {"visibility": "off"}
}, {"featureType": "subwaylabel","elementType": "labels.icon","stylers": {"visibility": "off"}
}, {"featureType": "tertiarywaysign","elementType": "labels","stylers": {"visibility": "off"}
}, {"featureType": "tertiarywaysign","elementType": "labels.icon","stylers": {"visibility": "off"}
}, {"featureType": "provincialwaysign","elementType": "labels.icon","stylers": {"visibility": "off"}
}, {"featureType": "provincialwaysign","elementType": "labels","stylers": {"visibility": "off"}
}, {"featureType": "nationalwaysign","elementType": "labels.icon","stylers": {"visibility": "off"}
}, {"featureType": "nationalwaysign","elementType": "labels","stylers": {"visibility": "off"}
}, {"featureType": "highwaysign","elementType": "labels.icon","stylers": {"visibility": "off"}
}, {"featureType": "highwaysign","elementType": "labels","stylers": {"visibility": "off"}
}, {"featureType": "green","elementType": "geometry","stylers": {"color": "#263b3eff"}
}, {"featureType": "nationalwaysign","elementType": "labels.text.fill","stylers": {"color": "#d0021bff"}
}, {"featureType": "nationalwaysign","elementType": "labels.text.stroke","stylers": {"color": "#ffffffff"}
}, {"featureType": "city","elementType": "labels","stylers": {"visibility": "on"}
}, {"featureType": "city","elementType": "labels.icon","stylers": {"visibility": "off"}
}, {"featureType": "city","elementType": "labels.text.fill","stylers": {"color": "#d69563ff"}
}, {"featureType": "city","elementType": "labels.text.stroke","stylers": {"color": "#17263cff"}
}, {"featureType": "water","elementType": "labels.text.fill","stylers": {"color": "#d69563ff"}
}, {"featureType": "water","elementType": "labels.text.stroke","stylers": {"color": "#242f3eff"}
}, {"featureType": "local","elementType": "geometry.fill","stylers": {"color": "#38414eff"}
}, {"featureType": "local","elementType": "geometry.stroke","styler