VUE使用百度地图教程

简介：传统的百度地图如果搭建在vuecli中就还需要再index.html的文件还需要配置script参数，这样使用起来就像是穿了一件不合身的衣服，总是难受，而且vue也不推荐再使用jq来实现功能咯(不然为啥要封装dom 咧咧咧~)，所以我们还是使用经过百度精心处理过的vue的百度地图插件吧，咩哈哈哈，这才是王道哈。

1、百度地图使用

我们使用插件化的形式实现百度地图哈，通过百度地图官方提供的封装的插件实现功能，这里提供了官网：

https://dafrok.github.io/vue-baidu-map/#/zh/start/installation

首先安装vue的百度地图插件：

npm install vue-baidu-map --save

接下来在main.js中进行注册哈，这样就能在任何地方使用咯：

之后我们来设置HTML部分：

最后将center和zoom的位置还有bm-view的效果设定一下：              

还有css样式哈：

好的，接下来装逼开始：

2、参数配置

这里的参数可以参考：

https://dafrok.github.io/vue-baidu-map/#/zh/map/baidu-map

好的，这里接下来我们来说下常见的参数部分：

属性名称	数据类型	说明
center	对象或字符串	写上地名或者使用对象如 {lng: 116.404, lat: 39.915} 表示经纬度(地名在步骤3会写出demo)
zoom	数字	缩放等级
min-zoom	数字	最小缩放级别
max-zoom	数字	最大缩放级别
scroll-wheel-zoom	BOOLEAN	是否能够缩放滚轮
map-type	对象	地图类型，默认值：global.BMAP_NORMAL_MAP BMAP_SATELLITE_MAP：航拍图 BMAP_HYBRID_MAP ：混合式地图 BMAP_NORMAL_MAP ：默认地图样式 BMAP_PERSPECTIVE_MAP：透视图像视图 其中可以通过该属性添加地图插件

接下来监听的部分哈(有点多，不要去背，切记，不然会死)：

函数名称	参数信息	说明
click	{type, target, point, pixel, overlay}	左键单击地图时触发此事件。当双击时，产生的事件序列为： click click dblclick
dblclick	{type, target, pixel, point}	鼠标双击地图时会触发此事件
mousemove	{type, target, point, pixel, overlay}	鼠标在地图区域移动过程中触发此事件
mouseover	{type, target}	鼠标移入地图区域时触发此事件
mouseout	{type, target}	鼠标移出地图区域时触发此事件
movestart	{type, target}	地图移动开始时触发此事件
moving	{type, target}	地图移动过程中触发此事件
moveend	{type, target}	地图移动结束时触发此事件
zoomstart	{type, target}	地图更改缩放级别开始时触发触发此事件
zoomend	{type, target}	地图更改缩放级别结束时触发触发此事件
addoverlay	{type, target}	当使用Map.addOverlay()方法向地图中添加单个覆盖物时会触发此事件
addcontrol	{type, target}	当使用Map.addControl()方法向地图中添加单个控件时会触发此事件
removecontrol	{type, target}	当使用Map.removeControl()方法移除单个控件时会触发此事件
removeoverlay	{type, target}	当使用Map.removeOverlay()方法移除单个覆盖物时会触发此事件
clearoverlays	{type, target}	当使用Map.clearOverlays()方法一次性移除全部覆盖物时会触发此事件
dragstart	{type, target, pixel, point}	开始拖拽地图时触发
dragging	{type, target, pixel, point}	拖拽地图过程中触发
dragend	{type, target, pixel, point}	停止拖拽地图时触发
addtilelayer	{type, target}	添加一个自定义地图图层时触发此事件
removetilelayer	{type, target}	移除一个自定义地图图层时触发此事件
load	{type, target, pixel, point, zoom}	调用Map.centerAndZoom()方法时会触发此事件。这表示位置、缩放层级已经确定，但可能还在载入地图图块
resize	{type, target, size}	地图可视区域大小发生变化时会触发此事件
hotspotclick	{type, target, spots}	点击热区时触发此事件
hotspotover	{type, target, spots}	鼠标移至热区时触发此事件
hotspotout	{type, target, spots}	鼠标移出热区时触发此事件
tilesloaded	{type, target}	当地图所有图块完成加载时触发此事件
touchstart	{type, target, point,pixel}	触摸开始时触发此事件，仅适用移动设备
touchmove	{type, target, point,pixel}	触摸移动时触发此事件，仅适用移动设备
touchend	{type, target, point,pixel}	触摸结束时触发此事件，仅适用移动设备
longpress	{type, target, point,pixel}	长按事件，仅适用移动设备

