google地图画线，图标跑马灯等

来源：互联网发布：python的enumerate 编辑：程序博客网时间：2024/04/29 16:38

<html xmlns="http://www.w3.org/1999/xhtml" >
<head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
    <title>地图</title>
<script type="text/javascript" src="http://ditu.google.cn/maps/api/js?sensor=true&language=zh"></script>
    <script type="text/javascript">
     var map,timer;
  var marker ; //轨迹回放图标
  var flightPath ;// 轨迹回放路径
  var markerArr = [] ;//图标展示数组
  var image = 'comment.png'; //轨迹回放图标
  var nameOverlayArr = []; //自定义提示层信息数组
        NameOverlay.prototype = new google.maps.OverlayView();
  // NameOverlay定义
  function NameOverlay(point, name, map) {
            // 初始化参数：坐标、文字、地图
   this.point_ = point;
   this.name_ = name;
   this.map_ = map;


   // 到onAdd时才需要创建div
   this.div_ = null;

   // 加入map
   this.setMap(map);
   }

        NameOverlay.prototype.onAdd = function() {

   // 创建一个div，其中包含了当前文字
   var div = document.createElement('DIV');
   div.style.borderStyle = "none";
   div.style.borderWidth = "0px";
   div.style.position = "absolute";
   //div.style.background = "red";

   var span = document.createElement("span");
   span.style.color = "red";
   span.style.fontSize = "10pt";

   var text = document.createTextNode(this.name_);
   span.appendChild(text);
   div.appendChild(span);

   // Set the overlay's div_ property to this DIV
   this.div_ = div;

   // We add an overlay to a map via one of the map's panes.
   // We'll add this overlay to the overlayImage pane.
   var panes = this.getPanes();
   panes.overlayImage.appendChild(div);
  }

  NameOverlay.prototype.draw = function() {

   // 利用projection获得当前视图的坐标
   var overlayProjection = this.getProjection();

   var center = overlayProjection.fromLatLngToDivPixel(this.point_);

   // 为简单，长宽是固定的，实际应该根据文字改变
   var div = this.div_;
   div.style.left = center.x + 'px';
   div.style.top = center.y + 'px';
   div.style.width = '100px';
   div.style.height = '20px';
  }

  NameOverlay.prototype.onRemove = function() {
   this.div_.parentNode.removeChild(this.div_);
   this.div_ = null;
  }

  function initialize() {
   var mapCenter = new google.maps.LatLng(22.541984, 114.04023400000005);
   var mapOptions = {
    zoom: 14,
    center: mapCenter,
    mapTypeId: google.maps.MapTypeId.ROADMAP,

   disableDoubleClickZoom:true//鼠标双击放大事件禁用
   }
   map = new google.maps.Map(document.getElementById("map"), mapOptions);
   //var str = "深圳国际公寓, 114.0402,22.54;深航大厦, 114.047,22.538;";
   //RealTimeInfo(str);

   //var str2 = "114.041,22.5402;114.0495,22.5401;";
      //TrackPlayback(str2,2000);
  }

  function test1(){
   var str = "深圳国际公寓, 114.0402,22.54;深航大厦, 114.047,22.538;";
   RealTimeInfo(str);
  }

  function test2(){
   var str2 = "114.041,22.5402;114.0495,22.5401;";
      TrackPlayback(str2,2000);
  }

  /**实时视频
   * 参数（"name1,x,y;name2,x,y;"）
   * name:设备名称，x:经度，y:纬度
   */
  function RealTimeInfo(coordinate)
  {
   clearLastMapInfo();
      var coordinate = coordinate+'';
   if(coordinate!=''){
       coordinate = coordinate.substring(0,coordinate.length-1);
    var devArr = coordinate.split(";");
    var len = devArr.length;
    for(var i=0;i<len;i++){
     var dev = devArr[i].split(',');
     var markerLatLng = new google.maps.LatLng(dev[2], dev[1]);
     var marker2 =
     new google.maps.Marker({
      position: markerLatLng,
      map: map,
      title:dev[0]
     });
     markerArr.push(marker2);
     var overlayObj = new NameOverlay(markerLatLng, dev[0], map);
     nameOverlayArr.push(overlayObj);
    }
   }
  }

  /**
   * 轨迹回放
   * 参数coordinate（"x,y;x,y;"）,time(毫秒数)
   * x:经度，y:纬度
   */
   function TrackPlayback(coordinate,time){
       clearLastMapInfo();
    var coordinate = coordinate+'';
    if(coordinate!=''){
    coordinate = coordinate.substring(0,coordinate.length-1);
    var devArr = coordinate.split(";");
    var ipCoordinates = new Array();
    var ipArr = [];
    var len = devArr.length;
    for(var i=0;i<len;i++){
     var dev = devArr[i].split(',');
     ipCoordinates[i] = new google.maps.LatLng(dev[1], dev[0]);
     ipArr[i] = dev[1]+","+dev[0];
    }
    flightPath = new google.maps.Polyline({
     path: ipCoordinates,
     strokeColor: "#FF0000",
     strokeOpacity: 1.0,
     strokeWeight: 2
    });
    flightPath.setMap(map);

    var init = 0;
    timer = window.setInterval(function() {
     if (init<len) {
      var subIp = ipArr[init].split(',');
      if(marker!=null){
       marker.setMap(null);
      }
      marker = new google.maps.Marker({
       position: new google.maps.LatLng(subIp[0], subIp[1]),
       //icon: image,
       map: map
      });
      init ++ ;
     } else {
      window.clearInterval(timer);
     }
    }, time);
    }

   }

   /**
    * 清除图标
    */
   function clearOverlays() {
   if (markerArr) {
     for (i in markerArr) {
    markerArr[i].setMap(null);
     }
   }
   markerArr.length = 0;
    }

    /**
     * 清除自定义提示层信息
     */
     function clearTipInfo(){
    if (nameOverlayArr) {
      for (i in nameOverlayArr) {
     nameOverlayArr[i].onRemove();
      }
    }
    nameOverlayArr.length = 0;
     }

   /**
    * 清除上次地图信息
    */
   function clearLastMapInfo(){
   clearOverlays();
   if(marker!=null){
    marker.setMap(null); //清除轨迹回放图标
   }
   if(flightPath!=null){
    flightPath.setMap(null); //清除轨迹回放路径
   }
   clearTipInfo();
   }

</script>
</head>
<body onload="initialize();" style="margin:0;background:#e3e9f7; background-attachment:fixed;">
<div id="map" style="width:100%; height:90%;"></div>
<input type="button" value="图标展示" onclick="test1();"/>
<input type="button" value="轨迹回放" onclick="test2();"/>
</body>
</html>