2022年GoogleEarthAPI开发者指南 .pdf
《2022年GoogleEarthAPI开发者指南 .pdf》由会员分享,可在线阅读,更多相关《2022年GoogleEarthAPI开发者指南 .pdf(13页珍藏版)》请在得力文库 - 分享文档赚钱的网站上搜索。
1、第一个小程序“Hello World”记得在学校上编程课时,无论是Basic 还是 C,课本第一个示例都是“ Hello World”。今天,我们开始学习 Google Earth API,仍然以这个最简单的小示例开始。下列JavaScript源代码教您如何创建一个包含Google Earth的网 页。 Hello Google Earth! google.load(earth, 1); var Google Earth = null; function init() google.earth.createInstance(map3d, initCallback, failureCallbac
2、k); function initCallback(object) Google Earth = object; Google Earth.Google EarthtWindow().setVisibility(true); function failureCallback(object) body onload= init() ; Hello , Earth! 名师资料总结 - - -精品资料欢迎下载 - - - - - - - - - - - - - - - - - - 名师精心整理 - - - - - - - 第 1 页,共 13 页 - - - - - - - - - 您可以直接把这段
3、代码复制下来,把里面的“Key”换成您自己申请的 Key值(详见序)。如果您不方便申请 Key,又想看看这段源代码的运行效果,那么也没关系,您可以点击查看这个链接(http:/ Earth插件。上面这段代码中,您需要注意四个方面(上述代码中已用绿色粗体字显示):Google Earth API脚本语句必须包含script标签,即“ ”。用 div 标签把 Google Earth窗口框起来。用 JavaScript函数来创建 Google Earth对象。在 body 标签的 onLoad 事件来初始化 Google Earth对象。下面就对上述要点做一简单说明:加载 Google Earth
4、 API 想必大家都已经知道,在编写Google Earth网页时,必须先申请 key。http:/ Earth API 所需要的所有Javascript元件、标签和定义文件。此例中key 值为假设值“ ABCDEF ”。DOM 名师资料总结 - - -精品资料欢迎下载 - - - - - - - - - - - - - - - - - - 名师精心整理 - - - - - - - 第 2 页,共 13 页 - - - - - - - - - 由于要在网页上显示Google Earth 窗口,所以必须给它留些位置。这人“位置”就是用已命名的 div 标签来创建,并以此来获取浏览器文档对象模型的
5、参考。在这个示例中,div 标签被命名为“map_3d_container ”,其长宽均由相应属性设定。加载 Google Earth 当 HTML 页面编译时,文档对象模型 (DOM ) 以及所有外部图像、 脚本均被融合到文档 (document)对象中。为了确保页面完全加载后地图能显示在指定位置,我们可以单步调试,当标签内的onLoad 事件被触发时,仅执行 Google Earth对象的函数,仔细观察运行效果。这样做是为了避免不确定因素或人为失误,使我们对地图的绘制与显示得以掌控。创建地标地标是 Google Earth里最常用的功能之一,它用一颗小图钉来表示地标制作 / 发布者的指定方
6、位。您可以对地标进行编辑修改名称或图标,也可以加入其他地理属性一。下列代码创建了一个地标,该地标位于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.se
7、tHref( http:/ circle.png ); var iconNormal = Google Earth.createStyle( ); iconNormal.Google EarthtIconStyle().setIcon(normal); var highlight = Google Earth.createIcon( ); highlight.setHref( http:/ circle.png ); var iconHighlight = Google Earth.createStyle( ); iconHighlight.Google EarthtIconStyle().s
8、etIcon(highlight); var styleMap = Google Earth.createStyleMap( ); styleMap.setNormalStyle(iconNormal); styleMap.setHighlightStyle(iconHighlight); placemark.setStyleSelector(styleMap); 名师资料总结 - - -精品资料欢迎下载 - - - - - - - - - - - - - - - - - - 名师精心整理 - - - - - - - 第 3 页,共 13 页 - - - - - - - - - / Creat
9、e 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); 地标效果如下图所示创建地标过程中,您
10、必须指定两项内容:地标名称。上例中,地标名称为“You are at Google”。地标位置。即明确的经纬度和任意海拨。上例中,经纬度由“LookAt”指定(“ LookAt”用来定义视角,即浏览地标的方向、角度、高度)。创建气泡提示创建地标之后,您可以添加一个“气泡提示”,对地标加以说明。“气泡提示”完全支持HTML格式,也就是说,说明内容可以包含文本、图片、表格、超链接等。目前“气泡”有三种类型:名师资料总结 - - -精品资料欢迎下载 - - - - - - - - - - - - - - - - - - 名师精心整理 - - - - - - - 第 4 页,共 13 页 - - -
11、- - - - - - 特征气泡文字气泡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
12、 ( b.setContentString ( ; + Mount Evereston top of the world + window ); Google Earth.setBalloon(b); 效果如下图所示:名师资料总结 - - -精品资料欢迎下载 - - - - - - - - - - - - - - - - - - 名师精心整理 - - - - - - - 第 5 页,共 13 页 - - - - - - - - - 下列代码将创建DIV 气泡:var b = Google Earth.createHtmlDivBalloon( ); b.setMaxWidth(800); b.
13、setFeature(feature); var div = document.createElement( DIV ); div.innerHTML = + Google Gulp ; b.setContentDiv(div); Google Earth.setBalloon(b); 您可以通过改变字体、文字颜色、图片以及排版格式来进行自定义。如果要关闭说明框,可以用下面这条 Javascript语句: Google Earth.setBalloon (null); 如何控制游览视角您可以用 LookAt 对象来指定 Google Earth察看点、察看距离及角度。下例代码把察看位置向北移动
14、 7 度(经度),向东移动7 度(纬度)。var lookAt = Google Earth.Google EarthtView().copyAsLookAt (Google 名师资料总结 - - -精品资料欢迎下载 - - - - - - - - - - - - - - - - - - 名师精心整理 - - - - - - - 第 6 页,共 13 页 - - - - - - - - - Earth.ALTITUDE_RELATIVE_TO_GROUND); lookAt.setLatitude(lookAt.Google EarthtLatitude() + 7.0); lookAt.se
15、tLongitude(lookAt.Google EarthtLongitude() + 7.0); Google Earth.Google EarthtView().setAbstractView(lookAt); 创建路径在 Google Earth 内可创建多种类型的路径, 并且可根据您的数据进行定制。路径由 “lineString”对象创建,可以通过定义一串连续的线段来创建弯折路径。当使用lineString对象时,您必须指定lineString是否与地面相连。 Tessellate属性可以将直线分割成若干线段。var lineString; lineString = Google E
16、arth.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
17、 , 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中创建的路径:名师资料总结 - - -精品资料欢迎下载 - - - - - - - - - - - - - - - - - -
- 配套讲稿:
如PPT文件的首页显示word图标,表示该PPT已包含配套word讲稿。双击word图标可打开word文档。
- 特殊限制:
部分文档作品中含有的国旗、国徽等图片,仅作为作品整体效果示例展示,禁止商用。设计者仅对作品中独创性部分享有著作权。
- 关 键 词:
- 2022年GoogleEarthAPI开发者指南 2022 GoogleEarthAPI 开发者 指南
限制150内