|
<html xmlns="http://www./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>
|
