<!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
posted on 2013-04-22 16:38 Ark_Zhang 阅读(879) 评论(0) 编辑收藏举报
刷新页面返回顶部
导航