3、地图类型插件

这里就UI有不同的地方哈：

anchor参数：

参数名	说明
BMAP_ANCHOR_TOP_LEFT	控件将定位到地图的左上角
BMAP_ANCHOR_TOP_RIGHT	控件将定位到地图的右上角
BMAP_ANCHOR_BOTTOM_LEFT	控件将定位到地图的左下角
BMAP_ANCHOR_BOTTOM_RIGHT	控件将定位到地图的右下角

4、设定自定义的地图类型

我们这里因为产品的需要设置不同的地图显示类型来达到产品的需要，所以：

以上的数据添加到mapStyle中就可以使用咯，至于内部的属性请看参数：

5、双向数据绑

首先先添加监听哈：v-on:moving="moveBMap"                              

接下来添加监听的方法哦                      

其实数据早就已经更新了，是通过监听来查看更新的情况哈。

6、比例尺

这里的anchor="BMAP_ANCHOR_TOP_RIGHT"配置就是步骤3的配置哈；

7、缩放空间

常用参数：

属性名	类型	默认值	说明
anchor	ControlAnchor		控件停靠位置,参考步骤3
offset	Size		控件偏移值{x,y}
showZoomInfo	Boolean	true	是否显示级别提示信息
enableGeolocation	Boolean	false	控件是否集成定位功能

8、缩略图

其中：就是缩略图标签

常用参数：

属性名	类型	默认值	描述
anchor	ControlAnchor		控件停靠位置，参考步骤3
offset	Size		控件偏移值，{x,y}
size	Size		缩略地图控件的大小
isOpen	Boolean	false	缩略地图添加到地图后的开合状态

事件名	参数	描述
viewchanged	event{type, target, isOpen}	缩略地图开合状态发生变化后触发此事件
viewchanging	event{type, target}	缩略地图开合状态发生变化过程中触发此事件

9、定位控件

常见参数：

属性名	类型	默认值	描述
anchor	ControlAnchor		控件停靠位置，参考步骤3
offset	Size		控件偏移值，{x,y}
showAddressBar	Boolean	true	是否显示定位信息面板。默认显示定位信息面板
autoLocation	Boolean	false	添加控件时是否进行定位。根据 W3C相关标准 描述，为保证用户隐私安全，geoLocation API 必须使用 SSL 连接，并获得用户的手动许可。请确保使用该属性时满足上述条件。
locationIcon	Icon		可自定义定位中心点的Icon样式

常见事件：

事件名	参数	描述
locationSuccess	{point, AddressComponent, marker}	定位成功后触发此事件
locationError	{StatusCode}	定位失败后触发此事件

9、定位控件

10、覆盖物(Marked)

9、定位控件

绘制点：size: {width: 300, height: 157}}"> 这句话是关键哈。

属性名	类型	默认值	描述
position	Point		标注的位置
offset	Size		标注的位置偏移值
icon	Icon		标注所用的图标对象
massClear	Boolean	true	是否在调用map.clearOverlays清除此覆盖物
dragging	Boolean	false	是否启用拖拽
clicking	Boolean	true	是否响应点击事件
raiseOnDrag	Boolean	false	拖拽标注时，标注是否开启离开地图表面效果
draggingCursor	String		拖拽标注时的鼠标指针样式。此属性值需遵循CSS的cursor属性规范
rotation	Number		旋转角度
shadow	Icon		阴影图标
title	String		鼠标移到marker上的显示内容
label	Label		为标注添加文本标注
animation	String		动画效果
top	Boolean	false	将标注置于其他标注之上。默认情况下，纬度较低的标注会覆盖在纬度较高的标注之上，从而形成一种立体效果。通过此方法可使某个标注覆盖在其他所有标注之上。注意：如果在多个标注对象上调用此方法，则这些标注依旧按照纬度产生默认的覆盖效果。

