Echarts地图坐标geoCoordMap后台生成动态获取的解决方案

简介: Echarts地图坐标geoCoordMap后台生成动态获取的解决方案

在echarts制作地图时,使用到geoCoordMap,其格式如下:

var geoCoordMap = {
    "舟山":[122.207216,29.985295],    
"齐齐哈尔":[123.97,47.33],
"盐城":[120.13,33.38],
"拉萨":[91.11,29.97],
"南宁":[108.33,22.84],
}

这是一组非数组,非标准JSON格式的非常规对象,如果利用ajax获取后使用字符串拼接,是无法显示字符串到对象的转化的,该方案放弃。

            success: function (res) {
                if (res.data) {
                    var arr = res.data;
                    for (var j = 0; j < arr.length; j++) {
                        a1 += "\"" + arr[j].name + "\":[" + arr[j].lon + "," + arr[j].lat + "],";
               }

目前的解决方案,是直接通过后台生成geoCoordMap.js文件,内部按照其格式开发,前端直接调用:

    <!--所有位置信息的geoCoordMap,需提前生成-->
    <script type="text/javascript" src="js/geoCoordMap.js"></script>


Done!

相关文章
|
23天前
echarts 柱状图/折线图x轴坐标间隔
echarts 柱状图/折线图x轴坐标间隔
12 0
|
5天前
|
数据采集 JSON 数据可视化
python_selenuim获取csdn新星赛道选手所在城市用echarts地图显示
python_selenuim获取csdn新星赛道选手所在城市用echarts地图显示
6 1
|
18天前
|
SQL JavaScript 分布式数据库
使用Vue+ ECharts进行动态图表展示
Vue是一个用于构建用户界面的渐进式JavaScript框架,可以轻松构建单页面应用程序(SPA)。ECharts是一个基于JavaScript的数据可视化库,可以通过简单的配置实现各种图表的展示和交互。
97 0
|
3月前
|
定位技术
使用Echarts实现地图展示
使用Echarts实现地图展示
|
3月前
|
JSON 程序员 定位技术
使用echarts+echarts-gl绘制3d地图,实现地图轮播效果
记录一下大屏开发中使用到的echarts-gl 大屏的页面根据需求前前后后改了几个版本了,地图的样式也改了又改 这里记录一下,因为echarts属性用到的比较多也比较杂,防止以后需要用到忘记了
|
4月前
|
JSON JavaScript 定位技术
Vue中使用echarts@4.x中国地图及AMap相关API的使用
Vue中使用echarts@4.x中国地图及AMap相关API的使用
168 0
Vue中使用echarts@4.x中国地图及AMap相关API的使用
|
4月前
|
定位技术
echarts显示地图
echarts显示地图
|
5月前
|
JavaScript
引入echarts时报错 “TypeError: Cannot read properties of undefined (reading ‘init‘)“的解决方案
引入echarts时报错 “TypeError: Cannot read properties of undefined (reading ‘init‘)“的解决方案
182 0
引入echarts时报错 “TypeError: Cannot read properties of undefined (reading ‘init‘)“的解决方案
|
5月前
|
定位技术
【ECharts学习】—实现中国地图
【ECharts学习】—实现中国地图
|
3月前
|
数据可视化
echarts图表坐标轴数据标签添加下划线
echarts图表坐标轴数据标签添加下划线
55 0