Javascript Google earth api [英] Javascript Google earth api
本文介绍了Javascript Google earth api的处理方法，对大家解决问题具有一定的参考价值，需要的朋友们下面随着小编来一起学习吧！
问题描述
你好......我想让这个统治者工作......所有必要的代码都已到位。我不知道如何使用Javascript使事件加载....按钮就在那里。守则在那里。它不会开火。我已经标记了不会触发的代码区域。我想输入地址。 2.点击标尺按钮。并且标尺可以执行到地址所在的任何位置。我附上了链接1.一个工作示例，正是我想要实现的只是在谷歌地图，所以代码不适用于谷歌地球。我还附上了一个链接到谷歌地球的简单统治者api，其中我已经在我的例子中编码它不会执行。我真的可以用这个问题了。我正在努力，并有一个截止日期来实现...谢谢你提前。 Eric
这是一个工作模型的链接..但是它在Google地图中。我需要这个谷歌地球
http://koti.mbnet.fi/ojalesa/exam/ruler.html [ ^ ]
这是我收到代码的链接已经到位且不会执行
http://earth-api-utility-library.googlecode.com/svn/trunk/extensions/examples/ruler.html [ ^ ]
这是我的项目
Hello …. I am trying to make this "ruler" work …. All the necessary code is in place . I am not knowledgeable enough to Make the event Load with Javascript …. The button is there . The Code is there . It just wont fire . I Have Marked the area of the code that won’t fire . 1. I would like to enter address . 2. Hit the "ruler" button . And have the ruler execute to wherever the address is located . I Have enclose links to 1. A working example that is exactly what I am trying to achieve only it is in "google maps " so the code does not work for "Google Earth " . I Have also enclosed a Link to the "simple ruler " api for google earth in which I have already coded in my example it just will not execute . I could really use a hand on this issue . I am struggling and have a deadline to achieve … Thank you in Advance . Eric
This is a link to a working Model .. However it is in Google maps . I need exactly this In "google Earth "
http://koti.mbnet.fi/ojalesa/exam/ruler.html[^]
This is a link to where i received my code that is in place and will not execute
http://earth-api-utility-library.googlecode.com/svn/trunk/extensions/examples/ruler.html[^]
This is My Project
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html>
<head>
<title>GEarthExtensions Samples - Simple Distance Ruler</title>
<script src="http://www.google.com/jsapi?key=ABQIAAAAsc0UQXoo2BnAJLhtpWCJFBTgHOxFyKCf35LCvsI_n4URElrkIhS9MkSlm_0NZWgrKFkOsnd5rEK0Lg" type="text/javascript"></script>
<script src="../dist/extensions.pack.js" type="text/javascript"></script>
<script src="google/extensions-0.2.1.pack.js"></script>
<script type="text/javascript">
/* <![CDATA[ */
var ge = null;
var geocoder = null; // GClientGeocoder
var gex = null;
google.load('earth', '1');
google.load('maps', '3.6', {
other_params: 'sensor=false&libraries=places'
});
function init() {
google.earth.createInstance('map3d', function (object) {
ge = object;
ge.getWindow().setVisibility(true);
geocoder = new window.google.maps.Geocoder();
gex = new GEarthExtensions(ge);
GeoSearch('map3d');
ge.getWindow().setVisibility(true);
ge.getNavigationControl().setVisibility(ge.VISIBILITY_AUTO)
ge.getNavigationControl().setStreetViewEnabled(true);
ge.getTime().setHistoricalImageryEnabled(true);
}, function (error) {
alert("Error: " + error);
});
}
google.setOnLoadCallback(init);
function GeoSearch(id, options) {
id = id || '';
options = options || {};
var me = {},
bbox = util.bbox(document.getElementById(id)),
settings = (function () {
var defaults = {};
defaults.x = 10;
defaults.y = 10;
defaults.width = 400;
defaults.height = 25;
defaults.types = [];
defaults.iframe = {
frameBorder: 0,
id: 'geosearch-shim',
scrolling: 'no',
//src: (navigator.userAgent.indexOf('MSIE 6')>=0)?'':'javascript:void(0);',
src: 'about:blank',
style: {
width: util.px(defaults.width),
height: util.px(defaults.height),
zIndex: 9,
position: 'absolute',
left: util.px(bbox.left, defaults.x),
top: util.px(bbox.top, defaults.y)
}
};
defaults.submit = {
type: 'button',
id: 'geosearch-submit',
className: 'geosearch-controls',
value: '►',
style: {
padding: '0 5px 0 5px',
cursor: 'pointer',
color: '#fff',
background: '#4d90fe',
height: util.px(defaults.height),
outline: 'none',
border: 0,
zIndex: 11,
position: 'absolute',
top: util.px(bbox.top, defaults.y)
}
};
defaults.input = {
type: 'text',
id: 'geosearch-input',
className: 'geosearch-controls',
style: {
paddingLeft: '5px',
textOverflow: 'ellipsis',
width: util.px(defaults.width),
height: util.px(defaults.height),
display: 'block',
outline: 'none',
border: 0,
zIndex: 10,
position: 'absolute',
left: util.px(bbox.left, defaults.x),
top: util.px(bbox.top, defaults.y)
}
};
return defaults;
})();
util.extend(settings, options);
me.iframeShim = util.add('iframe', document.body, settings.iframe);
me.input = util.add('input', document.body, settings.input);
me.submit = util.add('input', document.body, settings.submit);
var autocomplete = new google.maps.places.Autocomplete(me.input, {
types: settings.types
}),
reset = function () {
var offset = settings.width - me.submit.clientWidth;
me.iframeShim.style.height = util.px(settings.height);
me.submit.style.left = util.px(bbox.left, settings.x, offset);
me.input.style.width = util.px(offset);
me.submit.style.background = settings.submit.style.background;
me.input.title = me.submit.title = '';
};
reset();
util.listen(me.submit, 'click', function (evt) {
reset();
me.geocode(me.input.value);
return false;
});
util.listen(me.input, 'blur', function (evt) { reset(); });
//util.listen(me.input, 'focus', function (evt) { reset(); });
util.listen(me.input, 'keydown', function (evt) {
evt = window.event ? window.event : evt;
reset();
var pac = document.getElementsByClassName('pac-container')[0];
if (pac) {
me.iframeShim.style.height = util.px(settings.height, pac.clientHeight);
pac.style.paddingRight = util.px(me.submit.clientWidth);
}
if (evt.keyCode == 13) { // enter
reset();
me.geocode(me.input.value);
}
return false;
});
google.maps.event.addListener(autocomplete, 'place_changed', function () {
var place = autocomplete.getPlace();
if (!place.geometry) {
me.submit.style.background = 'red';
return;
}
me.submit.style.background = 'green';
me.input.title = me.submit.title = 'OK';
if (place.geometry.viewport) {
gex.view.setToBoundsView(new geo.Bounds(
place.geometry.viewport.getSouthWest(),
place.geometry.viewport.getNorthEast()), {
aspectRatio: 1.0
});
} else {
// TODO: look at using the geocode result?
place.geometry && gex.util.lookAt(place.geometry.location);
}
});
me.geocode = function (address) {
if ('string' != typeof address) return;
me.input.value = address;
geocoder.geocode({
address: address
}, function (results, status) {
me.input.title = me.submit.title = status;
if (status == google.maps.GeocoderStatus.OK) {
if (!results[0].geometry) return;
var viewport = results[0].geometry.viewport;
gex.view.setToBoundsView(new geo.Bounds(
viewport.getSouthWest(),
viewport.getNorthEast()), {
aspectRatio: 1.0
});
me.submit.style.background = 'green';
} else {
me.submit.style.background = 'red';
}
});
}
return me;
}
/* utilities */
var util = {
add: function (a, b, c) {
c = c || {};
a = document.createElement(a);
util.extend(a, c);
b.appendChild(a);
return a
},
extend: function (a, b) {
for (var c in b) "object" === typeof b[c] && null !== b[c] && a[c] ? util.extend(a[c], b[c]) : a[c] = b[c]
},
listen: function (a, b, c) {
a.addEventListener ? a.addEventListener(b, c, !1) : a.attachEvent && a.attachEvent("on" + b, c)
},
px: function () {
for (var a = 0, b = 0; b < arguments.length; b++)
a += parseInt(arguments[b]);
return a + "px"
},
bbox: function (a) {
for (var b = a.offsetLeft, c = a.offsetTop, d = a.offsetParent;
d && d != document.body.parentNode;)
isFinite(d.offsetLeft) && isFinite(d.offsetTop) && (b += d.offsetLeft, c += d.offsetTop), d = d.offsetParent;
return {
left: b,
top: c,
width: a.offsetWidth,
height: a.offsetHeight
}
}
};
// This is the Portion That will not Load .............. Hope it helps
google.setOnLoadCallback(function add() {
google.earth.createInstance('map3d', function(pluginInstance) {
ge = pluginInstance;
gex = new GEarthExtensions(pluginInstance);
gex.util.lookAt([1, 1], { range: 100000, tilt: 0});
// create start and end placemark
var rulerColor = '#fc0';
var placemarkOptions = {
style: {
icon: {
color: rulerColor,
stockIcon: 'paddle/wht-stars',
hotSpot: { left: '50%', bottom: 0 }
}
}
};
var startPlacemark = gex.dom.addPointPlacemark([0, -1], placemarkOptions);
var endPlacemark = gex.dom.addPointPlacemark([0, 1], placemarkOptions);
// create the distance updater function
var _updateDistance = function() {
document.getElementById('distance').innerHTML =
'~' +
(new geo.Point(startPlacemark.getGeometry()).distance(
new geo.Point(endPlacemark.getGeometry())) / 22229.344).toFixed(1) +
' mi';
};
// create the line placemark
var linePlacemark = gex.dom.addPlacemark({
lineString: {
path: [startPlacemark.getGeometry(),
endPlacemark.getGeometry()],
altitudeMode: ge.ALTITUDE_CLAMP_TO_GROUND,
tessellate: true
},
style: {
line: { color: rulerColor, opacity: 0.5, width: 3 }
}
});
// make them draggable
var dragOptions = {
bounce: false,
dragCallback: function() {
linePlacemark.setGeometry(
gex.dom.buildLineString({
path: [startPlacemark.getGeometry(),
endPlacemark.getGeometry()],
altitudeMode: ge.ALTITUDE_CLAMP_TO_GROUND,
tessellate: true
}));
// update the distance on drag
_updateDistance();
}
};
// show start distance
_updateDistance();
gex.edit.makeDraggable(startPlacemark, dragOptions);
gex.edit.makeDraggable(endPlacemark, dragOptions);
}, function() {});
});
/* */
</script>
</head>
<body>
<div id="map3d_container" style="width: 1000px; height: 500px;">
<div id="map3d" style="height: 100%"></div>
<input type="button" id="add" value="Ruler" önclick="add()" style="width:150px;"
title="Insert Ruler">
</div>
<p>Distance: <span id="distance">N/A</span></p>
</body>
</html>
推荐答案
这篇关于Javascript Google earth api的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
查看全文
