google地图画线，图标跑马灯等
<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>