echarts 使用 百度地图 加入自定义图标标记_百度地图标点图标

首先先上效果图，静态图（PS.制作动图还在学习中~）：
地图上的文字未展示，根据经纬度标记图，循环展示每个标记点的数据~

一.如何引入百度地图

1. 申请百度开发秘钥AK

   http://lbsyun.baidu.com/apiconsole/key

2. 在vue的index.html里加入

 <script type="text/javascript" src="https://api.map.baidu.com/api?v=2.0&ak=你申请的AK"></script>
1

3. 添加Echarts依赖

npm install echarts --save
1

4. 在对应的地图组件中引入echarts

import echarts from "echarts/lib/echarts";
import 'echarts/extension/bmap/bmap'     //百度地图
1
2

接下来可以编写实现代码啦~

二.实现自定义标记

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],
    '丹东':[
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38