google地图marker添加div提示信息

来源：互联网发布：index.php 编辑：程序博客网时间：2024/05/01 20:53

<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;

        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");
   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(39.917, 116.397);
   var mapOptions = {
    zoom: 14,
    center: mapCenter,
    mapTypeId: google.maps.MapTypeId.ROADMAP
   }
   map = new google.maps.Map(document.getElementById("map"), mapOptions);
   var str = "北海,39.927, 116.397;北师大,39.938, 116.387";
   RealTimeInfo(str);
  }

  /**实时视频
   * 参数（"name1,x,y;name2,x,y"）
   * name:设备名称，x:纬度，y:经度
   */
  function RealTimeInfo(coordinate)
  {
      var coordinate = coordinate+'';
   if(coordinate!=''){
    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[1], dev[2]);
     var marker2 =
     new google.maps.Marker({
      position: markerLatLng,
      map: map,
      title:dev[0]
     });
     new NameOverlay(markerLatLng, dev[0], map);
    }
   }
  }

</script>
</head>
<body onload="initialize();" style="margin:0;background:#e3e9f7; background-attachment:fixed;">
<div id="map" style="width:100%; height:100%;"></div>

</body>
</html>