標籤：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
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
