google web插件开发
Google 地球插件及其 JavaScript API 使您可以将 Google 地图(一种真 3D 数字地球仪)嵌入到您的网页中。使用该 API 您可以绘制标记和折线、使图片覆盖区域、添加 3D 模型或加载 KML 文件,从而允许您构建复杂的 3D 地图应用程序。如果您有现有地图 API 站点,那么只需一行代码即可在您的网页上启用 3D 效果。
<html>
<head>
<title>Hello Google Earth!</title>
<!-- *** Replace the key below below with your own API key, available at http://code.google.com/apis/maps/signup.html *** -->
<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>
一个简单的三维显示成功了