函数名	参数	说明
click	event{type, target}	点击标注图标后会触发此事件
dblclick	event{type, target, point,pixel}	双击标注图标后会触发此事件
mousedown	event{type, target, point,pixel}	鼠标在标注图上按下触发此事件
mouseup	event{type, target, point,pixel}	鼠标在标注图上释放触发此事件
mouseout	event{type, target, point,pixel}	鼠标离开标注时触发此事件
mouseover	event{type, target, point,pixel}	当鼠标进入标注图标区域时会触发此事件
remove	event{type, target}	移除标注时触发
infowindowclose	event{type, target}	信息窗在此标注上关闭时触发此事件
infowindowopen	event{type, target}	信息窗在此标注上打开时触发此事件
dragstart	event{type, target}	开始拖拽标注时触发此事件
dragging	event{type, target, pixel, point}	拖拽标注过程中触发此事件
dragend	event{type, target, pixel, point}	拖拽结束时触发此事件

备注：其中动画效果参数：

参数名	说明
BMAP_ANIMATION_DROP	坠落动画
BMAP_ANIMATION_BOUNCE	跳动动画

备注：如果不进行设置 :icon 属性那么就会出现默认的红色点的图标咯。

绘制信息窗体(气泡)：

注意：在弹框中可以使用其他框架的控件，让控件更加美观哈。

属性	类型	默认值	说明
show	Boolean	false	信息窗体是否开启
position	Point		信息窗体所指坐标
width	Number		信息窗宽度，单位像素。取值范围：0, 220 - 730。如果您指定宽度为0，则信息窗口的宽度将按照其内容自动调整
height	Number		信息窗高度，单位像素。取值范围：0, 60 - 650。如果您指定高度为0，则信息窗口的高度将按照其内容自动调整
maxWidth	Number		信息窗最大化时的宽度，单位像素。取值范围：220 - 730
offset	Size		信息窗位置偏移值。默认情况下在地图上打开的信息窗底端的尖角将指向其地理坐标，在标注上打开的信息窗底端尖角的位置取决于标注所用图标的infoWindowOffset属性值，您可以为信息窗添加偏移量来改变默认位置
title	String		信息窗标题文字，支持HTML内容
autoPan	Boolean	true	是否开启信息窗口打开时地图自动移动
closeOnClick	Boolean	true	是否开启点击地图关闭信息窗口
message	String		自定义部分的短信内容，可选项。完整的短信内容包括：自定义部分+位置链接，不设置时，显示默认短信内容。短信内容最长为140个字
maximize	Boolean	false	允许最大化

常见方法：

函数名	参数	说明
close	event{type, target, point}	信息窗口被关闭时触发此事件
open	event{type, target, point}	信息窗口被打开时触发此事件
maximize	event{type, target}	信息窗口最大化后触发此事件
restore	event{type, target}	信息窗口还原时触发此事件
clickclose	event{type, target}	点击信息窗口的关闭按钮时触发此事件

以上就是比较常见的百度地图需要使用的知识点哦，剩下的其他功能可以参考百度封装的官网哈：

https://dafrok.github.io/vue-baidu-map/#/zh/overlay/info-window

11、参数配置

方案1：

首先需要安装百度地图的插件哈(之前如果有做过就不用咯)：

npm i vue-baidu-map -S

在main.js中添加参数引入全局变量(之前如果有做过就不用咯)：

接下来，设置UI控件哈：

然后配置所需要的参数哈：

以及需要的监听：

可以咯，看看截图吧：

效果：

方案2：结合Echarts实现效果：

需要安装Echarts：

npm i echarts -S

之后在main.js文件中配置参数将Echarts配置到全局变量中：

首先，先引入(import)必要的数据：

require('echarts/map/js/china.js')

注意：这里百度的参数还是需要添加上去的哈！

设置UI控件哈：

设置data数据用来显示用(官网参数)：

