足迹飞线图生成器

已于 2022-05-06 09:32:37 修改
阅读量422 收藏 1
点赞数 1
文章标签： html5 javascript bootstrap echarts
于 2022-04-26 19:29:56 首次发布
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/weixin_43501502/article/details/124434846
版权

足迹飞线图生成器

效果图

在这里插入图片描述

右侧输入行程，
可添加多次行程，
生成足迹飞线图，
包含导出html代码功能


全部代码：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>足迹飞线图生成器</title>
    <link href="http://cdn.bootcss.com/bootstrap/3.3.6/css/bootstrap.min.css" rel="stylesheet">
    <style>
 body {
    padding-top: 0px
}

.footer {
    padding-top: 40px;
    padding-bottom: 40px;
    margin-top: 40px;
    border-top: 1px solid #eee
}

.jumbotron {
    text-align: center;
    background-color: transparent
}

.jumbotron .btn {
    padding: 14px 24px;
    font-size: 21px
}

.nav-justified {
    background-color: #eee;
    border: 1px solid #ccc;
    border-radius: 5px
}

.nav-justified > li > a {
    padding-top: 15px;
    padding-bottom: 15px;
    margin-bottom: 0;
    font-weight: 700;
    color: #777;
    text-align: center;
    background-color: #e5e5e5;
    background-image: -webkit-gradient(linear, left top, left bottom, from(#f5f5f5), to(#e5e5e5));
    background-image: -webkit-linear-gradient(top, #f5f5f5 0%, #e5e5e5 100%);
    background-image: linear-gradient(to bottom, #f5f5f5 0%, #e5e5e5 100%);
    filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#f5f5f5', endColorstr='#e5e5e5', GradientType=0);
    background-repeat: repeat-x;
    border-bottom: 1px solid #d5d5d5
}

.nav-justified > .active > a, .nav-justified > .active > a:focus, .nav-justified > .active > a:hover {
    background-color: #ddd;
    background-image: none;
    box-shadow: inset 0 3px 7px rgba(0, 0, 0, .15)
}

.nav-justified > li:first-child > a {
    border-radius: 5px 5px 0 0
}

.nav-justified > li:last-child > a {
    border-bottom: 0;
    border-radius: 0 0 5px 5px
}

@media (min-width: 768px) {
    .nav-justified {
        max-height: 52px
    }

    .nav-justified > li > a {
        border-right: 1px solid #d5d5d5;
        border-left: 1px solid #fff
    }

    .nav-justified > li:first-child > a {
        border-left: 0;
        border-radius: 5px 0 0 5px
    }

    .nav-justified > li:last-child > a {
        border-right: 0;
        border-radius: 0 5px 5px 0
    }
}

.form-horizontal input {
    margin-top: 10px;
    margin-bottom: 10px;
}

.modal-body {
    font-size: 12px;
}
	</style>
</head>
<body>
<div class="row" style='margin-top:20px;width: 98%'>
    <div class="col-md-9" id='main'></div>
    <div class="col-md-3" style='padding-left:20px;'>
        <p class="alert alert-success">每次行程内部，两个目的地（城市 景点）以空格间隔</p>
        <form class="form-horizontal">
            <input id='title-input' type="text" class='form-control' value='' placeholder='请输入标题'>
            <button type='button' id='add-btn' class="btn btn-success">添加行程</button>
            <button type='button' id='remove-null-btn' class="btn btn-success">移除空行程</button>
            <button type='button' id="fresh-btn" class='btn btn-success pull-right'>查看效果</button>
            <input type="text" class='form-control router' value='北京 平遥 北京'>
            <button id='output-btn' type="button" class="btn btn-success btn-lg btn-block">导出代码</button>
        </form>
    </div>
</div>
<div class="modal fade" id="codeModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel">
    <div class="modal-dialog modal-lg" role="document">
        <div class="modal-content">
            <div class="modal-header">
                <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">&times;</span>
                </button>
                <h4 class="modal-title" id="myModalLabel"></h4>
            </div>
            <div class="modal-body">
            </div>
            <div class="modal-footer">
                <button type="button" class="btn btn-default" data-dismiss="modal">关闭</button>
            </div>
        </div>
    </div>
</div>
<script id='t1' type='text/template' charset="utf-8">
&lt;!DOCTYPE html&gt;
&lt;lang="en"&gt;
&lt;head&gt;
&lt;meta charset="utf-8"&gt;
&lt;title&gt;<%=obj.title%>&lt;/title&gt;
&lt;/head&gt;
&lt;body &gt;
&lt;div id="main" style="margin:20px;"&gt;&lt;/div&gt;
&lt;script src="http://echarts.baidu.com/build/dist/echarts-all.js"&gt;&lt;/script&gt;
&lt;script type="text/javascript"  charset="utf-8"&gt;
if ((window.screen.height) > (window.screen.width)) {
document.getElementById('main').style.width=(window.screen.width)*2+'px' ;
document.getElementById('main').style.height=(window.screen.height)+'px' ;
} else {
document.getElementById('main').style.width=(window.screen.width-50)+'px' ;
document.getElementById('main').style.height=(window.screen.height-200)+'px' ;
}
var myChart = echarts.init(document.getElementById('main'));
var option = <%=obj.option%>;
myChart.setOption(option);
&lt;/script&gt;
&lt;/body&gt;
&lt;/html&gt;
</script>
<script src='http://apps.bdimg.com/libs/jquery/2.1.4/jquery.min.js'></script>
<script src="http://cdn.bootcss.com/bootstrap/3.3.6/js/bootstrap.min.js"></script>
<script src="http://cdn.bootcss.com/underscore.js/1.8.3/underscore-min.js"></script>
<script src="http://echarts.baidu.com/build/dist/echarts-all.js"></script>
<script type="text/javascript" charset="utf-8">
function FootPrint() {
    this.key = 'fHrNQj6DHTjZtfTvfqbsuvTzKc5V9SBl'
    this.url = 'http://api.map.baidu.com/geocoder/v2/?output=json&ak=' + this.key + '&address='
    this.addbtn = $('#add-btn')
    this.freshbtn = $('#fresh-btn')
    this.removeNull = $('#remove-null-btn')
    this.outbtn = $('#output-btn')
    this.chart = echarts.init(document.getElementById('main'))
    this.tmpl = $('#t1').html()
    this.clearCache()

    this.option = {
        backgroundColor: '#FFFFFF',//背景颜色
        color: ['gold', 'aqua', 'lime'],
        title: {
            text: '',
            subtext: '',
            x: 'center',
            textStyle: {
                color: '#1b1b1b'
            }
        },
        tooltip: {
            trigger: 'item',
            formatter: '{b}'
        },
        dataRange: {
            show: false,
            min: 0,
            max: 100,
            calculable: true,
            color: ['#ff3333', 'orange', 'yellow', 'lime', 'aqua'],
            textStyle: {
                color: '#fff'
            }
        },
        series: [{
            name: '全国',
            type: 'map',
            roam: true,//开启 缩放
            scaleLimit: {
                min: 1.1,//最小 缩放比例
                max: 4 //最大 缩放比例
            },
            hoverable: false,
            mapType: 'china',
            itemStyle: {
                //默认背景颜色
                normal: {
                    "borderColor": "#6495ED",//默认边框颜色
                    borderWidth: 0.5,
                    areaStyle: {
                        color: '#1b1b1b'//默认背景颜色
                    }, label: {
                        show: true, //打开省份名展示
                    },
                }
            },
            data: [],
            geoCoord: []
        }, {
            name: '足迹',
            type: 'map',
            mapType: 'china',
            data: [],
            markLine: {
                smooth: true,
                effect: {
                    show: true,
                    scaleSize: 1,
                    period: 30,
                    color: '#fff',
                    shadowBlur: 10
                },
                itemStyle: {
                    normal: {
                        borderWidth: 1,
                        lineStyle: {
                            type: 'solid',
                            shadowBlur: 10
                        },
                        label: {
                            show: true
                        }
                    }
                },
                data: []
            },
            markPoint: {
                symbol: 'emptyCircle',
                symbolSize: function (v) {
                    return 10 + v / 10
                },
                effect: {
                    show: true,
                    shadowBlur: 0
                },
                itemStyle: {
                    normal: {
                        label: {
                            show: true
                        }
                    },
                    emphasis: {
                        label: {
                            show: true,
                            position: 'top'
                        }
                    }
                },
                data: []
            }
        }]
    };
}

$.extend(FootPrint.prototype, {
    bindEvent: function () {
        var that = this
        that.addbtn.on('click', function () {
            //增加新的input标签
            that.outbtn.before('<input type="text" placeholder="请输入行程，多个地点之间用空格间隔" class="form-control router">')
            //触发[查看效果]按钮
            that.freshbtn.click();
        })
        $.ajaxSettings.async = false;
        that.freshbtn.on('click', function () {
            that.clearCache()
            that.getInputVal()
            that.title = $('#title-input').val() || '默认标题'
            var size = _.size(that.cache)
            $.each(that.cache, function (key) {
                $.getJSON(that.url + key + '&callback=?', function (res) {
                    if (res.result) {
                        var loc = res.result.location
                        that.alldata[key] = [loc.lng, loc.lat]
                        that.pointdata.push({
                            'name': key
                        })
                        if (_.size(that.alldata) === size) {
                            that.initPage()
                        }
                    }
                })
            })
        }).trigger('click');
        that.outbtn.on('click', function () {
            //触发 [查看效果]按钮
            that.freshbtn.click();
            //获取配置
            var obj = {
                title: that.title,
                option: JSON.stringify(that.option)
            }
            pageCode = _.template(that.tmpl)(obj)
            //先触发 freshbtn效果事件，再导出
            exportRaw(that.title + '.html', pageCode.replaceAll('&lt;', '<').replaceAll('&gt;', '>'))
        })
        that.removeNull.on('click', function () {
            //触发 [查看效果]按钮
            that.freshbtn.click();
            //循环移除空input元素
            $('input.router').each(function (i, v) {
                var val = $(v).val().replace(' ', '');
                if (!val) {
                    this.remove();
                }
            })
        }).trigger('click');
    },
    initPage: function () {
        var that = this, tmp;
        $.each(that.foot, function (a, v) {
            tmp = v.split(' ')
            for (var i = 0; i < tmp.length - 1; i++) {
                that.linedata.push([{
                    'name': tmp[i]
                }, {
                    'name': tmp[i + 1]
                }])
            }
        })
        that.option.title.text = that.title
        that.option.series[0].geoCoord = that.alldata
        that.option.series[1].markLine.data = that.linedata
        that.option.series[1].markPoint.data = that.pointdata
        that.chart.setOption(that.option, true);
    },
    getInputVal: function () {
        var that = this
        that.foot = []
        $('input.router').each(function (i, v) {
            var val = $(v).val().replace('     ', ' ').replace('    ', ' ').replace('   ', ' ').replace('  ', ' ');
            if (val) {
                $.each(val.split(' '), function (j, s) {
                    that.cache[s] = true
                })
                that.foot.push(val)
            }
        })
    },
    clearCache: function () {
        this.foot = []
        // all data
        this.cache = {}
        this.alldata = {}
        this.linedata = []
        this.pointdata = []
    },
    init: function () {
        this.bindEvent()
        $('.masthead a').attr('target', '_blank')
    }
})

//导出文本
function exportRaw(name, data) {
    var urlObject = window.URL || window.webkitURL || window;
    var export_blob = new Blob([data]);
    var save_link = document.createElementNS("http://www.w3.org/1999/xhtml", "a")
    save_link.href = urlObject.createObjectURL(export_blob);
    save_link.download = name;
    fakeClick(save_link);
}

function fakeClick(obj) {
    var ev = document.createEvent("MouseEvents");
    ev.initMouseEvent("click", true, false, window, 0, 0, 0, 0, 0, false, false, false, false, 0, null);
    obj.dispatchEvent(ev);
}

$(function () {
    if ($(window).height() > $(window).width()) {
        $('#main').height($(window).width() );
    } else {
        $('#main').height($(window).height()- 50);
    }
    var foot = new FootPrint()
    foot.init();
})

</script>
</body>
</html>



参考：

参考于gitHub
https://github.com/shengxinjing/footprint

Veh
关注
  • 1
    点赞
  • 踩
  • 1
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
footprint:我在地图上走过的足迹
05-16
在地图上走过的足迹 百度地图API使用 使用 注册百度开发者，获得个人密钥，在index.html第22行替换url中ak参数 [removed][removed] 获取地理位置坐标： 填充地图数据：js/index.js36行开始，经纬度坐标以“|”分割 足迹列表 大致时间 省 城市\地区（景点） 备注 2009-10 湖南 长沙（各大高校） 好友聚会 2011-03 江苏 苏州（阳澄湖、拙政园、忠王府、苏州博物馆、山塘街、老苏州城） 公司年会 2012-春节 浙江 杭州（杭州市、西湖风景区） 第一次独自旅行（上） 2012-春节 浙江 乌镇（东栅、西栅） 第一次独自旅行（下） 2013-03 福建 厦门（厦门岛、中山路、南普陀寺、厦门大学、白城、
pyhton10min系列之程序员的浪漫-足迹生成器
weixin_33877885的博客
12-24 314
Footprint--记录去过的足迹 项目主页 跪求star 程序员的浪漫，我女朋友蘑菇喜欢旅游，于是我做了这个，记录2015一起去过的地方，祝她圣诞快乐 如果觉得对你有帮助，麻烦去github求个star 视频教程 开发时间很短，如有bug 请轻喷，有需求提issue，我会维护这个项目 ├── README.md 说明文档 ├── j...
html标签怎么制作足迹地图,用百度地图API做个人足迹地图教程
weixin_34524284的博客
06-10 1364
上次折腾了个人百度足迹地图，积累了点经验，现分享给大家，如有兴趣都可以学着做一个。二话不说，先放出代码，点击下载。压缩包含三个文件以及一个文件夹，其中“x1.php”是主题模板，模板是放在主题文件夹下供新建页面选用，里边对应地址路径请自行修改，后面我会解释。另外两个是html页面文件，其中“x3.html”这个是地图核心页面，附带大量的JavaScript，凭借这些实现功能丰富、交互性强的地图应用...
html绘制流程图飞线,基于jsplumb绘制流程图
weixin_35411561的博客
06-10 760
效果图jspumb.gif需要用到以下四个文件包jQuery.jsjquery-ui.min.cssjquery-ui.min.jsjquery.jsPlumb-1.6.2-min.jscss样式代码body{text-align: center;}#root{width:100%;height:100vh;display: flex;justify-content: space-between;...
html怎么绘制飞线,绘制飞线，echarts迁徙图原理
weixin_39877898的博客
06-16 388
其实是在元素上绘制了一条线，然后利用canvas 的createLinearGradient函数不断移动线段的样式位置来实现。因此首先绘制线段ctx.beginPath();ctx.moveTo(100, 0);ctx.lineTo(100, 700);由于要不断改变其样式，因此要记录起起始位置，然后利用定时器不断重置其位置来实现。var start = 0;//改变样式的函数function a...
echarts地图飞线实现
06-25
在“echarts地图飞线实现”这个主题中，我们将深入探讨如何使用ECharts来创建动态的地图线行展示，使得数据的流动和交互更加直观、生动。 首先，地图展示是ECharts的一个重要功能。ECharts支持多种地图类型，包括...
根据百度迁徙图改编的飞线图，具体效果见博客
03-09
html中实现飞线图效果，根据百度迁徙图改编，代码可以直接运行，包含echarts.js、china.js、data.json、jquery.min.js及代码文件index.html，具体效果可参考博客文章：...可以设置地图背景颜色，涟漪特效，波纹方式，...
5253-ACBPQ液晶屏飞线图 T-COM点位图 液晶屏边板飞线
09-22
5253-ACBPQ液晶屏飞线图 T-COM点位图 液晶屏边板飞线 5253-ACBPQ液晶屏飞线图 T-COM点位图 液晶屏边板飞线 v
8656-MCY61液晶屏飞线图 T-COM点位图 液晶屏边板飞线
09-22
8656-MCY61液晶屏飞线图 T-COM点位图 液晶屏边板飞线8656-MCY61液晶屏飞线图 T-COM点位图 液晶屏边板飞线
5253-BCBR3液晶屏飞线图 T-COM点位图 液晶屏边板飞线
09-22
5253-BCBR3液晶屏飞线图 T-COM点位图 液晶屏边板飞线5253-BCBR3液晶屏飞线图 T-COM点位图 液晶屏边板飞线5253-BCBR3液晶屏飞线图 T-COM点位图 液晶屏边板飞线
仿照淘宝浏览足迹页面
04-05
作者Josin22，源码JSCarouselDemo，MVVM模式写的一个仿照淘宝浏览足迹页面. 重写的UICollectionViewLayout, 自定义滑动效果, 效果极佳。
html5 svg线条动态绘制文字轮廓边框动画
12-13
这是一款使用html5 svg和css3制作的线条动态绘制文字轮廓边框动画特效。该动画特效通过将文字轮廓制作成svg坐标，再通过html5和css3技术将其制作为线条动态绘制文字轮廓边框的动画。
*IT HTML：足迹第八十八步：HTML通用模版
原玉辉的博客
10-20 135
HTML通用模版 <!doctype html> <html lang="en"> <head> <meta charset="UTF-8"><!-- 声明字符集，防止乱码 --> <meta name="Keywords" content=""><!-- 搜索引擎方便找到本网站 --> <meta name="Description" content=""&gt
仿翁天信网站旅行足迹地图HTML单页源码
源码下载
04-10 288
介绍： 本文是仿翁天信网站旅行足迹地图HTML单页源码 index.html第85行修改去过的地方，源码内有标注。 网盘下载地址： http://kekewl.net/TOqNuVkKFO0 图片：
在vue中使用echarts实现飞机航线 水滴图 词云图
qq_60587956的博客
08-14 5399
vue中使用echarts实现飞机航线 水滴图 词云图
echarts + 百度地图 飞线
weixin_42429220的博客
11-04 3322
效果： 代码地址 集成js <script type="text/javascript" src="https://api.map.baidu.com/api?v=2.0&ak=你自己申请得百度地图ak"></script> <script src="./dist/echarts.min.js" ></script> <script src="./dist/extension/bmap.min.js"&gt
CSS3之线条特效（鼠标悬停线条从中间变长）
Andone_hsx的博客
01-19 9553
当鼠标悬停在红色圆上时，福字下面出现一条白色的线条从中间不断向两边延伸<!doctype html> <html> <head> <meta charset="UTF-8"> <meta name="Generator" content="EditPlus®"> <meta name="Author" content=
CSS3的飞入飞出动画
weixin_45979310的博客
09-09 514
在要动画的元素上加上样式 animation: showModRight .6s ease-in; -webkit-animation: showModRight .6s ease-in; showModRight ： 自右向左 showModLeft ： 自左向右 linear ： 匀速 ease ： 由慢变快再慢 ease-in ：由慢变快 ease-out： 由快变慢 ease-in-out： 慢快慢 ...
【数据可视化】飞线图（航线图）在地图中的生成的三种方案
yuelizhe4774的博客
08-19 7567
飞线图在当前数据跨区域的状态下，使用越来越多，但是并没有现成的可视化工具来实现，本文介绍了三种飞线图的实现方法。
echarts飞线图
最新发布
08-24
然后，通过指定图表的类型为"lines"，以及设置相关的数据和配置项，就可以生成飞线图。 以下是一个简单的示例代码，展示如何使用ECharts创建一个基本的飞线图： ```javascript // 引入ECharts库 import echarts ...

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值