Google Earth API开发者指南-白红宇

Google Earth API开发者指南

阅读量：5009 次

发布时间：2019-06-12

本文共 9845 字，大约阅读时间需要 32 分钟。

第一个小程序——“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 at *** -- >

google.load("earth"， "1");

var Google Earth = null;

function init() {

google.earth.createInstance("map3d"， initCallback， failureCallback);

}

function initCallback(object) {

Google Earth = object;

Google Earth.Google EarthtWindow().setVisibility(true);

}

function failureCallback(object) {

}

</script>

</head>

<body οnlοad= init() ;

<div>

Hello， Earth!

</div>

<div id= map3d_container

style= border: 1px solid silver; height: 600px; width: 800px; >

</div>

</body>

</html>

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

　　上面这段代码中，您需要注意四个方面（上述代码中已用绿色粗体字显示）：

　　Google Earth API脚本语句必须包含script标签，即“<script>”。

　　用div标签把Google Earth窗口框起来。

　　用JavaScript函数来创建Google Earth对象。

　　在body标签的onLoad事件来初始化Google Earth对象。

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

加载Google Earth API

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

DOM

　　<div id= map3d_container

　　style= border: 1px solid silver; height: 600px; width: 800px; >

　　</div>

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

加载Google Earth

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

创建地标

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

var placemark = Google Earth.createPlacemark( );

placemark.setName("You are at Google");

Google Earth.Google EarthtFeatures().appendChild(placemark);

// Create style map for placemark

var normal = Google Earth.createIcon( );

