首先先上效果图，静态图（PS.制作动图还在学习中~）：
地图上的文字未展示，根据经纬度标记图，循环展示每个标记点的数据~
一.如何引入百度地图
申请百度开发秘钥AK
/apiconsole/key
在vue的index.html里加入
<script type="text/javascript" src="https://api./api?v=2.0&ak=你申请的AK"></script>
添加Echarts依赖
npm install echarts --save
在对应的地图组件中引入echarts
import echarts from "echarts/lib/echarts";import 'echarts/extension/bmap/bmap'//百度地图
接下来可以编写实现代码啦~
二.实现自定义标记
var data = [{name: '盐城', value: 9},{name: '日照', value: 12},{name: '青岛', value: 12},{name: '鄂尔多斯', value: 9},{name: '招远', value: 12},{name: '舟山', value: 12},{name: '金昌', value: 9},{name: '云浮', value: 12},{name: '南通', value: 12},];var geoCoordMap = {'海门':[121.15,31.89],'鄂尔多斯':[109.781327,39.608266],'招远':[120.38,37.35],'舟山':[122.207216,29.985295],'齐齐哈尔':[123.97,47.33],'盐城':[120.13,33.38],'赤峰':[118.87,42.28],'青岛':[120.33,36.07],'乳山':[121.52,36.89],'金昌':[102.188043,38.59],'泉州':[118.58,24.93],'莱西':[120.53,36.86],'日照':[119.46,35.42],'胶南':[119.97,35.88],'南通':[121.05,32.08],'拉萨':[91.11,29.97],'云浮':[112.02,22.93],'梅州':[116.1,24.55],'文登':[122.05,37.2],'上海':[121.48,31.22],'攀枝花':[101.718637,26.582347],'威海':[122.1,37.5],'承德':[117.93,40.97],'厦门':[118.1,24.46],'汕尾':[115.375279,22.786211],'潮州':[116.63,23.68],'丹东':[124.37,40.13],'太仓':[121.1,31.45],'曲靖':[103.79,25.51],'烟台':[121.39,37.52],'福州':[119.3,26.08],'瓦房店':[121.979603,39.627114],'即墨':[120.45,36.38],'抚顺':[123.97,41.97],'玉溪':[102.52,24.35],'张家口':[114.87,40.82],'阳泉':[113.57,37.85],'莱州':[119.942327,37.177017],'湖州':[120.1,30.86],'汕头':[116.69,23.39],'昆山':[120.95,31.39],'宁波':[121.56,29.86],'湛江':[110.359377,21.270708]};var convertData = function (data) {var res = [];for (var i = 0; i < data.length; i++) {var geoCoord = geoCoordMap[data[i].name];if (geoCoord) {data[i].stationaryState = 0; //是否更改当前选中图片标记data[i].coordinateData = geoCoord; //存放坐标位置信息res.push(data[i]);}}return res;};let inOperationmarkIcon =["基本图标的地址Eg：http://dsfdsdfsdf/img/1.png","当前选中的图片地址"]let currentData = convertData(data);option1 = {bmap: {center: [117.23 , 31.85],zoom:6.5, // 地图缩放比例roam: true,enableMapClick:false,mapStyle: {styleJson: [{// 地图样式'featureType': 'water','elementType': 'all','stylers': {'color': '#000720'// 'visibility': 'off'}}, {'featureType': 'land','elementType': 'all','stylers': {'color': '#000720'}}, {'featureType': 'railway','elementType': 'all','stylers': {'visibility': 'off'}}, {'featureType': 'highway','elementType': 'all','stylers': {// 'color': '#999999''visibility': 'off'}}, {'featureType': 'highway','elementType': 'labels','stylers': {'visibility': 'off'}}, {'featureType': 'arterial','elementType': 'geometry','stylers': {'color': '#fefefe'}}, {'featureType': 'arterial','elementType': 'geometry.fill','stylers': {'color': '#fefefe'}}, {'featureType': 'poi','elementType': 'all','stylers': {'visibility': 'off'}}, {'featureType': 'green','elementType': 'all','stylers': {'visibility': 'off'}}, {'featureType': 'subway','elementType': 'all','stylers': {'visibility': 'off'}}, {'featureType': 'manmade','elementType': 'all','stylers': {'color': '#d1d1d1'}}, {'featureType': 'local','elementType': 'all','stylers': {'color': '#d1d1d1'}}, {'featureType': 'arterial','elementType': 'labels','stylers': {'visibility': 'off'}}, {'featureType': 'boundary','elementType': 'all','stylers': {'color': '#00B2E6'}}, {'featureType': 'building','elementType': 'all','stylers': {'color': '#d1d1d1'}}, {'featureType': 'label','elementType': 'labels.text.fill','stylers': {// 'color': '#00BFFF',// 'fontsize':'16''visibility': 'off'}}]}},series: [// 数据展示样式{type: 'custom',//自定义coordinateSystem: 'bmap',renderItem: function (params, api) {//具体实现自定义图标的方法return {type: 'image',style: {image: inOperationmarkIcon[currentData[params.dataIndex].stationaryState],x: api.coord([currentData[params.dataIndex].coordinateData[0], currentData[params.dataIndex].coordinateData[1]])[0],y: api.coord([currentData[params.dataIndex].coordinateData[0], currentData[params.dataIndex].coordinateData[1]])[1],width: 36, // 图标大小设置height: 36,},styleEmphasis:{}}},animation: true,animationDelay: function (idx) { // 图片动画延迟，根据自己想买自行添加return idx * 20;},data: currentData //数据},],tooltip: {trigger:'item',backgroundColor: "rgba(255,255,255,0)", //设置背景图片 rgba格式position: 'bottom',showDelay:200, formatter(params) {// 自定义工具栏，（数据提示框）let text = '';text=` <p style="width:249px;background:rgba(0,7,32,0.8);opacity: 0.8; border:2px solid rgba(0,219,209,0.79);border-radius:6px;padding: 16px;"><span style="display:inline-block;font-size:18px;font-weight:bold;color:rgba(0,219,209,1);line-height:24px;margin-bottom: 12px;">${params.data.name}园区</span><br><span style="font-size:14px;color:rgba(255,255,255,1); margin-right:14px;display: inline-block;margin-bottom: 10px;">运营面积 <label style="color:rgba(0,219,209,1);">${params.data.totalOperationArea}</label>方</span><span style="font-size:14px;color:rgba(255,255,255,1);">入驻企业 <label style="color:rgba(0,223,254,1);">${panyNum}</label>家</span><br><span style="font-size:14px;color:rgba(255,255,255,1); margin-right:14px;display: inline-block;margin-bottom: 10px; ">入驻率 <label style="color:rgba(0,223,254,1);">${params.data.profession}%</label></span><span style="font-size:14px;color:rgba(255,255,255,1);">交易额 <label style="color:rgba(59,227,167,1);">${params.data.yearAmount}</label>元</span><br><span style="font-size:14px;color:rgba(255,255,255,1); margin-right:14px; display: inline-block;margin-bottom: 10px; ">就业人数 <label style="color:rgba(243,156,0,1);">${params.data.personNum}</label>人</span><span style="font-size:14px;color:rgba(255,255,255,1);">年度税收 <label style="color:rgba(0,223,254,1);">${params.data.yearTax}</label>元</span><br></p>`return text;},},};let myChart = echarts.init(document.getElementById("chinaMap"));myChart.setOption(option1);// 定时显示提示框 并设置动态选中标记图let index = 0;setInterval(function () {// 隐藏提示框myChart.dispatchAction({type: 'hideTip',seriesIndex: 0,dataIndex: index})// 显示提示框myChart.dispatchAction({type: 'showTip',seriesIndex: 0,dataIndex: index})// 设置动态选中数组里图标if(index >= 0){for(let i=0;i<=index;i++){currentData[i].stationaryState = 0;}}currentData[index].stationaryState = 1;myChart.setOption({series: [{data:currentData}]})index++if (index == currentData.length) {currentData[index-1].stationaryState = 0index = 0;}}, 6000)
记录使用echarts插件的一次应用~
