谷歌中国地图的应用 - 以汶川地震序列为图，动态显示汶川地震4级以上地震的发生过程

greedwind · 发表于 2008-5-22 20:32:46

关键字：谷歌地图, 地图编程, 汶川, 地震, 地震序列, 谷歌地图源代码

效果图：http://greedwind.googlepages.com/eqmove.html
引用博客：http://hi.baidu.com/greedwind/bl ... 7ab990d1435897.html

以下是源代码：

[html]


<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xmlns:v="urn:schemas-microsoft-com:vml">

<head>
<link rel="stylesheet" type="text/css" href="include.css" />
<meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
<meta name="author" content="Greedwind" />
<meta name="URL" content="http://greedwind.googlepages.com" />

<title>汶川大地震序列图（里氏4级以上）</title>

<style type="text/css">

v\:* { behavior:url(#default#VML); }

body { font-family: Verdana, Sans-serif; }

h3 { margin-left: 8px; }

#map { height: 600px;
width: 900px;
border: 1px solid gray;
margin-top: 8px;
margin-left: 8px;
overflow: hidden;
}
.button { display: block;
width: 100px;
border: 1px Solid #565;
background-color:#F5F5F5;
margin: 10px;
padding: 3px;
text-decoration: none;
text-align:center;
font-size:smaller;
}
.button:hover {
background-color: white;
}

#descr { position:absolute;
top:45px;
left: 920px;
width: 250px;
}

.infowindow { font-size: smaller;
text-align: left;
}

</style>

<script src="http://maps.google.com/maps?file=api&v=2.x&key=ABQIAAAA6TUjyzzyVq0Cxgw005lNrxTH5iUKMmFAVtPZLF93JwitZixppRQsjgNdFI-OMG3c8yfCy03Len9Jwg"  type="text/javascript">
</script>

</head>

<SCRIPT type=text/javascript>
//<![CDATA[

