首先先上效果图，静态图(PS.制作动图还在学习中~)：
地图上的文字未展示，根据经纬度标记图，循环展示每个标记点的数据~
一.如何引入百度地图
申请百度开发秘钥AK
/apiconsole/key
在vue的index.html里加入
添加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=`
${params.data.name}园区
运营面积 ${params.data.totalOperationArea}方
入驻企业 ${panyNum}家
入驻率 ${params.data.profession}%
交易额 ${params.data.yearAmount}元
就业人数 ${params.data.personNum}人
年度税收 ${params.data.yearTax}元`
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 = 0
index = 0;
}
}, 6000)
记录使用echarts插件的一次应用~
