标签:c style class blog code java
<!DOCTYPE html> <html> <head> <script type="text/javascript"> function killerrors() { return true; } window.onerror = killerrors; </script> <meta name="viewport" content="initial-scale=1.0, user-scalable=no" /> <style type="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> <script type="text/javascript" src="jquery-1.9.1.min.js"></script> <script type="text/javascript" src="http://maps.googleapis.com/maps/api/js?sensor=true"></script> <script type="text/javascript" src="markerwithlabel.js"></script> <script type="text/javascript"> var g_nWidth = 224; var g_nHeight = 500; var map = undefined; var poly = undefined; var carMarker = undefined; var carNumMarker = undefined; var infoWindow = undefined; var carIconList = undefined; jQuery.support.cors = true; //初始化地图显示 function initialize() { $.ajax({ type: "GET", cache: false, url: "markerwithlabel.js", dataType:"text", success: function(){ var mapOptions = { center: new google.maps.LatLng(22.514826, 113.917547), zoom: 15, mapTypeControl: false, mapTypeId: google.maps.MapTypeId.ROADMAP }; map = new google.maps.Map(document.getElementById("map_canvas"), mapOptions); carMarker = new google.maps.Marker(); carMarker.setMap(map); carIconList = new Array( "north.png", "northeast.png", "east.png", "southeast.png", "south.png", "southwest.png", "west.png", "northwest.png"); //placeCar(‘粤B1234‘, 113.917547, 22.514826, 0); }, error:function(r){} }); } //设置地图大小 function setMapSize(width, height) { var nWidth = parseInt(width); var nHeight = 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; } //新增轨迹 function addTrackLine(point_list) { if (map == undefined) return; var Lat = []; var Long = []; var LatLong = []; var temp = point_list.split("|"); var i = 0; for(;i < temp.length;i++) { Lat.push(temp[i].split(",")[0]); Long.push(temp[i].split(",")[1]); LatLong.push(new google.maps.LatLng(parseFloat(Lat[i]), parseFloat(Long[i]))); } poly = new google.maps.Polyline({ path: LatLong, strokeColor: "#FF0000", strokeOpacity: 1.0, strokeWeight: 5 }); poly.setMap(map); } //删除轨迹 function clearTrackLine() { if (poly == undefined) return; poly.setMap(null); if (carMarker != undefined) carMarker.setMap(null); if(carNumMarker != undefined) carNumMarker.setMap(null); } //设置地图中心位置 function setMapCenter(lng, lat) { if (map == undefined) return; map.panTo(new google.maps.LatLng(parseFloat(lat), parseFloat(lng))); } //移动车辆 function placeCar(id, longitude, latitude, direction) { if (map == undefined) return; if (carMarker != undefined) carMarker.setMap(null); var carLatLng = new google.maps.LatLng(parseFloat(latitude), parseFloat(longitude)); carMarker.setPosition(carLatLng); var iconX = 0; var iconY = 0; var nDir = parseInt(direction); var iconNum = 0; if (nDir >= 338 && nDir <= 22) {//北 iconNum = 0; } else if (nDir >= 23 && nDir <= 67) {//东北 iconNum = 1; } else if (nDir >= 68 && nDir <= 112) {//东 iconNum = 2; } else if (nDir >= 113 && nDir <= 157) {//东南 iconNum = 3; } else if (nDir >= 158 && nDir <= 202) {//南 iconNum = 4; } else if (nDir >= 203 && nDir <= 247) {//西南 iconNum = 5; } else if (nDir >= 248 && nDir <= 292) {//西 iconNum = 6; } else if (nDir >= 293 && nDir <= 337) {//西北 iconNum = 7; } else { iconNum = 0; } var image = new google.maps.MarkerImage(carIconList[iconNum], new google.maps.Size(34, 34), new google.maps.Point(0, 0), new google.maps.Point(17, 17)); carMarker.setIcon(image); carMarker.setMap(map); if(carNumMarker != undefined) carNumMarker.setMap(null); carNumMarker = new MarkerWithLabel({ position: carLatLng, draggable: false, map: map, labelContent: id, labelAnchor: new google.maps.Point(34, 34), labelClass: "labels", labelStyle: {opacity: 0.75}, icon:{} }); } </script> </script> </head> <body onload="initialize()"> <!--div id="map_canvas" style="width:224px;; height:500px;"></div--> <div id="map_canvas" style="width:g_nWidth; height:g_nHeight;"></div> </body> </html>
实现地图车辆轨迹回放、车辆ID显示等功能。
google map api v3链接
https://developers.google.com/maps/documentation/javascript/reference?hl=zh-cn
google map api v2链接(已弃用)
https://developers.google.com/maps/documentation/javascript/v2/reference
google-maps-utility-library-v3 工具库
http://code.google.com/p/google-maps-utility-library-v3/source/checkout
google map api v3,布布扣,bubuko.com
标签:c style class blog code java
原文地址:http://www.cnblogs.com/liteng_0436/p/3756270.html