// Global variables
var data = [
{ name: "(01)  四川汶川震级: 8.0 深度：19公里", date: "2008-05-12 14:28:01", lat:"30.986", lng:"103.364" },
{ name: "(02)  震级: 6.0  深度：10公里", date: "2008-05-12 14:43:14", lat:"31.23", lng:"103.77" },
{ name: "(03)  震级: 5.7  深度：10公里", date: "2008-05-12 14:54:18", lat:"31.16", lng:"103.83" },
{ name: "(04)  震级: 5.2  深度：10公里", date: "2008-05-12 15:01:35", lat:"31.71", lng:"104.20" },
{ name: "(05)  震级: 4.9  深度：10公里", date: "2008-05-12 15:22:27", lat:"32.15", lng:"105.40" },
{ name: "(06)  震级: 4.7  深度：10公里", date: "2008-05-12 15:31:07", lat:"30.99", lng:"103.69" },
{ name: "(07)  震级: 5.4  深度：10公里", date: "2008-05-12 15:34:43", lat:"31.30", lng:"103.68" },
{ name: "(08)  震级: 4.6  深度：10公里", date: "2008-05-12 16:03:00", lat:"31.83", lng:"104.37" },
{ name: "(09)  震级: 5.2  深度：10公里", date: "2008-05-12 16:10:59", lat:"31.23", lng:"103.55" },
{ name: "(10)  震级: 5.2  深度：10公里", date: "2008-05-12 16:21:40", lat:"31.54", lng:"104.08" },
{ name: "(11)  震级: 4.9  深度：10公里", date: "2008-05-12 16:26:12", lat:"31.39", lng:"103.96" },
{ name: "(12)  震级: 5.0  深度：10公里", date: "2008-05-12 16:47:25", lat:"32.22", lng:"105.03" },
{ name: "(13)  震级: 5.1  深度：10公里", date: "2008-05-12 17:07:00", lat:"31.23", lng:"103.70" },
{ name: "(14)  震级: 4.9  深度：10公里", date: "2008-05-12 17:23:34", lat:"32.14", lng:"104.89" },
{ name: "(15)  震级: 5.5  深度：10公里", date: "2008-05-12 17:42:24", lat:"31.53", lng:"104.11" },
{ name: "(16)  震级: 5.1  深度：10公里", date: "2008-05-12 18:23:40", lat:"30.97", lng:"103.37" },
{ name: "(17)  震级: 5.8  深度：10公里", date: "2008-05-12 19:11:02", lat:"31.20", lng:"103.61" },
{ name: "(18)  震级: 4.9  深度：10公里", date: "2008-05-12 18:15:41", lat:"31.90", lng:"104.62" },
{ name: "(19)  震级: 4.8  深度：10公里", date: "2008-05-12 21:40:54", lat:"31.04", lng:"103.52" },
{ name: "(20)  震级: 5.1  深度：14公里", date: "2008-05-12 20:15:26", lat:"32.14", lng:"104.61" },
{ name: "(21)  震级: 5.1  深度：10公里", date: "2008-05-12 20:46:07", lat:"32.73", lng:"105.61" },
{ name: "(22)  震级: 5.1  深度：18.3公里", date: "2008-05-12 23:05:31", lat:"31.26", lng:"103.70" },
{ name: "(23)  震级: 5.1  深度：10公里", date: "2008-05-12 23:28:53", lat:"31.05", lng:"103.50" },
{ name: "(24)  震级: 4.9  深度：10公里", date: "2008-05-13 01:03:10", lat:"31.13", lng:"103.59" },
{ name: "(25)  震级: 4.8  深度：10公里", date: "2008-05-13 01:52:23", lat:"31.89", lng:"104.44" },
{ name: "(26)  震级: 5.1  深度：10公里", date: "2008-05-13 01:54:32", lat:"31.25", lng:"103.49" },
{ name: "(27)  震级: 4.4  深度：10公里", date: "2008-05-13 02:55:21", lat:"32.22", lng:"104.85" },
{ name: "(28)  震级: 5.6  深度：10公里", date: "2008-05-13 04:08:48", lat:"31.42", lng:"103.90" },
{ name: "(29)  震级: 5.3  深度：10公里", date: "2008-05-13 04:45:31", lat:"31.76", lng:"104.42" },
{ name: "(30)  震级: 4.8  深度：10公里", date: "2008-05-13 04:51:26", lat:"32.31", lng:"104.95" },
{ name: "(31)  震级: 4.6  深度：10公里", date: "2008-05-13 05:08:15", lat:"31.53", lng:"103.44" },
{ name: "(32)  震级: 5.3  深度：10公里", date: "2008-05-13 07:46:18", lat:"31.29", lng:"103.54" },
{ name: "(33)  震级: 5.2  深度：10公里", date: "2008-05-13 07:54:46", lat:"31.31", lng:"103.54" },
{ name: "(34)  震级: 4.4  深度：10公里", date: "2008-05-13 13:25:47", lat:"32.600", lng:"105.221" },
{ name: "(35)  震级: 4.6  深度：10公里", date: "2008-05-13 13:36:29", lat:"32.606", lng:"105.487" },
{ name: "(36)  震级: 4.5  深度：10公里", date: "2008-05-13 14:38:18", lat:"31.321", lng:"103.778" },
{ name: "(37)  震级: 5.8  深度：9公里", date: "2008-05-13 15:07:08", lat:"30.889", lng:"103.165" },
{ name: "(38)  震级: 5.0  深度：10公里", date: "2008-05-13 15:19:16", lat:"32.438", lng:"105.326" },
{ name: "(39)  震级: 5.0  深度：10公里", date: "2008-05-13 15:53:02", lat:"32.281", lng:"105.054" },
{ name: "(40)  震级: 4.2  深度：10公里", date: "2008-05-13 16:11:02", lat:"32.586", lng:"105.172" },
{ name: "(41)  震级: 4.9  深度：10公里", date: "2008-05-13 16:20:51", lat:"31.396", lng:"103.987" },
{ name: "(42)  震级: 4.9  深度：10.0公里", date: "2008-5-13 18:16", lat:"31.744", lng:"104.438" },
{ name: "(43)  震级: 5.0  深度：10.0公里", date: "2008-5-13 20:51", lat:"32.213", lng:"105.305" },
{ name: "(44)  震级: 4.8  深度：10.0公里", date: "2008-5-13 21:31", lat:"32.329", lng:"105.166" },
{ name: "(45)  震级: 4.8  深度：10.0公里", date: "2008-5-14 0:23", lat:"31.745", lng:"104.421" },
{ name: "(46)  震级: 4.8  深度：10.0公里", date: "2008-5-14 3:51", lat:"30.987", lng:"103.415" },
{ name: "(47)  震级: 4.5  深度：10.0公里", date: "2008-5-14 6:03", lat:"31.31", lng:"103.853" },
{ name: "(48)  震级: 4.6  深度：10.0公里", date: "2008-5-14 9:56", lat:"31.641", lng:"104.064" },
{ name: "(49)  震级: 5.5  深度：10.0公里", date: "2008-5-14 10:54", lat:"31.328", lng:"103.504" },
{ name: "(50)  震级: 5.1  深度：10.0公里", date: "2008-5-14 13:54", lat:"32.111", lng:"104.001" },
{ name: "(51)  震级: 5.2  深度：10.0公里", date: "2008-5-14 17:26", lat:"31.371", lng:"104.036" },
{ name: "(52)  震级: 4.9  深度：10.0公里", date: "2008-5-14 18:00", lat:"32.438", lng:"105.126" },
{ name: "(53)  震级: 4.6  深度：10.0公里", date: "2008-5-14 18:44", lat:"32.097", lng:"104.952" },
{ name: "(54)  震级: 4.4  深度：10.0公里", date: "2008-5-14 20:27", lat:"31.765", lng:"104.161" },
{ name: "(55)  震级: 4.2  深度：17.4公里", date: "2008-5-14 21:29", lat:"32.326", lng:"105.179" },
{ name: "(56)  震级: 4.5  深度：10.0公里", date: "2008-5-15 1:17", lat:"31.471", lng:"103.962" },
{ name: "(57)  震级: 4.8  深度：10.0公里", date: "2008-5-15 1:33", lat:"31.268", lng:"103.702" },
{ name: "(58)  震级: 5.1  深度：10.0公里", date: "2008-5-15 5:01", lat:"31.642", lng:"104.192" },
{ name: "(59)  震级: 4.8  深度：10.0公里", date: "2008-5-15 6:10", lat:"31.281", lng:"103.716" },
{ name: "(60)  震级: 4.3  深度：10.0公里", date: "2008-5-15 8:09", lat:"31.873", lng:"104.5" },
{ name: "(61)  震级: 4.9  深度：10.0公里", date: "2008-5-15 13:27", lat:"31.986", lng:"104.44" },
{ name: "(62)  震级: 4.3  深度：10.0公里", date: "2008-5-16 2:05", lat:"31.938", lng:"104.325" },
{ name: "(63)  震级: 4.9  深度：10.0公里", date: "2008-5-16 5:55", lat:"32.321", lng:"104.748" },
{ name: "(64)  震级: 4.9  深度：10.0公里", date: "2008-5-16 6:10", lat:"31.328", lng:"104.033" },
{ name: "(65)  震级: 5.1  深度：10.0公里", date: "2008-5-16 11:34", lat:"31.393", lng:"104.048" },
{ name: "(66)  震级: 5.6  深度：3.0 公里", date: "2008-5-16 13:25", lat:"31.356", lng:"103.374" },
{ name: "(67)  震级: 4.5  深度：10.0公里", date: "2008-5-16 14:34", lat:"32.476", lng:"105.245" },
{ name: "(68)  震级: 4.9  深度：10.0公里", date: "2008-5-17 0:14", lat:"31.131", lng:"103.614" },
{ name: "(69)  震级: 5.0  深度：10.0公里", date: "2008-5-17 4:16", lat:"31.265", lng:"103.709" },
{ name: "(70)  震级: 4.7  深度：10.0公里", date: "2008-5-17 6:33", lat:"32.285", lng:"105.195" },
{ name: "(71)  震级: 4.8  深度：10.0公里", date: "2008-5-17 21:32", lat:"31.925", lng:"104.597" },
{ name: "(72)  震级: 5.7  深度：10.0公里", date: "2008-5-18 1:08", lat:"32.209", lng:"104.975" },
{ name: "(73)  震级: 4.4  深度：10.0公里", date: "2008-5-18 8:45", lat:"31.827", lng:"104.01" },
{ name: "(74)  震级: 4.5  深度：10.0公里", date: "2008-5-18 17:25", lat:"31.365", lng:"103.687" },
{ name: "(75)  震级: 4.5  深度：10.0公里", date: "2008-5-18 20:37", lat:"31.211", lng:"103.152" },
{ name: "(76)  震级: 4.9  深度：10.0公里", date: "2008-5-19 12:08", lat:"32.583", lng:"105.078" },
{ name: "(77)  震级: 5.1  深度：10.0公里", date: "2008-5-19 14:06", lat:"32.434", lng:"105.343" },
{ name: "(78)  震级: 5.2  深度：10.0公里", date: "2008-5-20 1:52", lat:"32.233", lng:"105.035" },
{ name: "(79)  震级: 4.5  深度：10.0公里", date: "2008-5-20 8:57", lat:"31.631", lng:"104.145" },
{ name: "(80)  震级: 4.6  深度：39.9公里", date: "2008-5-21 21:59", lat:"31.445", lng:"103.921" },
{ name: "(81)  震级: 4.3  深度：23.9公里", date: "2008-5-21 23:30 ", lat:"32.292", lng:"104.930" }

];

