漏刻有时的博客_JavaScript,PHP,HTML5,漏刻有时,echarts,layui(7)

地图开发实战案例:高德地图loca API 文字LabelsLayer效果

html代码<div id="container" class="container"></div><script src="https://webapi.amap.com/maps?v=1.4.15&plugin=Map3D&key=4d9a765939a2b76588a3341c2828d87c"></script><script src="https://webapi.amap.com/loca?v=1.3.1&ke.

3d

jquery

json

html

javascript

原创 2021-07-30 16:32:50 1141 阅读

百度地图开发(8):地图覆盖物实现纵横交错的交通网络

强制格式化百度标签样式.BMapLabel { background: none !important; border: none !important;}标签样式表.shu_txt { font-size: 10px; font-weight: bold; color: #333; text-shadow: 1px 1px 2px #f5f5f5, 1px 1px 2px #f5f5f5, 1px 1px 2px #f5f5f5, 1px 1px.

f5

2d

折线

标签样式

点击事件

原创 2021-07-30 16:32:48 138 阅读

天地图API接口地址批量转换为经纬度的解决方案

<table> <tr> <td>地址</td> <td>经纬度</td> </tr> <tbody id="content"></tbody></table>封装接口函数 function transAddress(address) { var keyWord = {"keyWord": address

html

i++

导出数据

封装

json

原创 2021-07-30 16:32:46 773 阅读

百度地图开发自定义信息窗口openInfoWindow样式的解决方案

1.InfoWindow的样式，百度是没用提供直接使用的样式表的，目前都是热心网友在实际开发中自己的经验和实战总结；2.百度提供了InfoBox富文本标签弹出框的接口，引入InfoBox.js，即可自定义样式或丰富的边框功能，但是鼠标单击下一个标注时，已经弹出的模态框是无法自动关闭；InfoWindow单击事件则是会即时展示现在单击的弹出模态框。3.InfoBox的样式表要理解，必须理解的组成部分；4.实现原理，就是CSS优先级和权重问题以及!important优先级；/*地图标题 infoW..

html

模态框

样式表

优先级

百度

原创 2021-07-30 16:32:45 7097 阅读 1收藏

高德地图进阶开发实战案例(4):计算骑行的距离和时间

var map = new AMap.Map("container", { center: [116.397559, 39.89621], zoom: 14 }); var ridingOption = { map: map, panel: "panel", policy: 1, hideMarkers: false, isOutline: true, outl.

json

数据查询

批量处理

点集

i++

原创 2021-07-30 16:32:43 996 阅读

高德地图进阶开发实战案例(8):加载多个多边形的覆盖物且实现鼠标高亮和单击事件解决方案

多边形数据格式 //ajax数据输入格式; var data = [ { id: 1, value: "121.546266,29.80975;121.54543,29.806845;121.548713,29.806752;121.549957,29.809508" }, { id: 2, value: "121.549996,29.809229.

数据格式

初始化

i++

封装

加载

原创 2021-07-30 16:32:41 2113 阅读

高德地图开发实战案例:实现信息弹出框的富文本展示效果

marker.content = "<p class='cardsBg'></p>";.cardsBg { width: 246px; height: 426px; background: url(../images/cards.png) no-repeat center center;}其中cards.png为整个弹出模态框的背景图片，做到这一步。仍旧会自带高德地图的样式，需要增加一个强制CSS样式表内容，来覆盖掉高德自带的样式。/*高德地图弹.

高德地图

css样式

弹出框

背景图片

模态框

原创 2021-07-30 16:32:40 687 阅读

百度地图开发实战案例:根据起点和终点计算路程和时间

终点数据格式 //终点医院数据; var endData = [ {id: 0, name: '南京市第一医院', lng: 118.79073, lat: 32.023645}, {id: 1, name: '南京市红十字医院', lng: 118.798598, lat: 32.033747}, {id: 2, name: '南京京科医院', lng: 118.789758, lat: 32.092045}, {id: 3.

html

数据

数据格式

封装

地图

原创 2021-07-30 16:32:38 552 阅读

百度地图开发实战案例:展示当前定位多少千米内的POI（兴趣点）

1.获取当前的自动定位经纬；2.在自动定位经纬度的点，添加10千米的圆形覆盖物；3.爬取POI兴趣点的关键词；10千米的圆形覆盖物 //半径10千米,可自行调整; var circle = new BMap.Circle(mPoint, 10000, { fillColor: "blue", strokeWeight: 1, fillOpacity: 0.3, strokeOpacity: 0.3 }); .

数据

覆盖物

地图

原创 2021-07-30 16:32:37 207 阅读

高德地图进阶开发实战案例(5):矩形可视范围的东北西南角经纬度的获取

var map = new AMap.Map('container', { center: [ 116.387175, 39.876405 ], zoom: 13 }); var southWest = new AMap.LngLat(116.356449, 39.859008) var northEast = new AMap.LngLat(116.417901, 39.893797) var bounds = new AMap...

缩放

地图

原创 2021-07-30 16:32:36 684 阅读

高德地图进阶开发实战案例(7):点是否在多边形内和内外部的数量统计的解决方案

外部文件引入 <link rel="stylesheet" href="https://a.amap.com/jsapi_demos/static/demo-center/css/demo-center.css" type="text/css"> <script type="text/javascript" src="https://webapi.amap.com/maps?v=1.4.15&key=ca11d9894383ee611ed5.

ico

html

css

javascript

i++

原创 2021-07-30 16:32:34 572 阅读

高德地图进阶开发实战案例(10):地图选取起终点OD位置经纬度的驾车规划路线

外部文件的引入 <link rel="stylesheet" href="https://a.amap.com/jsapi_demos/static/demo-center/css/demo-center.css"/> <script src="https://a.amap.com/jsapi_demos/static/demo-center/js/demoutils.js"></script> <script type="text/jav.

高德地图

css

javascript

数据

加载

原创 2021-07-30 16:32:32 535 阅读 4评论

高德地图进阶开发实战案例(11):可拖拽驾车路线规划

外部文件引入 <script type="text/javascript" src="https://webapi.amap.com/maps?v=1.4.15&key=您申请的key值"></script> <script type="text/javascript" src="https://cache.amap.com/lbs/static/addToolbar.js"></script>构建地图 var map, rou.

拖拽

javascript

加载

地图

原创 2021-07-30 16:32:30 708 阅读

javascript封装函数:substr函数实现自动截取长度超出限制字数的解决方案

//缩减文本;function limitWords(txt, num) { var str = txt; str = str.substr(0, num); return str + "";}调用：var txt ="漏刻有时（LOCKDATAV），智能化数据展示解决方案服务商，让更多的人看到数据可视化的魅力，促进前沿技术与产业融合，帮助非专业的工程师通过图形化的界面轻松搭建专业水准的可视化应用";limitWords(txt, 27)Done！...

图形化

数据

解决方案

数据可视化

javascript

原创 2021-07-30 16:32:06 60 阅读

javascript对象数据合并实现补齐24小时时间段同时赋值0的解决方案

在php对接echarts生成24小时数据时，发现某些时段在数据库中是不存在的，这样就导致前端Echarts的X轴会出现时间段的跳跃。如后台生成的数据JSON如下：var arr = [ { "dataKey": "00", "totalTrans": "4", "totalPays": "301.70" }, { "dataKey": "01",

数据

对象数组

数据格式

i++

数组

原创 2021-07-30 16:32:04 258 阅读

javascript插件库的应用：mapper.js实现图片热点的hover高亮效果

在HTML中，链接有对应的hover高亮显示属性，但是对图片热点来说，是没有高亮的选项的，因此需要调用插件来实现该功能。准备工作热点图片的制作：使用过多前后端分离软件的程序猿，可能webstorm、subtime、Atom、VScode等工具烂熟于心，但是对图片特点的设置，比较下来还是推荐Dreamweaver。引入mapper.js库图片热点切分好后，需要下载mapper.js，并将该文件通过script脚本引入HTML。<script type="text/javascript" src

ico

高亮

高亮显示

html

区域设置

原创 2021-07-30 16:32:03 261 阅读

javascript以当前日期为准计算当月、上月、下月直接输出日期的解决方案

//获取当月;function getMonths(mons, today) { var d = new Date(); var nowYear = d.getFullYear().toString();//今年 var nowMonth = timeAdd0((d.getMonth() + 1 + Number(mons)).toString());//当月 var nowDay = timeAdd0(d.getDate().toString());//当日 if

javascript

原创 2021-07-30 16:32:02 232 阅读

javascript以当前日期为准计算昨天、7天、30天直接输出日期的解决方案

getDate(days)函数days为时间间隔的天数，+代表今日往后计算；-代表今日往前计算。 function getDate(days) { //定义今日标准时间; var d = new Date(); var nowYear = d.getFullYear().toString();//今年 var nowMonth = timeAdd0((d.getMonth() + 1).toString());//当月

日期格式

字符串

时间间隔

格式转换

日期计算

原创 2021-07-30 16:32:00 1529 阅读 1评论

javascript中html单双引号混排的解决方案

完整代码： $("#lay1").append("<span class=\"new1\" οnclick=\"getZoomUrl('sensor.html?device_id=" + device[0].imei + "', '1200px', '37.5rem')\"><img src=\"images/zoom.png\"></span>");代码分解:var url ="<span class=\"new1\" οnclick=\"getZoom

html

javascript

原创 2021-07-30 16:31:59 187 阅读

javascript简单的隐藏显示DIV解决方案

引入jquery <script src="js/jquery.min.js"></script>CSS #btn { display: block; background: #1E9FFF; border-radius: 5px; width: 100px; height: 25px; cursor: pointe.

html

jquery

css

javascript

原创 2021-07-30 16:31:58 267 阅读

javascript全屏按钮

项目分析：全屏按钮目前js版的大同小异，最大的问题就是无法刷新，刷新就退出。最理想的还是F11。/* Fullscreen btn */let fullscreen;let fsEnter = document.getElementById('fullscr');fsEnter.addEventListener('click', function (e) { e.preventDefault(); if (!fullscreen) { fullscr

html

全屏

项目分析

javascript

原创 2021-07-30 16:31:56 291 阅读

javascript通过设置Cookie来切换字体的解决方案

<div id="fonts"></div><div class="content">字体切换</div>$(function () { function SetCookie(name, value) { var Days = 30; var exp = new Date(); exp.setTime(exp.getTime() + Days * 24 * 60 *

css

javascript

原创 2021-07-30 16:31:55 58 阅读

javascript实现简单的新消息语音提醒功能

HTML消息提示层<div id="remind"></div>判断是否有新消息 var newInfo = 1; if (newInfo == 1) { document.getElementById("remind").innerHTML = "<audio id=\"myAudio\" controls loop autoplay src=\"libs/597d8e98b4de2.mp3\"></audio>";

html

消息提示

javascript

原创 2021-07-30 16:31:54 1450 阅读

javascript自动判断15位和18为身份证号计算年龄的解决方案

项目需求人员信息录入过程中，需要根据身份证号码，自动计算出当前的年龄。方案代码//根据身份证，自动计算年龄；function GetAge(identityCard) { var len = (identityCard + "").length; if (len == 0) { return 0; } else { if ((len != 15) && (len != 18)) { return 0;

ide

字符串

javascript

原创 2021-07-30 16:31:52 414 阅读

javascript时间函数的运用：根据开始时间和时间差来计算截至时间的解决方案

项目需求根据开始时间和时间差来确定截至时间项目说明开始时间：2020-10-10 09:16:50查询2小时前的时间，即：2020-10-10 07:16:50项目方案js时间函数需要使用不同的属性来组合实现具体时间；时间不足十位数的，需要0补充；将时间转化时间戳，然后毫秒加减实现时间的差值计算方案代码//计算时间;function getTimes(fromTime, hours) { fromTime = fromTime.replace(new RegExp("-",

时间戳

d3

时间格式

js时间

javascript

原创 2021-07-30 16:31:51 161 阅读

javascript计算某段代码大执行时间console.time()

console.time() 方法是作为计算器的起始方法，该方法一般用于测试程序执行的时长。 console.time("lcdata"); for (var i = 2015; i < 2021; i++) { opHtml += "<option value=\"" + i + "\">" + i + "年</option>"; } $("#years").html(opHtml); console.timeEnd.

html

i++

测试程序

javascript

原创 2021-07-30 16:31:49 320 阅读

javascript实现数据自动模拟系列(1):ProgressBarWars.js进度条动画轮播

官方名称jQuery仿造星球大战激光剑效果水平进度条插件JSProgressBarWars.js使用步骤引入外部JS包<script src="js/jquery-2.1.1.min.js" type="text/javascript"></script><script src="js/ProgressBarWars.js"></script>html代码 <div id="vaderSize" style="width: 200p

进度条

jquery

定时刷新

封装

加载

原创 2021-07-30 16:31:47 167 阅读

Echarts通过ajax获取数据定时更新轮询的解决方案及问题分析

一、目前网上常用的解决方案//将ajax封装起来启用一个定时器达到三秒抓一次数据window.function(){ setInterval(ajaxNew(),3000);}存在的问题是，首次加载缓慢，用户体验性差，数据加载不友好。二、升级定时刷新方案// 执行异步请求 var salesinterval; getsales();clearInterv...

数据

ajax

自动刷新

解决方案

自动更新

原创 2021-07-30 16:31:42 856 阅读

Echarts仪盘表属性值设置带来更多意料不到的效果

myChart.setOption(option); //设置定时，加载随机数据，可以直观显示 timeTicket = setInterval(function() { var random=(Math.random() * 100).toFixed(2); var color=[[...

Echarts

加载

数据可视化

随机数

echarts

原创 2021-07-30 16:31:40 291 阅读

ECharts动态更新问题的理解

ECharts动态更新包括：一、新数据的增加（或删除），自动显示在图标上；二、原有数据的修改，自动显示更新后的数据在图表；

数据

动态更新

echarts

原创 2021-07-30 16:31:20 438 阅读

官方博客	全部文章	热门标签	班级博客
了解我们	网站地图	意见反馈

鸿蒙开发者社区	51CTO学堂
51CTO	软考资讯

51CTO博客

漏刻有时

地图开发实战案例:高德地图loca API 文字LabelsLayer效果

百度地图开发(8):地图覆盖物实现纵横交错的交通网络

天地图API接口地址批量转换为经纬度的解决方案

百度地图开发自定义信息窗口openInfoWindow样式的解决方案

高德地图进阶开发实战案例(4):计算骑行的距离和时间

高德地图进阶开发实战案例(8):加载多个多边形的覆盖物且实现鼠标高亮和单击事件解决方案

高德地图开发实战案例:实现信息弹出框的富文本展示效果

百度地图开发实战案例:根据起点和终点计算路程和时间

百度地图开发实战案例:展示当前定位多少千米内的POI（兴趣点）

高德地图进阶开发实战案例(5):矩形可视范围的东北西南角经纬度的获取

高德地图进阶开发实战案例(7):点是否在多边形内和内外部的数量统计的解决方案

高德地图进阶开发实战案例(10):地图选取起终点OD位置经纬度的驾车规划路线

高德地图进阶开发实战案例(11):可拖拽驾车路线规划

javascript封装函数:substr函数实现自动截取长度超出限制字数的解决方案

javascript对象数据合并实现补齐24小时时间段同时赋值0的解决方案

javascript插件库的应用：mapper.js实现图片热点的hover高亮效果

javascript以当前日期为准计算当月、上月、下月直接输出日期的解决方案

javascript以当前日期为准计算昨天、7天、30天直接输出日期的解决方案

javascript中html单双引号混排的解决方案

javascript简单的隐藏显示DIV解决方案

javascript全屏按钮

javascript通过设置Cookie来切换字体的解决方案

javascript实现简单的新消息语音提醒功能

javascript自动判断15位和18为身份证号计算年龄的解决方案

javascript时间函数的运用：根据开始时间和时间差来计算截至时间的解决方案

javascript计算某段代码大执行时间console.time()

javascript实现数据自动模拟系列(1):ProgressBarWars.js进度条动画轮播

Echarts通过ajax获取数据定时更新轮询的解决方案及问题分析

Echarts仪盘表属性值设置带来更多意料不到的效果

ECharts动态更新问题的理解

欢迎