<?PHPEcho<<<_end<!doctype html>Marker {Color:#ff6600;Padding4px 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= The key value you requested" ></script> <script Type= "Text/javascript" src= "Http://cache.amap.com/lbs/static/addToolbar.js" ></script>varMarker, map =NewAmap.map ("Container",{resizeenable:true,Center: [126.60580555556, 45.702363888889],Zoom: 13 }); varGetjson =function(URL) {return NewPromise (function(Resolve,reject) { varXHR =NewXMLHttpRequest (); XHR. Open (' Get ', url,true); XHR. Responsetype = ' json '; XHR. onload =function() { varStatus = 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. '); }); //Instantiating point Markers functionAddmarker (v1,v2) {window. i+=10; Marker=NewAMap.Marker ({icon: "Http://webapi.amap.com/theme/v1.3/markers/n/mark_b.png",position: [V1,v2]}); Marker.setmap (map); }</script></body>_end;?>
Involves the issue of setinterval.
Found with Addmarker (Jdata.data[i].gpsx,jdata.data[i].gpsy), when the program is functioning normally, but after putting the function in SetInterval, there is a problem, which can be solved by closure.
Get the JSON data and point it on the map, moving points from JSON to position
Start building with 50+ products and up to 12 months usage for Elastic Compute Service
1 on 1 presale consultation
24/7 Technical Support 6 Free Tickets per Quarter Faster Response
Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.
A comprehensive suite of global cloud computing services to power your business
Payment Methods We Support
