🔥码云GVP开源项目 12k star Uniapp+ElementUI 功能强大 支持多语言、二开方便! 广告
### 地图组件就是添加地图样式的组件。点击“![](https://img.kancloud.cn/11/44/1144f49233281d716e1862bd89e8ef5f_39x32.png)”图标,再点击“地图”,即可创建新的图像,如图7.11; ![](https://img.kancloud.cn/00/3f/003fe84e3830d78c6ef117550db78bab_1182x609.png) ![](https://img.kancloud.cn/eb/b5/ebb56a16f485d6758ba33c80f763369e_801x40.png) ## **一、组件名称设置** ### 选中地图组件,在操作界面右侧的“图层名称”处可修改组件的名称,如图7.12。(名称最好要设置一下,方便后期组件管理) ![](https://img.kancloud.cn/8e/87/8e875ad7dfc40c1a11621666d8e8390e_1231x719.png) ![](https://img.kancloud.cn/a2/19/a219af29f8c24a2439ce9e01f60ecac5_799x43.png) ## **二、轮播** ### 选中该地图组件,在操作界面右侧,打开“开启轮播”开关,在“轮播时间”文本框中输入时间,来设置地图组件的轮播样式,如图7.13。 * ### 如果轮播时间想设为5秒,可在轮播时间的文本框中填写5000; ![](https://img.kancloud.cn/3b/b8/3bb8bcd7ac52e1b73a0c44bc4434ee62_1241x669.png) ![](https://img.kancloud.cn/91/c8/91c8080c2c42d3ee1c65e7303d618cad_793x39.png) ## **三、地图选择** ### 选中该地图组件,在操作界面右侧的“地图选择”处通过选择不同的地区来改变地图样式,如图7.14。 ![](https://img.kancloud.cn/a1/55/a15503c4a3c8abd6ed3bba8ef123adb0_1261x759.png) ![](https://img.kancloud.cn/1f/95/1f954b730a837db3aef8304928027feb_789x36.png) ## **四、地图比例** ### 选中该地图组件,在操作界面右侧,拖动“地图比例”大小,来设置地图样式,如图7.15。 ![](https://img.kancloud.cn/02/e5/02e5c5b62b22575fda39bde4d372c886_1112x753.png) ![](https://img.kancloud.cn/23/d1/23d1c893225a000ad2f1971a79cd5fae_801x40.png) ## **五、字体设置** ### 选中该地图,在操作界面右侧的“字体设置”处可修改地图组件的文字样式,如图7.16。 * ### 字体大小:文字的大小; * ### 字体高亮颜色:鼠标点击的时候高亮显示的颜色; * ### 字体颜色:文字的颜色; ![](https://img.kancloud.cn/82/c5/82c5e0a53ca9d40e626579df87d3efa8_1139x689.png) ![](https://img.kancloud.cn/b1/c4/b1c4157dc23cbcbc1b9d8f62447b71e3_803x42.png) ## **六、区域设置** ### 选中该地图组件,在操作界面右侧的“提示语设置”处可修改地图组件的提示语,如图7.17。 * ### 区域线:提示语的字体大小; * ### 区域颜色:提示语的字体颜色; * ### 区域高亮颜色:提示语的字体颜色; ![](https://img.kancloud.cn/de/ae/deae4c2896db1f26668a5f94fcd96bd6_1152x624.png) ![](https://img.kancloud.cn/64/58/64584b26ccce7d8df8ef6f0952951d6f_788x46.png) ## **七、边框颜色** ### 选中该地图组件,在操作界面右侧,通过设置边框颜色,来设置地图上区域之间的颜色样式,如图7.18。 ![](https://img.kancloud.cn/6c/b2/6cb2fffb118d33c53547a2bed8f09c64_1094x718.png) ![](https://img.kancloud.cn/02/0b/020bee69cf9b36a8b6ccc6e7ecfc7303_803x36.png) ## **八、接口设置** ### 选中该漏斗图组件,在操作界面右侧,点击“![](https://img.kancloud.cn/5b/7b/5b7b521d49daa43bf957a43f3870dc71_342x76.png)”,可设置接口,如图7.19。 ### 1\. 数据类型 ### 数据类型分为静态数据和动态数据; * ### 静态数据:写死的数据; * ### 动态数据:会随着接口传过来的数据实时变化; ### 2\. 接口地址 ### (1)静态数据,接口地址传过来的内容要类似以下格式: ~~~ [{"name":"测试坐标1","value":1,"lng":118.30078125,"lat":36.91915611148194,"zoom":1},{"name":"测试坐标2","value":1,"lng":112.21435546875,"lat":37.965854128749434,"zoom":1}] ~~~ ### (2)动态数据,接口地址传过来的内容要类似以下格式: ~~~ {"data":[{"name":"测试坐标1","value":1,"lng":118.30078125,"lat":36.91915611148194,"zoom":1},{"name":"测试坐标2","value":1,"lng":112.21435546875,"lat":37.965854128749434,"zoom":1}]} ~~~ ### 3\. 刷新时间 ### 这个参数主要针对动态数据设置的,完成数据的实时更新。 * ### 如果你想设置成5秒刷新一次,可以将刷新时间设置成“5000”; ### 4\. 刷新数据 ### 这个参数主要是重新请求以下接口,完成数据的更新。 ![](https://img.kancloud.cn/c2/15/c2154fb7ad3395101ad60cbc155b276f_688x874.png)