normal.setHref( ;

var iconNormal = Google Earth.createStyle( );

iconNormal.Google EarthtIconStyle().setIcon(normal);

var highlight = Google Earth.createIcon( );

highlight.setHref( ;

var iconHighlight = Google Earth.createStyle( );

iconHighlight.Google EarthtIconStyle().setIcon(highlight);

var styleMap = Google Earth.createStyleMap( );

styleMap.setNormalStyle(iconNormal);

styleMap.setHighlightStyle(iconHighlight);

placemark.setStyleSelector(styleMap);

// Create point

var la = Google Earth.Google EarthtView().copyAsLookAt (Google Earth.ALTITUDE_RELATIVE_TO_GROUND);

var point = Google Earth.createPoint( );

point.setLatitude(la.Google EarthtLatitude());

point.setLongitude(la.Google EarthtLongitude());

placemark.setGoogle Earthometry(point);

地标效果如下图所示

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

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

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

创建气泡提示

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

　　特征气泡

　　文字气泡

　　DIV气泡

　　下列代码将创建一个特征气泡：

　　var b = Google Earth.createFeatureBalloon( );

　　b.setFeature(marker);

　　b.setMaxWidth(800);

　　Google Earth.setBalloon(b);

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

　　var b = Google Earth.createHtmlStringBalloon( );

　　b.setMaxWidth(300);

　　b.setFeature(feature);

　　b.setContentString (

<b.setContentString (

<img src=";> ; +

<font size=20>Mount Everest</font><br><font size=-2>on top of the world + window</font> );

　　Google Earth.setBalloon(b);

　　效果如下图所示：

　　下列代码将创建DIV 气泡：

　　var b = Google Earth.createHtmlDivBalloon( );

　　b.setMaxWidth(800);

　　b.setFeature(feature);

　　var div = document.createElement( DIV );

　　div.innerHTML =

+ <a href=";>Google Gulp</a> ;

　　b.setContentDiv(div);

　　Google Earth.setBalloon(b);

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

如何控制游览视角

　　您可以用LookAt对象来指定Google Earth察看点、察看距离及角度。下例代码把察看位置向北移动7度（经度），向东移动7度（纬度）。

　　var lookAt = Google Earth.Google EarthtView().copyAsLookAt (Google Earth.ALTITUDE_RELATIVE_TO_GROUND);

　　lookAt.setLatitude(lookAt.Google EarthtLatitude() + 7.0);

　　lookAt.setLongitude(lookAt.Google EarthtLongitude() + 7.0);

　　Google Earth.Google EarthtView().setAbstractView(lookAt);

创建路径

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

　　var lineString;

　　lineString = Google Earth.createLineString( );

　　var lineStringPlacemark = Google Earth.createPlacemark( );

　　lineStringPlacemark.setGoogle Earthometry(lineString);

　　lineString.setTessellate(true);

　　Google Earth.Google EarthtDocument().Google EarthtFeatures().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.Google EarthtStyleSelector ().Google EarthtLineStyle();

　　lineStyle.setWidth(lineStyle.Google EarthtWidth() + 2);

　　lineStyle.Google EarthtColor().set( 66ff0000 );

创建多边形

　　您可以通过多边形功能来创建房屋或其他形状。下列代码，创建了一个矩形，其内外边框均设为白色。

　　var polygonPlacemark = Google Earth.createPlacemark( );

　　polygonPlacemark.setGoogle Earthometry(Google Earth.createPolygon( ));

　　var outer = Google Earth.createLinearRing( );

　　polygonPlacemark.Google EarthtGoogle Earthometry().setOuterBoundary(outer);

　　Google Earth.Google EarthtDocument().Google EarthtFeatures().appendChild(polygonPlacemark);

　　// Square outer boundary

　　var center = Google Earth.createLookAt( );

　　center = Google Earth.Google EarthtView().copyAsLookAt (Google Earth.ALTITUDE_RELATIVE_TO_GROUND);

　　var coords = outer.Google EarthtCoordinates();

　　var lat = center.Google EarthtLatitude();

　　var lon = center.Google EarthtLongitude();

　　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.Google EarthtGoogle Earthometry().Google EarthtInnerBoundaries().

　　appendChild(Google Earth.createLinearRing( ));

　　coords = polygonPlacemark.Google EarthtGoogle Earthometry().Google EarthtInnerBoundaries ().Google EarthtFirstChild().

　　Google EarthtCoordinates();

　　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.Google EarthtStyleSelector ().Google EarthtLineStyle();

　　lineStyle.setWidth(lineStyle.Google EarthtWidth() + 2);

　　lineStyle.Google EarthtColor().set( 66ff0000 );

　　polygonPlacemark.Google EarthtStyleSelector().Google EarthtPolyStyle().Google EarthtColor().set ( 660000ff );

使用在线地标

　　在线地标，顾名思义，必然有一项属性超链接，该链接指向存放在网络上的地标文件，包含以下三类：

　　图标文件、地面叠加图、屏幕叠加图。

　　模型（SketchUp文件尤佳）。

　　KML或KMZ文件。

　　链接文件可以存放在本地，也可存放在远程服务器上。在线地标的最大优势就是可以方便有效地管理、使用大容量或更新频繁的文件。如果在本地打开大容量地标文件，那对机器硬件将是一大考验。

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

　　svar networkLink = Google Earth.createNetworkLink("");

　　networkLink.setDescription("NetworkLink open to fetched content");

　　networkLink.setName("Open NetworkLink");

　　networkLink.setFlyToView(true);

　　var link = Google Earth.createLink("");

　　link.setHref("; +

"/svn/trunk/kml/NetworkLink/placemark.kml");

　　networkLink.setLink(link);

　　Google Earth.Google EarthtFeatures().appendChild(networkLink);

管理事件

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

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

　　function myEventListener(kmlEvent) {

　　var tarGoogle EarthtType = kmlEvent.Google EarthtTarGoogle Eartht().Google EarthtType();

　　var currentTarGoogle EarthtType = kmlEvent.Google EarthtCurrentTarGoogle Eartht().Google EarthtType();

　　var button = kmlEvent.Google EarthtButton());

　　var clientX = kmlEvent.Google EarthtClientX();

　　var clientY = kmlEvent.Google EarthtClientY();

　　var screenX = kmlEvent.Google EarthtScreenX();

　　var screenY = kmlEvent.Google EarthtScreenY();

　　var latitude = kmlEvent.Google EarthtLatitude();

　　var longitude = kmlEvent.Google EarthtLongitude();

　　var altitude = kmlEvent.Google EarthtAltitude();

　　var didHitGlobe = kmlEvent.Google EarthtDidHitGlobe();