获取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 ...
随机推荐
- R语言基础-数组和列表
数组(array) 一维数据是向量,二维数据是矩阵,数组是向量和矩阵的直接推广,是由三维或三维以上的数据构成的. 数组函数是array(),语法是:array(dadta, dim),当中data必须 ...
- 2015.04.16,外语,读书笔记-《Word Power Made Easy》 11 “如何辱骂敌人” SESSION 28
TEASER PREVIEW (Teaser 片头,预告片,玩笑 Teaser trailer:预告片) 如何称呼这些人: 完全盲目的服从(obedience [әu'bi:diәns] n. 服从, ...
- 客户端通过wcf来启动或者停止服务器上的windows service
1.设置服务器上的windows service的security,下面的命令只能用cmd.exe来运行(以管理员模式) sc sdset "LISA_43_Dev_Batch" ...
- oracle性能检测sql语句
1. 监控事例的等待 select event,sum(decode(wait_Time,0,0,1)) "Prev",sum(decode(wait_Time,0,1,0)) & ...
- wamp openssl
在这一章节里, 我记录了一下如何在 wamp 环境下配置 ssl 前提条件 在设置 Apache + SSL 之前, 需要确认 Apache 已经安装并可以正常工作. 并且 ssl 需要的文件在如下的 ...
- QT-helloworld-QtCreater编写
前言:纯代码编写helloworld,解析代码含义. 一.新建空项目 新建->其他项目->Empty qmake Project 二.修改.pro文件 打开helloworld.pro文件 ...
- WPF动态控件生成查找不到问题
2012 08 10 遇到此类问题,已经找到解决方案 记录以备后用 动态往界面添加控件 在页面未显示的情况时,虽然对控件增加了id name等属性但是使用 TextBox txtOtherNati ...
- iframe刷新以及自适应高度
A页面中的iframe链接到B页面在B页面调用这个可以刷新父页面的iframe self.location.reload(); <iframe src="admin-list.htm ...
- java 遍历list 模糊查询用
java 遍历list 模糊查询用 /** * 筛选list * @param list 要筛选的list * @param key 筛选的key * @param <T> * @retu ...
- webpack 参数1、context: path.resolve 2、path.join('', '..', 'aa') 3、 path.posix.join('static','/aa')
1.context: path.resolve 项目入口路径 2. 3.