var map, route;
var points = [];
var gmarkers = [];
var count =0;
var stopClick = false;


function addIcon(icon) { // Add icon attributes

icon.shadow = "http://www.google.com/mapfiles/shadow50.png";
icon.iconSize = new GSize(32, 32);
icon.shadowSize = new GSize(37, 34);
icon.iconAnchor = new GPoint(15, 34);
icon.infoWindowAnchor = new GPoint(19, 2);
icon.infoShadowAnchor = new GPoint(18, 25);
}


function addClickevent(marker) { // Add a click listener to the markers

GEvent.addListener(marker, "click", function() {
  marker.openInfoWindowHtml(marker.content);
});
return marker;
}

function load_map()
{

  //shanghai
  var xOffset= -0.001889737;
  var yOffset= 0.004844069;

  //var map = null;

  if(GBrowserIsCompatible()) {

var Cditu = new GCopyright(1,
               new GLatLngBounds(
                           new GLatLng(-90,-180),
                           new GLatLng(90,180) ),
               0,
               "Mapabc.com");

var copyright = new GCopyrightCollection("");

copyright.addCopyright(Cditu);
var dituTileLayer = new GTileLayer(copyright, 1, 17);

dituTileLayer.getTileUrl = function(tile, zoomlevel,x) {
      var url = G_NORMAL_MAP.getTileLayers()[0].getTileUrl(tile,zoomlevel,x);
      var bits = url.split("&");
      bits[1] = "http://servicetile.mapabc.com/googlechina/maptile?" + bits[1];
      /**bits[1] = "http://mapgoogle.mapabc.com/googlechina/maptile?" + bits[1];**/
      bits.shift();
      url = bits.join("&");
      return url;
};

function dituProjection(xOffset,yOffset){
      this.xOffset = xOffset;
      this.yOffset = yOffset;
}

dituProjection.prototype = new GProjection();

dituProjection.prototype.fromLatLngToPixel = function(latlng,  zoom){
      return (G_NORMAL_MAP.getProjection()).fromLatLngToPixel(new GLatLng(latlng.lat()+this.xOffset,latlng.lng()+this.yOffset),zoom);
};

dituProjection.prototype.fromPixelToLatLng = function(pixel,zoom,unbounded)
{
      var latlng = (G_NORMAL_MAP.getProjection()).fromPixelToLatLng(pixel,zoom,unbounded);
      return new GLatLng(latlng.lat()-this.xOffset,latlng.lng()-this.yOffset);
}

dituProjection.prototype.tileCheckRange = function(tile, zoom, tilesize)
{
      return (G_NORMAL_MAP.getProjection()).tileCheckRange(tile,zoom,tilesize);
}
dituProjection.prototype.getWrapWidth = function(zoom)
{
      return (G_NORMAL_MAP.getProjection()).getWrapWidth(zoom);
}

var ditu = new GMapType([dituTileLayer],
            new dituProjection(xOffset,yOffset),
            "Ditu",
            { shortName: "ditu", alt: "layer from ditu.google.com" }
            );

map = new GMap2(document.getElementById('map'),{mapTypes:[ditu,/*G_NORMAL_MAP,*/G_SATELLITE_MAP]});
  map.addControl(new GSmallMapControl());
/**map.addControl(new GMapTypeControl());**/
map.addControl(new GOverviewMapControl());
map.addControl(new GScaleControl());

//map.enableDoubleClickZoom();
/**map.enableScrollWheelZoom();**/

map.setCenter(new GLatLng(31.642, 104.192), 12);

ditu.getName = function(){ return '中国地图';};
ditu._getName = function(){ return 'ditu';};
/*
G_NORMAL_MAP.getName = function(){ return '世界地图';};
G_NORMAL_MAP._getName = function(){ return 'Map';};
*/
G_SATELLITE_MAP.getName = function(){ return '卫星图';};
G_SATELLITE_MAP._getName = function(){ return 'Satellite';};

/** the map type **/
var _mt = ditu;

map.setMapType(_mt);

map.addControl(new GMapTypeControl());
/*
var point = new GLatLng(31.231628368031693, 121.47645235061645);

var marker = new GMarker(point);
GEvent.addListener(marker,"click",function(){marker.openInfoWindowHtml('Text Info Here!');});

map.addOverlay(marker);
*/

  // Light blue marker icons
  var icon = new GIcon();
  icon.image = "http://www.google.com/intl/en_de/mapfiles/ms/icons/ltblue-dot.png";
  addIcon(icon);

  for(var i = 0; i < data.length; i++) {
points = new GLatLng(parseFloat(data.lat), parseFloat(data.lng));
gmarkers = new GMarker(points, icon);

// Store data attributes as property of gmarkers
var html ="<div class='infowindow'>" +
"<strong>"+ data.name + "<\/strong><p>" +
data.date + "  "+ data.lat +"N  "+data.lng+"E<\/p><\/div>";
//data.date + "<\/p><\/div>";
gmarkers.content = html;
addClickevent(gmarkers);
map.addOverlay(gmarkers);

//anim();
  }
  // Draw polylines between marker points
  var poly= new GPolyline(points, "#FF0000", 3, .5);
  map.addOverlay(poly);

  // Open infowindow of first marker
  gmarkers[0].openInfoWindowHtml( gmarkers[0].content);

route =setTimeout("anim()", 3600);
}

}

