首先先上效果图，静态图(PS.制作动图还在学习中~)：

地图上的文字未展示，根据经纬度标记图，循环展示每个标记点的数据~

一.如何引入百度地图

申请百度开发秘钥AK

http://lbsyun.baidu.com/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.520089],

'泉州':[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}方

入驻企业 ${params.data.companyNum}家

入驻率 ${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插件的一次应用~