获取json数据后在 地图上打点，根据 json不断移动点的位置
<?php echo <<<_END
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="initial-scale=1.0, user-scalable=no, width=device-width">
<title>点标记</title>
<link rel="stylesheet" href="http://cache.amap.com/lbs/static/main1119.css"/>
<style>
.marker {
color: #ff6600;
padding: 4px 10px;
border: 1px solid #fff;
white-space: nowrap;
font-size: 12px;
font-family: "";
background-color: #0066ff;
}
</style>
<script src="http://webapi.amap.com/maps?v=1.3&key=您申请的key值"></script>
<script type="text/javascript" src="http://cache.amap.com/lbs/static/addToolbar.js"></script>
</head>
<body>
<div id="container"></div>
<script>
var marker, map = new AMap.Map("container", {
resizeEnable: true,
center: [126.60580555556, 45.702363888889],
zoom: 13
});
var getJSON = function(url) {
return new Promise(function(resolve, reject) {
var xhr = new XMLHttpRequest();
xhr.open('get', url, true);
xhr.responseType = 'json';
xhr.onload = function() {
var status = xhr.status;
if (status == 200) {
resolve(xhr.response);
} else {
reject(status);
}
};
xhr.send();
});
}; getJSON('http://web.cellpies.com/api/driving/getVehicleLocationPoints?vehicleDeviceId=0400000000030603&timeType=4&startTime=2017-03-17%2013:00:00&stopTime=2017-03-17%2014:00:00').then(function(jdata) {
//alert('Your Json result is: ' + jdata); //you can comment this, i used it to debug
//alert(jdata.data[0].gpsx);
//alert(jdata.data[0].gpsy);
window.i=0;
//addMarker(jdata.data[i].gpsx,jdata.data[i].gpsy);
setInterval(function () { addMarker(jdata.data[window.i].gpsx,jdata.data[window.i].gpsy); },"1000"); }, function(status) { //error detection....
alert('Something went wrong.');
}); // 实例化点标记
function addMarker(v1,v2) { window.i+=10;
marker = new AMap.Marker({
icon: "http://webapi.amap.com/theme/v1.3/markers/n/mark_b.png",
position: [v1,v2]
});
marker.setMap(map);
} </script>
</body>
</html> </script>
</body>
</html> _END; ?>
效果图
-----------------------------------------------------------------------更新---------------------------------------------------------
去掉连续显示多个点，每次只显示一个点
<?php
echo<<<_END
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="initial-scale=1.0, user-scalable=no, width=device-width">
<title>点标记</title>
<link rel="stylesheet" href="http://cache.amap.com/lbs/static/main1119.css"/>
<style>
.marker {
color: #ff6600;
padding: 4px 10px;
border: 1px solid #fff;
white-space: nowrap;
font-size: 12px;
font-family: "";
background-color: #0066ff;
}
</style>
<script src="http://webapi.amap.com/maps?v=1.3&key=您申请的key值"></script>
<script type="text/javascript" src="http://cache.amap.com/lbs/static/addToolbar.js"></script>
</head>
<body>
<div id="container"></div>
<script>
var marker, map = new AMap.Map("container", {
resizeEnable: true,
center: [126.60580555556, 45.702363888889],
zoom: 13
});
var getJSON = function(url) {
return new Promise(function(resolve, reject) {
var xhr = new XMLHttpRequest();
xhr.open('get', url, true);
xhr.responseType = 'json';
xhr.onload = function() {
var status = xhr.status;
if (status == 200) {
resolve(xhr.response);
} else {
reject(status);
}
};
xhr.send();
});
}; getJSON('http://web.cellpies.com/api/driving/getVehicleLocationPoints?vehicleDeviceId=0400000000030603&timeType=4&startTime=2017-03-17%2013:00:00&stopTime=2017-03-17%2014:00:00').then(function(jdata) {
addMarker(jdata.data[0].gpsx,jdata.data[0].gpsy);
window.i=1;
//updateMarker(jdata.data[1].gpsx,jdata.data[1].gpsy);
setInterval(function () { updateMarker(jdata.data[window.i].gpsx,jdata.data[window.i].gpsy); },"1000"); }, function(status) { //error detection....
alert('Something went wrong.');
}); // 实例化点标记
function addMarker(v1,v2) { marker = new AMap.Marker({
icon: "http://webapi.amap.com/theme/v1.3/markers/n/mark_b.png",
position: [v1,v2]
});
marker.setMap(map);
}
function updateMarker(v1,v2) {
//在地图上更新标记
// 自定义点标记内容
window.i+=10;
var markerContent = document.createElement("div"); // 点标记中的图标
var markerImg = document.createElement("img");
markerImg.className = "markerlnglat";
markerImg.src = "http://webapi.amap.com/theme/v1.3/markers/n/mark_r.png";
markerContent.appendChild(markerImg); // 点标记中的文本
var markerSpan = document.createElement("span");
markerSpan.className = 'marker';
markerSpan.innerHTML = "Hi，我换新装备啦！";
markerContent.appendChild(markerSpan); marker.setContent(markerContent); //更新点标记内容
marker.setPosition([v1,v2]); //更新点标记位置
} </script>
</body>
</html> </script>
</body>
</html> _END;
?>
涉及setInterval传参的问题。
发现用addMarker(jdata.data[i].gpsx,jdata.data[i].gpsy);时程序可正常运行，但是将该函数 放到setInterval中后却出现了问题，可通过闭包解决。
获取json数据后在 地图上打点，根据 json不断移动点的位置的更多相关文章
- jquery用ajax方式从后台获取json数据后如何将内容填充到下拉列表
对于问题从后台获取json数据,将内容填充到下拉列表,代码非常简单,具体过程请看下面代码. 需求:url:链接 par:ID sel:下拉列表选择器 function BuildS ...
- Ajax前台返回JSON数据后再Controller中直接转换成类型使用，后台接收json转成实体的方法
之前写过一篇记录文章,写的是将一个比较复杂的数据结构在前台组合起来后传递到后台. 当时并不太了解@RequestBody,也并没有使用js提供的JSON.stringify()方法 所有都是自己写的, ...
- Ajax（form表单文件上传、请求头之contentType、Ajax传递json数据、Ajax文件上传）
form表单文件上传 上菜 file_put.html <form action="" method="post" enctype="multi ...
- Python爬取房产数据，在地图上展现！
小伙伴,我又来了,这次我们写的是用python爬虫爬取乌鲁木齐的房产数据并展示在地图上,地图工具我用的是 BDP个人版-免费在线数据分析软件,数据可视化软件 ,这个可以导入csv或者excel数据. ...
- jquery ajax获取后台数据后无法输出
今天做ajax获取数据,再浏览器的debugger窗口也看到了数据 ajax代码 $('#userSearch').click(function(){ $.get("loadAllUsers ...
- 通过ajax获得json数据后格式的转换
在有些情况下获取到的json数据可能是string类型的,需要把其格式化为json对象才方便解析. a)原生js通过ajax获取到的json 此时返回的数据默认是string型的,所以需要用eval( ...
- bootstrap通过ajax请求JSON数据后填充到模态框
1. JSP页面中准备模态框 <!-- 详细信息模态框(Modal) --> <div> <div class="modal fade" id=& ...
- ajax 发送json数据时为什么需要设置contentType: "application/json”
1. ajax发送json数据时设置contentType: "application/json”和不设置时到底有什么区别? contentType: "application/j ...
- ajax发送json数据时为什么需要设置contentType: "application/json”
1. ajax发送json数据时设置contentType: "application/json”和不设置时到底有什么区别?contentType: "application/js ...
随机推荐
- Android recovery UI实现分析
Android recovery模式为何物? 关于这个问题, baidu上已经有无数的答案.不理解的朋友先补习一下. 从纯技术角度来讲, recovery和android本质上是两个独立的rootfs ...
- Qt Installer Framework的学习（三）
Qt Installer Framework的学习(三) Qt Installer Framework的样例中.通常是这种:config目录一般放了一个config.xml文件,包括的是安装配置xml ...
- Debian以下的ntp服务(ntpdate)的安装
/********************************************************************* * Author : Samson * Date ...
- C#创建PDF文档
说明:本实例用到了第三方组件ICSharpCode.SharpZipLib.dll.itextsharp.dll,该组件可到网上下载. 代码: using System; using System.C ...
- QT-自定义信号和槽
前言:信号和槽是一种松耦合机制,或者说是一种分布式机制,信号广播出去,槽会自定义订阅接收. 一.新建工程 二.新建部件 拖入button按钮.修改内容为“发送自定义信号” 三.自定义发送信号 3.1 ...
- [实例]ROS使用OpenCV读取图像并发布图像消息在rviz中显示
思路: (1)使用opencv读取本地图像 (2)调用cv_bridge::CvImage().toImageMsg()将本地图像发送给rviz显示 一.使用opencv读取本地图像并发布图像消息 ( ...
- 转：如何在Ubuntu 14.04中安装最新版Eclipse
想必很多开发人员都知道,Ubuntu 软件源中提供的并不是最新版本的 Eclipse,本教程就教大家如何在 Ubuntu 14.04 中快速安装 Eclipse 官方发布的最新版本. 到目前为止,Ec ...
- Combox程序中自定义数据源
有combox控件,命名为cbxPutStatus,在程序中为其手工定义数据源,并绑定 private void POrderSplitFrm_Load(object sender, EventArg ...
- [ OS ][ Linux ] [ SA ] root 帳號名稱修改
1. 背景: 由於 Linux 中預設最高權限的使用者一律為 root, 存在安全性的疑慮. 所以比較安全的作法要將 root 帳號改名為其他名稱,讓要入侵的人需要同時破解出帳號和密碼才可以進入主機, ...
- CommandType.Text
CommandType.Text代表执行的是SQL语句CommandType.StoreProcedure代表执行的是存储过程CommandType代表要执行的类型 //返回DataTable的SQL ...