function haltAnim() {

if(route) {
  clearTimeout(route);
  stopClick = true;
}
}


function carryOn() {

if(stopClick == true) anim();
stopClick = false;
}


function anim() {

count++;
if(count < points.length) {
  map.panTo(points[count]);
  gmarkers[count].openInfoWindowHtml( gmarkers[count].content);
  var delay = 2000;
  if((count+1) != points.length)
var dist = points[count].distanceFrom(points[count+1]);

  // Adjust delay
  if( dist < 10000 ) {
delay = 2000;
  }
  if( dist > 80000 ) {
delay = 2200;
  }
  route = setTimeout("anim()", delay);
}
  else {
  clearTimeout(route);
  count = 0;
  route = null;
}
}


function playAgain() {

GUnload();
if(route) clearTimeout(route);
stopClick = false;
count = 0;
buildMap();
}

//]]>
</SCRIPT>
<body onload="load_map()" onunload="GUnload()">

<h3>汶川大地震序列图（里氏4级以上） - By Greedwind</h3>

<div id="map"> </div>

<div id="descr">
<a href="#" class="button" onclick="haltAnim();return false;">停止</a>
<a href="#" class="button" onclick="carryOn();return false;">继续</a>
<a href="#" class="button" onclick="playAgain();return false;">重看</a>
<p class="include" style="margin-top:15px;margin-right:30px"><a href="http://hi.baidu.com/greedwind/blog">Greedwind的百度博客</a></p>
<p class="include" style="margin-top:15px;margin-right:30px"><a href="http://album.886.cn/886pplshow.swf?id=HQQ1Ax06CwA2FCkEHToLSB06AAkdBCVJHQQtBR4EKUkeKjVGHToPBQ">【不抛弃，不放弃，也不会忘记】第一部 - 美丽河山</a></p>
<p class="include" style="margin-top:15px;margin-right:30px"><a href="http://album.886.cn/886pplshow.swf?id=HQQ1Ah06PUg2FCkEHToLSB06AAkdBCVJHQQpAx0qDwIdFD1IHioLSA">【不抛弃，不放弃，也不会忘记】第二部 - 众志成城</a></p>
</div>

</BODY></HTML>

[/html]

马甲君 · 发表于 2008-5-22 20:46:37

发卡

黑暗灵蛇 · 发表于 2008-5-22 20:48:19

好长……光长度我就可以去问百度了……

thody · 发表于 2008-5-22 21:28:53

还以为素earth原代码。那就nb了。

Gallium · 发表于 2008-5-22 21:44:19

技能区的四大长老也不见上线……难不成？

=。=||是看这帖子晕倒了？

greedwind · 发表于 2008-5-23 00:53:32

引用第3楼thody于2008-05-22 21:28发表的 :
还以为素earth原代码。那就nb了。

呵呵，如果这个也弄，也是可以的。但我只是随便做的。

		自动登录	找回密码
密码			点一下