首先先上效果图,静态图(PS.制作动图还在学习中~):
地图上的文字未展示,根据经纬度标记图,循环展示每个标记点的数据~
一.如何引入百度地图
-
申请百度开发秘钥AK
http://lbsyun.baidu.com/apiconsole/key
-
在vue的index.html里加入
<script type="text/javascript" src="https://api.map.baidu.com/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.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],
'丹东':[