data: [
    {name: '海门', value: 9},
    {name: '鄂尔多斯', value: 12},
    {name: '招远', value: 12},
    {name: '舟山', value: 12},
    {name: '齐齐哈尔', value: 14},
    {name: '盐城', value: 15},
    {name: '赤峰', value: 16},
    {name: '青岛', value: 18},
    {name: '乳山', value: 18},
    {name: '金昌', value: 19},
    {name: '泉州', value: 21},
    {name: '莱西', value: 21},
    {name: '日照', value: 21},
    {name: '胶南', value: 22},
    {name: '南通', value: 23},
    {name: '拉萨', value: 24},
    {name: '云浮', value: 24},
    {name: '梅州', value: 25},
    {name: '文登', value: 25},
    {name: '上海', value: 25},
    {name: '攀枝花', value: 25},
    {name: '威海', value: 25},
    {name: '承德', value: 25},
    {name: '厦门', value: 26},
    {name: '汕尾', value: 26},
    {name: '潮州', value: 26},
    {name: '丹东', value: 27},
    {name: '太仓', value: 27},
    {name: '曲靖', value: 27},
    {name: '烟台', value: 28},
    {name: '福州', value: 29},
    {name: '瓦房店', value: 30},
    {name: '即墨', value: 30},
    {name: '抚顺', value: 31},
    {name: '玉溪', value: 31},
    {name: '张家口', value: 31},
    {name: '阳泉', value: 31},
    {name: '莱州', value: 32},
    {name: '湖州', value: 32},
    {name: '汕头', value: 32},
    {name: '昆山', value: 33},
    {name: '宁波', value: 33},
    {name: '湛江', value: 33},
    {name: '揭阳', value: 34},
    {name: '荣成', value: 34},
    {name: '连云港', value: 35},
    {name: '葫芦岛', value: 35},
    {name: '常熟', value: 36},
    {name: '东莞', value: 36},
    {name: '河源', value: 36},
    {name: '淮安', value: 36},
    {name: '泰州', value: 36},
    {name: '南宁', value: 37},
    {name: '营口', value: 37},
    {name: '惠州', value: 37},
    {name: '江阴', value: 37},
    {name: '蓬莱', value: 37},
    {name: '韶关', value: 38},
    {name: '嘉峪关', value: 38},
    {name: '广州', value: 38},
    {name: '延安', value: 38},
    {name: '太原', value: 39},
    {name: '清远', value: 39},
    {name: '中山', value: 39},
    {name: '昆明', value: 39},
    {name: '寿光', value: 40},
    {name: '盘锦', value: 40},
    {name: '长治', value: 41},
    {name: '深圳', value: 41},
    {name: '珠海', value: 42},
    {name: '宿迁', value: 43},
    {name: '咸阳', value: 43},
    {name: '铜川', value: 44},
    {name: '平度', value: 44},
    {name: '佛山', value: 44},
    {name: '海口', value: 44},
    {name: '江门', value: 45},
    {name: '章丘', value: 45},
    {name: '肇庆', value: 46},
    {name: '大连', value: 47},
    {name: '临汾', value: 47},
    {name: '吴江', value: 47},
    {name: '石嘴山', value: 49},
    {name: '沈阳', value: 50},
    {name: '苏州', value: 50},
    {name: '茂名', value: 50},
    {name: '嘉兴', value: 51},
    {name: '长春', value: 51},
    {name: '胶州', value: 52},
    {name: '银川', value: 52},
    {name: '张家港', value: 52},
    {name: '三门峡', value: 53},
    {name: '锦州', value: 54},
    {name: '南昌', value: 54},
    {name: '柳州', value: 54},
    {name: '三亚', value: 54},
    {name: '自贡', value: 56},
    {name: '吉林', value: 56},
    {name: '阳江', value: 57},
    {name: '泸州', value: 57},
    {name: '西宁', value: 57},
    {name: '宜宾', value: 58},
    {name: '呼和浩特', value: 58},
    {name: '成都', value: 58},
    {name: '大同', value: 58},
    {name: '镇江', value: 59},
    {name: '桂林', value: 59},
    {name: '张家界', value: 59},
    {name: '宜兴', value: 59},
    {name: '北海', value: 60},
    {name: '西安', value: 61},
    {name: '金坛', value: 62},
    {name: '东营', value: 62},
    {name: '牡丹江', value: 63},
    {name: '遵义', value: 63},
    {name: '绍兴', value: 63},
    {name: '扬州', value: 64},
    {name: '常州', value: 64},
    {name: '潍坊', value: 65},
    {name: '重庆', value: 66},
    {name: '台州', value: 67},
    {name: '南京', value: 67},
    {name: '滨州', value: 70},
    {name: '贵阳', value: 71},
    {name: '无锡', value: 71},
    {name: '本溪', value: 71},
    {name: '克拉玛依', value: 72},
    {name: '渭南', value: 72},
    {name: '马鞍山', value: 72},
    {name: '宝鸡', value: 72},
    {name: '焦作', value: 75},
    {name: '句容', value: 75},
    {name: '北京', value: 79},
    {name: '徐州', value: 79},
    {name: '衡水', value: 80},
    {name: '包头', value: 80},
    {name: '绵阳', value: 80},
    {name: '乌鲁木齐', value: 84},
    {name: '枣庄', value: 84},
    {name: '杭州', value: 84},
    {name: '淄博', value: 85},
    {name: '鞍山', value: 86},
    {name: '溧阳', value: 86},
    {name: '库尔勒', value: 86},
    {name: '安阳', value: 90},
    {name: '开封', value: 90},
    {name: '济南', value: 92},
    {name: '德阳', value: 93},
    {name: '温州', value: 95},
    {name: '九江', value: 96},
    {name: '邯郸', value: 98},
    {name: '临安', value: 99},
    {name: '兰州', value: 99},
    {name: '沧州', value: 100},
    {name: '临沂', value: 103},
    {name: '南充', value: 104},
    {name: '天津', value: 105},
    {name: '富阳', value: 106},
    {name: '泰安', value: 112},
    {name: '诸暨', value: 112},
    {name: '郑州', value: 113},
    {name: '哈尔滨', value: 114},
    {name: '聊城', value: 116},
    {name: '芜湖', value: 117},
    {name: '唐山', value: 119},
    {name: '平顶山', value: 119},
    {name: '邢台', value: 119},
    {name: '德州', value: 120},
    {name: '济宁', value: 120},
    {name: '荆州', value: 127},
    {name: '宜昌', value: 130},
    {name: '义乌', value: 132},
    {name: '丽水', value: 133},
    {name: '洛阳', value: 134},
    {name: '秦皇岛', value: 136},
    {name: '株洲', value: 143},
    {name: '石家庄', value: 147},
    {name: '莱芜', value: 148},
    {name: '常德', value: 152},
    {name: '保定', value: 153},
    {name: '湘潭', value: 154},
    {name: '金华', value: 157},
    {name: '岳阳', value: 169},
    {name: '长沙', value: 175},
    {name: '衢州', value: 177},
    {name: '廊坊', value: 193},
    {name: '菏泽', value: 194},
    {name: '合肥', value: 229},
    {name: '武汉', value: 273},
    {name: '大庆', value: 279}
],
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],
    '揭阳': [116.35, 23.55],
    '荣成': [122.41, 37.16],
    '连云港': [119.16, 34.59],
    '葫芦岛': [120.836932, 40.711052],
    '常熟': [120.74, 31.64],
    '东莞': [113.75, 23.04],
    '河源': [114.68, 23.73],
    '淮安': [119.15, 33.5],
    '泰州': [119.9, 32.49],
    '南宁': [108.33, 22.84],
    '营口': [122.18, 40.65],
    '惠州': [114.4, 23.09],
    '江阴': [120.26, 31.91],
    '蓬莱': [120.75, 37.8],
    '韶关': [113.62, 24.84],
    '嘉峪关': [98.289152, 39.77313],
    '广州': [113.23, 23.16],
    '延安': [109.47, 36.6],
    '太原': [112.53, 37.87],
    '清远': [113.01, 23.7],
    '中山': [113.38, 22.52],
    '昆明': [102.73, 25.04],
    '寿光': [118.73, 36.86],
    '盘锦': [122.070714, 41.119997],
    '长治': [113.08, 36.18],
    '深圳': [114.07, 22.62],
    '珠海': [113.52, 22.3],
    '宿迁': [118.3, 33.96],
    '咸阳': [108.72, 34.36],
    '铜川': [109.11, 35.09],
    '平度': [119.97, 36.77],
    '佛山': [113.11, 23.05],
    '海口': [110.35, 20.02],
    '江门': [113.06, 22.61],
    '章丘': [117.53, 36.72],
    '肇庆': [112.44, 23.05],
    '大连': [121.62, 38.92],
    '临汾': [111.5, 36.08],
    '吴江': [120.63, 31.16],
    '石嘴山': [106.39, 39.04],
    '沈阳': [123.38, 41.8],
    '苏州': [120.62, 31.32],
    '茂名': [110.88, 21.68],
    '嘉兴': [120.76, 30.77],
    '长春': [125.35, 43.88],
    '胶州': [120.03336, 36.264622],
    '银川': [106.27, 38.47],
    '张家港': [120.555821, 31.875428],
    '三门峡': [111.19, 34.76],
    '锦州': [121.15, 41.13],
    '南昌': [115.89, 28.68],
    '柳州': [109.4, 24.33],
    '三亚': [109.511909, 18.252847],
    '自贡': [104.778442, 29.33903],
    '吉林': [126.57, 43.87],
    '阳江': [111.95, 21.85],
    '泸州': [105.39, 28.91],
    '西宁': [101.74, 36.56],
    '宜宾': [104.56, 29.77],
    '呼和浩特': [111.65, 40.82],
    '成都': [104.06, 30.67],
    '大同': [113.3, 40.12],
    '镇江': [119.44, 32.2],
    '桂林': [110.28, 25.29],
    '张家界': [110.479191, 29.117096],
    '宜兴': [119.82, 31.36],
    '北海': [109.12, 21.49],
    '西安': [108.95, 34.27],
    '金坛': [119.56, 31.74],
    '东营': [118.49, 37.46],
    '牡丹江': [129.58, 44.6],
    '遵义': [106.9, 27.7],
    '绍兴': [120.58, 30.01],
    '扬州': [119.42, 32.39],
    '常州': [119.95, 31.79],
    '潍坊': [119.1, 36.62],
    '重庆': [106.54, 29.59],
    '台州': [121.420757, 28.656386],
    '南京': [118.78, 32.04],
    '滨州': [118.03, 37.36],
    '贵阳': [106.71, 26.57],
    '无锡': [120.29, 31.59],
    '本溪': [123.73, 41.3],
    '克拉玛依': [84.77, 45.59],
    '渭南': [109.5, 34.52],
    '马鞍山': [118.48, 31.56],
    '宝鸡': [107.15, 34.38],
    '焦作': [113.21, 35.24],
    '句容': [119.16, 31.95],
    '北京': [116.46, 39.92],
    '徐州': [117.2, 34.26],
    '衡水': [115.72, 37.72],
    '包头': [110, 40.58],
    '绵阳': [104.73, 31.48],
    '乌鲁木齐': [87.68, 43.77],
    '枣庄': [117.57, 34.86],
    '杭州': [120.19, 30.26],
    '淄博': [118.05, 36.78],
    '鞍山': [122.85, 41.12],
    '溧阳': [119.48, 31.43],
    '库尔勒': [86.06, 41.68],
    '安阳': [114.35, 36.1],
    '开封': [114.35, 34.79],
    '济南': [117, 36.65],
    '德阳': [104.37, 31.13],
    '温州': [120.65, 28.01],
    '九江': [115.97, 29.71],
    '邯郸': [114.47, 36.6],
    '临安': [119.72, 30.23],
    '兰州': [103.73, 36.03],
    '沧州': [116.83, 38.33],
    '临沂': [118.35, 35.05],
    '南充': [106.110698, 30.837793],
    '天津': [117.2, 39.13],
    '富阳': [119.95, 30.07],
    '泰安': [117.13, 36.18],
    '诸暨': [120.23, 29.71],
    '郑州': [113.65, 34.76],
    '哈尔滨': [126.63, 45.75],
    '聊城': [115.97, 36.45],
    '芜湖': [118.38, 31.33],
    '唐山': [118.02, 39.63],
    '平顶山': [113.29, 33.75],
    '邢台': [114.48, 37.05],
    '德州': [116.29, 37.45],
    '济宁': [116.59, 35.38],
    '荆州': [112.239741, 30.335165],
    '宜昌': [111.3, 30.7],
    '义乌': [120.06, 29.32],
    '丽水': [119.92, 28.45],
    '洛阳': [112.44, 34.7],
    '秦皇岛': [119.57, 39.95],
    '株洲': [113.16, 27.83],
    '石家庄': [114.48, 38.03],
    '莱芜': [117.67, 36.19],
    '常德': [111.69, 29.05],
    '保定': [115.48, 38.85],
    '湘潭': [112.91, 27.87],
    '金华': [119.64, 29.12],
    '岳阳': [113.09, 29.37],
    '长沙': [113, 28.21],
    '衢州': [118.88, 28.97],
    '廊坊': [116.7, 39.53],
    '菏泽': [115.480656, 35.23375],
    '合肥': [117.27, 31.86],
    '武汉': [114.31, 30.52],
    '大庆': [125.03, 46.58]
}

以上的复制就好咯，别乱来

接下来，解析数据啦：(函数部分)

好的最后配置数据啦：

最后，来张最后的演示吧：