<!DOCTYPE HTML><HTML><Head><Scripttype= "Text/javascript">functionkillerrors () {return true;} Window.onerror=killerrors;</Script> <Metaname= "Viewport"content= "initial-scale=1.0, User-scalable=no" /><styletype= "Text/css">HTML{Height:100%}Body{Height:100%;margin:0;padding:0}#map_canvas{Height:100%}. Labels{Color:Black;Background-color: White;font-family:"Lucida Grande", "Arial", Sans-serif;font-size:10px;Font-weight:Bold;text-align:Center;width:60px;Border:2px solid Black;White-space:nowrap; } </style><Scripttype= "Text/javascript"src= "Jquery-1.9.1.min.js"></Script><Scripttype= "Text/javascript"src= "Http://maps.googleapis.com/maps/api/js?sensor=true"></Script><Scripttype= "Text/javascript"src= "Markerwithlabel.js"></Script><Scripttype= "Text/javascript">varG_nwidth= 224;varG_nheight= -;varMap=undefined;varPoly=undefined;varCarmarker=undefined;varCarnummarker=undefined;varInfowindow=undefined;varcariconlist=undefined;jquery.support.cors= true; //Initialize map displayfunctionInitialize () {$.ajax ({type:"GET", Cache:false, URL:"Markerwithlabel.js", DataType:"text", Success:function(){ varmapoptions={Center:NewGoogle.maps.LatLng (22.514826, 113.917547), Zoom: the, Maptypecontrol:false, MapTypeId:google.maps.MapTypeId.ROADMAP}; Map= NewGoogle.maps.Map (document.getElementById ("Map_canvas"), mapoptions); Carmarker= NewGoogle.maps.Marker (); Carmarker.setmap (map); Cariconlist= NewArray ("North.png", "Northeast.png", "East.png", "Southeast.png", "South.png", "Southwest.png", "West.png", "Northwest.png"); //Placecar (' Yue B1234 ', 113.917547, 22.514826, 0);}, Error:function(r) {}}); }//Set Map Sizefunctionsetmapsize (width, height) {varnwidth=parseint (width); varnheight=parseint (height); G_nwidth=nwidth; G_nheight=nheight; if(nwidth<= 0 ||nheight<= 0) return ; document.getElementById ("Map_canvas"). Style.height=nheight; document.getElementById ("Map_canvas"). Style.width=nwidth;}//new TrackfunctionAddtrackline (point_list) {if(Map==undefined)return; varLat= []; varLong= []; varLatlong= []; varTemp=Point_list.split ("|"); varI= 0; for(; I<Temp.length;i++) {Lat.push (Temp[i].split (",")[0]); Long.push (Temp[i].split (",")[1]); Latlong.push (NewGoogle.maps.LatLng (parsefloat (Lat[i]), parsefloat (Long[i])); } Poly= NewGoogle.maps.Polyline ({path:latlong, Strokecolor:"#FF0000", strokeopacity:1.0, Strokeweight:5 }); Poly.setmap (map);}//Delete TrackfunctionCleartrackline () {if(Poly==undefined)return; Poly.setmap (NULL); if(Carmarker!=undefined) carmarker.setmap (NULL); if(Carnummarker!=undefined) carnummarker.setmap (NULL); }//Set the map center locationfunctionSetmapcenter (LNG, LAT) {if(Map==undefined)return; Map.panto (Newgoogle.maps.LatLng (parsefloat (LAT), parsefloat (LNG)));}//Mobile VehiclesfunctionPlacecar (id, longitude, latitude, direction) {if(Map==undefined)return; if(Carmarker!=undefined) carmarker.setmap (NULL); varCARLATLNG= NewGoogle.maps.LatLng (parsefloat (latitude), parsefloat (longitude)); Carmarker.setposition (CARLATLNG); varIconX= 0; varIcony= 0; varNDir=parseint (direction); varIconnum= 0; if(NDir>= 338 &&NDir<= A) {//NorthIconnum= 0; } Else if(NDir>= at &&NDir<= the) {//TohokuIconnum= 1; } Else if(NDir>= the &&NDir<= the) {//EastIconnum= 2; } Else if(NDir>= 113 &&NDir<= 157) {//South EastIconnum= 3; } Else if(NDir>= 158 &&NDir<= 202) {//SouthIconnum= 4; } Else if(NDir>= 203 &&NDir<= 247) {//SouthwestIconnum= 5; } Else if(NDir>= 248 &&NDir<= 292) {//WestIconnum= 6; } Else if(NDir>= 293 &&NDir<= 337) {//NorthwestIconnum= 7; } Else{iconnum= 0; } varImage= NewGoogle.maps.MarkerImage (Cariconlist[iconnum],NewGoogle.maps.Size ( the, the), NewGoogle.maps.Point (0, 0), NewGoogle.maps.Point ( -, -)); Carmarker.seticon (image); Carmarker.setmap (map); if(Carnummarker!=undefined) carnummarker.setmap (NULL); Carnummarker= NewMarkerwithlabel ({position:carlatlng, draggable:false, Map:map, Labelcontent:id, Labelanchor:NewGoogle.maps.Point ( the, the), Labelclass:"Labels", LabelStyle: {opacity:0.75}, icon:{}});}</Script></Script> </Head> <Bodyonload= "Initialize ()"> <!--Div id= "Map_canvas" style= "width:224px;; height:500px;" ></div - <DivID= "Map_canvas"style= "width:g_nwidth; height:g_nheight;"></Div> </Body></HTML>
Realize map vehicle track playback, vehicle ID display and other functions.
Google Map API V3 links
Https://developers.google.com/maps/documentation/javascript/reference?hl=zh-cn
Google Map API v2 link (deprecated)
Https://developers.google.com/maps/documentation/javascript/v2/reference
Google-maps-utility-library-v3 Tool Library
Http://code.google.com/p/google-maps-utility-library-v3/source/checkout
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
