分享

Google Earth API开发者指南

 sanxuxbr 2010-11-09
第一个小程序——“Hello World”

  记得在学校上编程课时,无论是Basic还是C,课本第一个示 例都是“Hello World”。今天,我们开始学习Google Earth API,仍然以这个最 简单的小示例开始。下列JavaScript源代码教您如何创建一个包含Google Earth的网 页。

<html>
<head>
<title>Hello Google Earth!</title>
<!-- *** Replace the key below below with your own API key, available athttp://code.google.com/apis/maps/signup.html *** -- >
<script src="http://www.google.com/jsapikey=ABCDEF";></script >
<script>
google.load("earth", "1");

var ge = null;

function init() {
google.earth.createInstance("map3d", initCallback, failureCallback);
}

function initCallback(object) {
ge = object;
ge.getWindow().setVisibility(true);
}

function failureCallback(object) {
}

</script>
</head>
<body onload= init() ;

<div>
Hello, Earth!
</div>

<div id= map3d_container 
style= border: 1px solid silver; height: 600px; width: 800px; >
<div id= map3d  style= height: 100%; ></div>
</div>
</body>
</html>

  您可以直接把这段代码复制下来,把里面的“Key”换成您 自己申请的Key值(详见序)。如果您不方便申请Key,又想看看这段源代码的运行效 果,那么也没关系,您可以点击查看这个链接(http://www.google.com/earth/plugin/examples/helloearth/)——前提是您必须已安装了Google Earth插件。

  上面这段代码中,您需要注意四个方面(上述代码中已用绿 色粗体字显示):
  Google Earth API脚本语句必须包含script标签,即“<script>”。 
  用div标签把Google Earth窗口框起来。
  用JavaScript函数来创建Google Earth对象。
  在body标签的onLoad事件来初始化Google Earth对象。

  下面就对上述要点做一简单说明:

  加载Google Earth API

  <script src="http://www.google.com/jsapikey=ABCDEF";></script >

  想必大家都已经知道,在编写Google Earth网页时,必须先 申请key。http://www.google.com/jsapikey=ABCDEF是一个链接,链接 那一头包含了您要使用Google Earth API所需要的所有Javascript元件、标签和定 义文件。此例中key值为假设值“ABCDEF”。

  DOM

  <div id= map3d_container 
  style= border: 1px solid silver; height: 600px; width: 800px; >
  <div id= map3d  style= height: 100%; ></div>
  </div>

  由于要在网页上显示Google Earth窗口,所以必须给它留 些位置。这人“位置”就是用已命名的div标签来创建,并以此来获取浏览器文档对 象模型的参考。在这个示例中,div标签被命名为“map_3d_container”,其长宽均 由相应属性设定。

  加载Google Earth

  <body onload= init()  id= body >

  当HTML页面编译时,文档对象模型(DOM)以及所有外部图 像、脚本均被融合到文档(document)对象中。为了确保页面完全加载后地图能显示 在指定位置,我们可以单步调试,当<body>标签内的onLoad事件被触发时,仅 执行ge对象的函数,仔细观察运行效果。这样做是为了避免不确定因素或人为失误, 使我们对地图的绘制与显示得以掌控。

  创建地标

  地标是Google Earth里最常用的功能之一,它用一颗小图 钉来表示地标制作/发布者的指定方位。您可以对地标进行编辑——修改名称或图标 ,也可以加入其他地理属性一。下列代码创建了一个地标,该地标位于Google位于美 国硅谷总部的园区。

var placemark = ge.createPlacemark(  );
placemark.setName("You are at Google");
ge.getFeatures().appendChild(placemark);

// Create style map for placemark
var normal = ge.createIcon(  );
normal.setHref( http://maps.google.com/mapfiles/kml/paddle/red- circle.png );
var iconNormal = ge.createStyle(  );
iconNormal.getIconStyle().setIcon(normal);
var highlight = ge.createIcon(  );
highlight.setHref( http://maps.google.com/mapfiles/kml/paddle/red- circle.png );
var iconHighlight = ge.createStyle(  );
iconHighlight.getIconStyle().setIcon(highlight);
var styleMap = ge.createStyleMap(  );
styleMap.setNormalStyle(iconNormal);
styleMap.setHighlightStyle(iconHighlight);
placemark.setStyleSelector(styleMap);

// Create point
var la = ge.getView().copyAsLookAt (ge.ALTITUDE_RELATIVE_TO_GROUND);
var point = ge.createPoint(  );
point.setLatitude(la.getLatitude());
point.setLongitude(la.getLongitude());
placemark.setGeometry(point);

  地标效果如下图所示

  

  创建地标过程中,您必须指定两项内容:

  地标名称。上例中,地标名称为“You are at Google”。

  地标位置。即明确的经纬度和任意海拨。上例中,经纬度由 “LookAt”指定(“LookAt”用来定义视角,即浏览地标的方向、角度、高度)。

  创建气泡提示

  创建地标之后,您可以添加一个“气泡提示”,对地标加以 说明。“气泡提示”完全支持HTML格式,也就是说,说明内容可以包含文本、图片、 表格、超链接等。目前“气泡”有三种类型:

  特征气泡
  文字气泡
  DIV气泡
  下列代码将创建一个特征气泡:
  var b = ge.createFeatureBalloon(  );
  b.setFeature(marker);
  b.setMaxWidth(800);
  ge.setBalloon(b);

  下列代码将创建一个文字气泡,文字显示为珠穆朗玛峰,字 体设为粗体大号:

  var b = ge.createHtmlStringBalloon(  );
  b.setMaxWidth(300);
  b.setFeature(feature);
  b.setContentString (
   <b.setContentString (
   <img src="http://www.google.com/intl/en_ALL/images/logo.gif";> ;  +
   <font size=20>Mount Everest</font><br><font size=-2>on top of the world   +  window</font> ); 
  ge.setBalloon(b);

  效果如下图所示:

  

  下列代码将创建DIV 气泡:

  var b = ge.createHtmlDivBalloon(  );
  b.setMaxWidth(800);
  b.setFeature(feature);
  var div = document.createElement( DIV );
  div.innerHTML =
 <img src="http://www.google.com/googlegulp/images/logo.gif";> <br> 
+  <a href="http://www.google.com/googlegulp/";>Google Gulp</a> ;
  b.setContentDiv(div);
  ge.setBalloon(b);

  您可以通过改变字体、文字颜色、图片以及排版格式来进 行自定义。如果要关闭说明框,可以用下面这条Javascript语句:ge.setBalloon (null);

  如何控制游览视角

  您可以用LookAt对象来指定Google Earth察看点、察看距离 及角度。下例代码把察看位置向北移动7度(经度),向东移动7度(纬度)。
  var lookAt = ge.getView().copyAsLookAt (ge.ALTITUDE_RELATIVE_TO_GROUND);
  lookAt.setLatitude(lookAt.getLatitude() + 7.0);
  lookAt.setLongitude(lookAt.getLongitude() + 7.0);
  ge.getView().setAbstractView(lookAt);

  创建路径

  在Google Earth内可创建多种类型的路径,并且可根据您 的数据进行定制。路径由“lineString”对象创建,可以通过定义一串连续的线段来 创建弯折路径。当使用lineString对象时,您必须指定lineString是否与地面相连。 Tessellate属性可以将直线分割成若干线段。

  var lineString;
  lineString = ge.createLineString(  );
  var lineStringPlacemark = ge.createPlacemark(  );
  lineStringPlacemark.setGeometry(lineString);
  lineString.setTessellate(true);
  ge.getDocument().getFeatures().appendChild(lineStringPlacemark);

  addToLineString(lineString, 0, 0, 0);
  addToLineString(lineString, .1, .05, 0);
  addToLineString(lineString, 0, .10, 0);
  addToLineString(lineString, .1, .15, 0);
  addToLineString(lineString, 0, .20, 0);
  addToLineString(lineString, .1, .25, 0);

  下图即为Google Earth中创建的路径:

  

  改变路径样式

  可以通过指定颜色和宽度来确定路径样式。下列JavaScript 代码针对上述路径,增加了线条宽度,并把颜色改为蓝色。样式更改后效果如下图所 示。
  var lineStyle = lineStringPlacemark.getStyleSelector ().getLineStyle();
  lineStyle.setWidth(lineStyle.getWidth() + 2);
  lineStyle.getColor().set( 66ff0000 );

  

  创建多边形

  您可以通过多边形功能来创建房屋或其他形状。下列代码, 创建了一个矩形,其内外边框均设为白色。
  var polygonPlacemark = ge.createPlacemark(  );
  polygonPlacemark.setGeometry(ge.createPolygon(  ));
  var outer = ge.createLinearRing(  );
  polygonPlacemark.getGeometry().setOuterBoundary(outer);
  ge.getDocument().getFeatures().appendChild(polygonPlacemark);

  // Square outer boundary
  var center = ge.createLookAt(  );
  center = ge.getView().copyAsLookAt (ge.ALTITUDE_RELATIVE_TO_GROUND);
  var coords = outer.getCoordinates();
  var lat = center.getLatitude();
  var lon = center.getLongitude();
  coords.pushLatLngAlt(lat - .05, lon - .05, 0); 
  coords.pushLatLngAlt(lat - .05, lon + .05, 0); 
  coords.pushLatLngAlt(lat + .05, lon + .05, 0); 
  coords.pushLatLngAlt(lat + .05, lon - .05, 0); 

  // Create a square inner boundary
  polygonPlacemark.getGeometry().getInnerBoundaries().
  appendChild(ge.createLinearRing(  ));
  coords = polygonPlacemark.getGeometry().getInnerBoundaries ().getFirstChild().
  getCoordinates();
  coords.pushLatLngAlt(lat - .02, lon - .02, 0); 
  coords.pushLatLngAlt(lat - .02, lon + .02, 0); 
  coords.pushLatLngAlt(lat + .02, lon + .02, 0); 
  coords.pushLatLngAlt(lat + .02, lon - .02, 0);

  效果如下图所示

  

  更改多边形样式

  跟路径一样,您可以通过改变颜色和边框宽度,自己设定多边形样式。见下例 ,把矩形边设为红色,边框为蓝色。
  var lineStyle = polygonPlacemark.getStyleSelector ().getLineStyle();
  lineStyle.setWidth(lineStyle.getWidth() + 2);
  lineStyle.getColor().set( 66ff0000 );
  polygonPlacemark.getStyleSelector().getPolyStyle().getColor().set ( 660000ff );

  

  使用在线地标

  在线地标,顾名思义,必然有一项属性超链接,该链接指向 存放在网络上的地标文件,包含以下三类:
  图标文件、地面叠加图、屏幕叠加图。
  模型(SketchUp文件尤佳)。
  KML或KMZ文件。
  链接文件可以存放在本地,也可存放在远程服务器上。在线地标的最大优势就 是可以方便有效地管理、使用大容量或更新频繁的文件。如果在本地打开大容量地标 文件,那对机器硬件将是一大考验。

  下列代码将创建一款在线地标:

  svar networkLink = ge.createNetworkLink("");
  networkLink.setDescription("NetworkLink open to fetched content");
  networkLink.setName("Open NetworkLink");
  networkLink.setFlyToView(true); 
  var link = ge.createLink("");
  link.setHref("http://kml-samples."; +
"/svn/trunk/kml/NetworkLink/placemark.kml");
  networkLink.setLink(link);
  ge.getFeatures().appendChild(networkLink);

  管理事件

  JavaScript语言是基于事件驱动的,也就是说,事件的产生 将激发JavaScript作出反应,程序把结果反馈给用户。例如,在浏览器内,用户的键 盘、鼠标动作将触发文档对象模型(DOM)内的事件。事件内的代码会先将其监听模 块注册,当事件激活/产生时,便立即执行相关反馈代码。

  Google Earth API的事件由GEvent命名空间里的函数来控制 的。每一个Google Earth API对象都对应若干事件。例如,“KmlPlacemark”对象 有“Click”(单击),“dblclick”(双击),“move”(移动)等事件。每种事件都只 适应特定操作,比如,用户在Google Earth里移动鼠标就会触发“mousemove”事 件。在下列代码中,您将看到事件是如何被管理的:

  function myEventListener(kmlEvent) {
  var targetType = kmlEvent.getTarget().getType();
  var currentTargetType = kmlEvent.getCurrentTarget().getType();
  var button = kmlEvent.getButton());
  var clientX = kmlEvent.getClientX();
  var clientY = kmlEvent.getClientY();
  var screenX = kmlEvent.getScreenX();
  var screenY = kmlEvent.getScreenY();
  var latitude = kmlEvent.getLatitude();
  var longitude = kmlEvent.getLongitude();
  var altitude = kmlEvent.getAltitude();
  var didHitGlobe = kmlEvent.getDidHitGlobe();
  var altKey = kmlEvent.getAltKey();
  var ctrlKey = kmlEvent.getCtrlKey();
  var shiftKey = kmlEvent.getShiftKey();
  var timeStamp = kmlEvent.getTimeStamp();
  }

  // This will trigger myEventListener() when user clicks on  placemark ,
  // and will pass in a KmlEvent object.
  google.earth.addEventListener(placemark, "mousedown", myEventListener);

  // This will trigger myEventListener() when user clicks on the globe,
  // and will pass in a KmlEvent object.
  google.earth.addEventListener(ge.getGlobe(), "mousedown", myEventListener);

  // This will trigger myEventListener() when user clicks anywhere in the window,
  // and will pass in a KmlEvent object.
  google.earth.addEventListener(ge.getWindow(), "mousedown", myEventListener);

=============================================================================

创建地面覆盖

地面覆盖,允许您在Google Earth的地表上放置图像。其中,图像源自网络,图片的URL包含在“Icon”对象内。


var groundOverlay = ge.createGroundOverlay(  );
groundOverlay.setIcon(ge.createIcon(  ))
groundOverlay.getIcon().
setHref("/UploadFiles/JCYY/2008/9/200809021708447490.gif");
groundOverlay.setLatLonBox(ge.createLatLonBox(  ));

var center = ge.getView().copyAsLookAt(ge.ALTITUDE_RELATIVE_TO_GROUND);
var north = center.getLatitude() + .85;
var south = center.getLatitude() - .85;
var east = center.getLongitude() + .55;
var west = center.getLongitude() - .55;
var rotation = 0;
var latLonBox = groundOverlay.getLatLonBox();
latLonBox.setBox(north, south, east, west, rotation);

ge.getFeatures().appendChild(groundOverlay);

此例中,Google的logo被叠放在加州总部山景城的位置。

地面覆盖的特点是始终吸附在地表,无论图像放在山脉还是河谷,如下图所示:


创建屏幕覆盖

屏幕覆盖是指图片固定在屏幕上,不像地面覆盖那样跟随地表起伏而变化。屏幕覆盖通常用来做logo、商标、图例等,其长宽尺寸由size属性决定。图像位置(screenXY属性)由图中的安置点(overlayXY属性)控制,其旋转角度由rotationXY属性决定。下列代码将用Google标志图来创建一个屏幕覆盖,并倾斜一定角度。


var screenOverlay = ge.createScreenOverlay(  );
screenOverlay.setIcon(ge.createIcon(  ));
screenOverlay.getIcon().
setHref("/UploadFiles/JCYY/2008/9/200809021708447490.gif");

// Set screen position in pixels
screenOverlay.getOverlayXY().setXUnits(ge.UNITS_PIXELS);
screenOverlay.getOverlayXY().setYUnits(ge.UNITS_PIXELS);
screenOverlay.getOverlayXY().setX(400);
screenOverlay.getOverlayXY().setY(200);

// Rotate around object s center point
screenOverlay.getRotationXY().setXUnits(ge.UNITS_FRACTION);
screenOverlay.getRotationXY().setYUnits(ge.UNITS_FRACTION);
screenOverlay.getRotationXY().setX(0.5);
screenOverlay.getRotationXY().setY(0.5);

// Set object s size in pixels
screenOverlay.getSize().setXUnits(ge.UNITS_PIXELS);
screenOverlay.getSize().setYUnits(ge.UNITS_PIXELS);
screenOverlay.getSize().setX(300);
screenOverlay.getSize().setY(75);

// Rotate 45 degrees
screenOverlay.setRotation(45);

ge.getFeatures().appendChild(screenOverlay);

效果如下图所示:


样式地图

样式地图在一般情况为地标下提供两种状态:普通状态和高亮状态,分别由两种图标来表示,当用户在Google Earth中用鼠标在地标图案上经过时,图案会自动切换至高亮状态。
下例代码中,地标在普通状态时,图案为三角形,当鼠标在地标上方经过时,其图案变为矩形。


map = ge.createStyleMap( styleMap  + counter);

// Create icon normal for style map
normal = ge.createIcon(  );
normal.setHref( /UploadFiles/JCYY/2008/9/200809021709148777.png );
iconNormal = ge.createStyle( styleIconNormal  + counter);
iconNormal.getIconStyle().setIcon(normal);

// Create icon highlight for style map
highlight = ge.createIcon(  );
highlight.setHref( /UploadFiles/JCYY/2008/9/200809021709154050.png );
iconHighlight = ge.createStyle( styleIconHighlight  + counter);
iconHighlight.getIconStyle().setIcon(highlight);

// Set normal and highlight for stylemap
map.setNormalStyleUrl( #styleIconNormal  + counter);
map.setHighlightStyleUrl( #styleIconHighlight  + counter);

// Apply to placemark
placemark.setStyleUrl( #styleMap  + counter);
}


管理地形、道路、边界

当浏览器窗口加载Google Earth插件时,地形特征将被作为默认选项被显示,无需手动干预。并不是所有Google Earth图层特性被显示出来,如果要在浏览器内显示,那么下列JavaScript代码将教您怎么做:


显示建筑三维模型
ge.getLayerRoot().enableLayerById(ge.LAYER_BUILDINGS, true);
隐藏建筑三维模型
ge.getLayerRoot().enableLayerById(ge.LAYER_BUILDINGS, false);

显示边界
ge.getLayerRoot().enableLayerById(ge.LAYER_BORDERS, true);
隐藏边界
ge.getLayerRoot().enableLayerById(ge.LAYER_BORDERS, false);

显示地形
ge.getLayerRoot().enableLayerById(ge.LAYER_TERRAIN, true);
隐藏地形
ge.getLayerRoot().enableLayerById(ge.LAYER_TERRAIN, false);


KML分析

如果您手上有一段KML代码,那么就可以让Google Earth插件对其进行分析——用ge.parseKml对象把KML转换成JavaScript。示例代码如下:


var pentagon = ge.parseKml(
<?xml version="1.0" encoding="UTF-8"?>  +
<kml xmlns="http://earth.google.com/kml/2.1">  +
<Placemark>  +
<name>The Pentagon</name>  +
<Polygon>  +
<extrude>1</extrude>  +
<altitudeMode>relativeToGround</altitudeMode>  +
<outerBoundaryIs>  +
<LinearRing>  +
<coordinates>  +
-77.05788457660967,38.87253259892824,100   +
-77.05465973756702,38.87291016281703,100   +
-77.05315536854791,38.87053267794386,100   +
-77.05552622493516,38.868757801256,100   +
-77.05844056290393,38.86996206506943,100   +
-77.05788457660967,38.87253259892824,100  +
</coordinates>  +
</LinearRing>  +
</outerBoundaryIs>  +
<innerBoundaryIs>  +
<LinearRing>  +
<coordinates>  +
-77.05668055019126,38.87154239798456,100   +
-77.05542625960818,38.87167890344077,100   +
-77.05485125901024,38.87076535397792,100   +
-77.05577677433152,38.87008686581446,100   +
-77.05691162017543,38.87054446963351,100   +
-77.05668055019126,38.87154239798456,100  +
</coordinates>  +
</LinearRing>  +
</innerBoundaryIs>  +
</Polygon>  +
</Placemark>  +
</kml> );

ge.getFeatures().appendChild(pentagon);

var la = ge.createLookAt(  );
la.set(38.867, -77.0565, 500, ge.ALTITUDE_RELATIVE_TO_GROUND, 0, 45, 900);
ge.getView().setAbstractView(la);

上述代码效果如下图所示:


察看模型

Google Earth插件支持立体模型(三维场景)。把三维模型导入Google Earth后,会自动转换格式、旋转角度、伸缩大小,以适应Google Earth的坐标系统。
下列代码将加载一个Collada模型,并将其显示出来。(注:COLLADA的全名是“COLLAborative Design Activity”,是用来建立3D互动程序的一个文件格式,而此格式就叫做“dae”,全名是“digital asset exchange”。COLLADA主要定义一个开放式的XML Schema标准。也就是说,你在3D软件所建好的模型,只要透过COLLADA的外挂软件就可以输出成「dae」的档案,而这个档案所包含的内容就是以XML文字数据的形式来描述的。)


placemark = ge.createPlacemark(  );
placemark.setName( model );
model = ge.createModel(  );
ge.getFeatures().appendChild(placemark);
loc = ge.createLocation(  );
model.setLocation(loc);
link = ge.createLink(  );

// A textured model created in Sketchup and exported as Collada.
var href = window.location.href;
var pagePath = href.substring(0, href.lastIndexOf( / )) +  / ;
link.setHref(pagePath +  splotchy_box.dae );
model.setLink(link);

la = ge.getView().copyAsLookAt(ge.ALTITUDE_RELATIVE_TO_GROUND);
loc.setLatitude(la.getLatitude());
loc.setLongitude(la.getLongitude());

placemark.setGeometry(model);

la.setRange(300);
la.setTilt(80);
ge.getView().setAbstractView(la);


察看太空

您可以创建程序来观察天空——星星、月亮、星座、星系……就像Google Earth里的Sky功能一样。当程序切换到天空模式时,界面也会自动切换。所有星空数据均被放置在虚拟圆形地球的内部,我们的视角切换到球形核心,抬头仰望便可一览苍穹。
坐标 
星空坐标由赤经和赤纬组成。
赤经:从春分点沿着天赤道向东到天体时圈与天赤道的交点所夹的角度,成为该天体的赤经。赤经与时角不同,时角是由天子午圈向西量,而赤经是由春分点向东量,两者方向相反。赤经(Right ascension, RA; 符号:希腊字母α),天文学名词。指赤道坐标系的经向坐标,过天球上一点的赤经圈与过春分点的二分圈所交的球面角。天球上相当于地球经线的线,通过 天球两极并与天赤道垂直。以时、分、秒表示。
赤纬:从天赤道沿着天体的时圈至天体的角度称为该天体的赤纬。以天赤道为赤纬0°,向北为正,向南为负,分别从0°到90°。日赤纬的变化范围在-23°27 ~+23°27 之间,而月赤纬的最大变化范围为-28°36 ~+-28°36 .赤纬常用δ表示。在第二赤道坐标系中,天体的位置根据规定用经纬度来表示,称作赤经(α)、 赤纬(δ)。赤纬就是天体的位置与天赤道位置的差,在天赤道以北多少度就为正多少度,反之,在天赤道以南多少度为负多少度。赤纬的取值为-90度到+90度,南天极的赤纬为-90度,北天极的赤纬为+90度,天赤道的赤纬为0度。天球赤道坐标系的纬度规定与地球纬度类似。只是不称作“南纬”和“北纬”,天球赤纬以北纬为正,以南为负。

用set方法把地球界面切换至天空:


ge.getOptions().setMapType(ge.MAP_TYPE_SKY);

反之,把界面从天空切换回地球:


ge.getOptions().setMapType(ge.MAP_TYPE_EARTH);

计算LookAt对象里的Range值 
当您使用LookAt对象来处理星空数据时,必须用下列公式计算出r的距离。


r = R*(k*sin(β/2) - cos(β/2) + 1)

公式中各参数说明如下:

r:即range的值,由<LookAt>标签指定。

R:为假设星空球体的半径。在这里,星空球面为地球内表面,“ Center of Earth”为地球核心,因此R值实为地球半径6.378×106。

k:等于1 / tan ( 2 / α),或者用近似数替代:1.1917536

α:是一个角度范围(β<α<180°)。当观察点向地球原点移动时所形成的夹角。

β:用户所需星空图像两边与地球原点的夹角(单位:秒)。

与Google Maps相结合

如果您是一位Google Maps开发者,想把网络地图移植到Google Earth插件里以增强互动效果,现在变得轻而易举。Google Maps API为Gmap2类增加了一个新方法,为Gmap类型增加了一个新常量,允许你在已有的网络地图中增加Google Earth三维功能。

下例中,网页中的Google Map新增了一个“Earth”按钮,可以随时在Map与Earth之间切换。


当您点击“Earth”按钮时,窗口切换至Google Earth,地点未变。


示例代码如下:

 


<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
"http://www./TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www./1999/xhtml"
xmlns:v="urn:schemas-microsoft-com:vml">
<head>
<title>Using Google Earth API with the Maps API</title>

<script src="http://maps.google.com/maps?file=api&v=2.x&key=abcdefg"
type="text/javascript"></script>
function initialize() {
var map = new GMap2(document.getElementById("map"));
map.setCenter(new GLatLng(37.4419, -122.1419), 13);
map.addMapType(G_SATELLITE_3D_MAP);
map.addControl(new GHierarchicalMapTypeControl());

// Uncomment the following line to start the map with 3D enabled.
// map.setMapType(G_SATELLITE_3D_MAP);

// Obtain a pointer to the Google Earth instance attached to
// your map.
map.getEarthInstance(getEarthInstanceCB);
}

var ge;
function getEarthInstanceCB(object) {
ge = object;
// You can now manipulate ge using the full Google Earth API.
}
</script>

</head>
<body onload="initialize()" onunlaod="GUnload">
<div id="map" class="map" style="width:500px;height:350px"></div>
</body>
</html>

大家从以上代码可以看出,在已有地图中添加新类型,只需调用gMap.addMapType(G_SATELLITE_3D_MAP)。如果您的地图上有按钮条,那么上述代码就会在按钮条中新增一项“Earth”,当用户点击它,地球窗口就会显示出来,各种标记、图形、文本等提示框,均能在地球窗口内正常显示。

除了addMapType,您还可以用gMap.setMapType(G_SATELLITE_3D_MAP)直接把地图切换至Google Earth。同样,调用gMapType.setMapType()可以隐藏Google Earth窗口,地图切换到其他类型。

分享到:        
阅读(314)| 评论(0)| 引用(0) |举报

    本站是提供个人知识管理的网络存储空间,所有内容均由用户发布,不代表本站观点。请注意甄别内容中的联系方式、诱导购买等信息,谨防诈骗。如发现有害或侵权内容,请点击一键举报。
    转藏 分享 献花(0

    0条评论

    发表

    请遵守用户 评论公约

    类似文章 更多