Google Earth web开发

最新推荐文章于 2022-07-28 09:00:46 发布

风云雄霸天下

最新推荐文章于 2022-07-28 09:00:46 发布

阅读量2.3k

点赞数

分类专栏： Google Earth 文章标签： google web开发 function api object javascript

本文链接：https://blog.csdn.net/xinruogis/article/details/5342490

版权

Google Earth 专栏收录该内容

4 篇文章

订阅专栏

google web插件开发

Google 地球插件及其 JavaScript API 使您可以将 Google 地图（一种真 3D 数字地球仪）嵌入到您的网页中。使用该 API 您可以绘制标记和折线、使图片覆盖区域、添加 3D 模型或加载 KML 文件，从而允许您构建复杂的 3D 地图应用程序。如果您有现有地图 API 站点，那么只需一行代码即可在您的网页上启用 3D 效果。

<html>
<head>
    <title>Hello Google Earth!</title>
    
    <script src="http://www.google.com/jsapi?key=ABCDEF";></script>
    <script>

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

var ge = null;

function init() {

resize();
  google.earth.createInstance("map3d", initCallback, failureCallback);
  var clientHeight = document.documentElement.clientHeight;
    document.getElementById("map3d_container").style.height=clientHeight+"px";
}

function initCallback(object) {
DS_ge.getWindow().setVisibility(true);
      DS_ge.getLayerRoot().enableLayerById(DS_ge.LAYER_BUILDINGS, true); //显示建筑层
       DS_ge.getLayerRoot().enableLayerById(DS_ge.LAYER_BORDERS, true);   //线路层
      DS_geHelpers = new GEHelpers(DS_ge);
      oldSpeed=DS_ge.getOptions().getFlyToSpeed();

      DS_ge.getNavigationControl().setVisibility(DS_ge.VISIBILITY_AUTO);
   DS_ge.getOptions().setStatusBarVisibility(true);       //状态栏
   //DS_ge.getOptions().setOverviewMapVisibility(true);

   var navControl = DS_ge.getNavigationControl();
   navControl.setVisibility(DS_ge.VISIBILITY_SHOW);       //显示导航
        DS_ge.getOptions().setMouseNavigationEnabled(true); //鼠标导航能用

    var la = DS_ge.createLookAt('');
      la.set(30,120,
              100, //高度
              DS_ge.ALTITUDE_RELATIVE_TO_GROUND,
              0, // heading
              0, // straight-down tilt
              50000 // range (inverse of zoom)
           );
      DS_ge.getView().setAbstractView(la); 定位到指定地点

}

function failureCallback(object) {

alert("初始化失败");

}

function resize()
{
var clientHeight = document.documentElement.clientHeight;
var clientWidth = document.documentElement.clientWidth;
document.getElementById("map3d_container").style.height=clientHeight+"px";
document.getElementById("map3d_container").style.width=clientWidth+"px";
}

</script>
</head>
<body οnlοad="init();" id="body" onselectstart='return false' οncοntextmenu='return false' scroll='no' οnresize="resize()">
<div id="map3d_container" style="border: 0px solid silver; height: 100%;" >
<div id="map3d" style="height: 100%" ></div>
</div>

</body>

</html>

一个简单的三维显示成功了