Javascript 如何使用GoogleEarth API插件对网站进行编码，该插件描述了用户可以切换的多个KMZ文件？
因此，我目前正在尝试创建一个网页，用户可以在KMZ（将有8个）文件之间切换（这些文件描述了在GIS中制作的加拿大彩色编码地图，然后转换为KMZ）。我希望这个网站的外观可以在www.mapathy.ca上看到，但是在那里有切换选项！这就是我遇到的问题，我可以找到类似的问题，其中有代码选项用于切换这些KMZ层，但我无法将它们放入现有的html文件中。每当我尝试去做的时候，我似乎让谷歌地球的窗口消失了。我将包括我的整个HTML，因为它目前的状态。我非常欣赏任何见解Javascript 如何使用GoogleEarth API插件对网站进行编码，该插件描述了用户可以切换的多个KMZ文件？,javascript,html,google-earth-plugin,Javascript,Html,Google Earth Plugin,因此，我目前正在尝试创建一个网页，用户可以在KMZ（将有8个）文件之间切换（这些文件描述了在GIS中制作的加拿大彩色编码地图，然后转换为KMZ）。我希望这个网站的外观可以在www.mapathy.ca上看到，但是在那里有切换选项！这就是我遇到的问题，我可以找到类似的问题，其中有代码选项用于切换这些KMZ层，但我无法将它们放入现有的html文件中。每当我尝试去做的时候，我似乎让谷歌地球的窗口消失了。我将包括我的整个HTML，因为它目前的状态。我非常欣赏任何见解 <!doctype html
<!doctype html>
<html>
<head>
<link href='http://fonts.googleapis.com/css?family=News+Cycle:400,700' rel='stylesheet' type='text/css'>
<title>Mapathy</title>
<script type="text/javascript" src="https://www.google.com/jsapi"> </script>
<style>
/* normalize.css 2011-06-23T00:50 UTC //github.com/jonathantneal/normalize.css */
article,aside,details,figcaption,figure,footer,header,hgroup,nav,section{display:block}html{cursor:default;font-size:100%;overflow-y:scroll;-webkit-tap-highlight-color:transparent;-ms-text-size-adjust:100%;-webkit-text-size-adjust:100%}body,form,input,button,select,textarea{font-size:100%;margin:0}a,a:active,a:hover{outline:none}a:focus{outline:thin dotted}abbr{_border-bottom:expression(this.title ? '1px dotted':'none')}abbr[title]{border-bottom:1px dotted}b,strong{font-weight:bold}dfn{font-style:italic}mark{background:#FF0;color:#000}pre,code,kbd,samp{font-family:monospace,monospace;_font-family:'courier new',monospace;font-size:1em}pre{white-space:pre;white-space:pre-wrap;word-wrap:break-word}q{quotes:none}q:before,q:after{content:'';content:none}small,sub,sup{font-size:75%}sub,sup{line-height:0;position:relative;vertical-align:baseline}sup{top:-0.5em}sub{bottom:-0.25em}nav ul{list-style:none}audio[controls],canvas,video{display:inline-block;*display:inline}audio{display:none;_display:expression(this.controls ? 'inline':'none');*zoom:1}audio[controls]{display:inline-block}img{border:0;-ms-interpolation-mode:bicubic}svg:not(:root){ overflow:hidden}legend{*margin-left:-7px}button,input,select,textarea{vertical-align:baseline;*vertical-align:middle}button,input{line-height:normal;_overflow:expression(this.type == 'button|reset|submit' ? 'visible':'')}button,input[type="button"],input[type="reset"],input[type="submit"]{overflow:visible;-webkit-appearance:button}input[type="checkbox"],input[type="radio"]{box-sizing:border-box}input[type="search"]{-webkit-appearance:textfield;-moz-box-sizing:content-box;-webkit-box-sizing:content-box;box-sizing:content-box}input[type="search"]::-webkit-search-decoration{ -webkit-appearance:none}button::-moz-focus-inner,input::-moz-focus-inner{border:0;padding:0}textarea{overflow:auto;vertical-align:top}table{border-collapse:collapse;border-spacing:0}
body {
color: #151412;
font-family: Helvetica, Arial, sans-serif;
}
h1 {
font-size: 50px;
}
h2{
font-size: 36px;
}
p {
line-height: 1.4;
}
img.profile1 {
border: 1px solid #4C4B47;
width: 200px;
height:200px;
border-radius: 50%;
padding: 5px;
}
img.GE2008 {
border: 3px solid #4C4B47;
width: 800px;
height: 600px;
}
img.favourite {
border: 2px solid #4C4B47;
width: 200px;
height: 200px;
border-radius: 50%;
padding: 5px;
margin: 15px;
}
img.logo {
margin: 0 auto;
display: block;
}
section.banner {
padding-top: 100px;
padding-bottom: 100px;
background-image: url('images/tweed.png');
text-align: center;
}
section.banner h1 {
font-size: 45px;
text-transform: uppercase;
padding: 2px;
}
section.banner h2 {
padding-top: 10px;
}
script.map {
background-image: #000;
float: center;
overflow: hidden;
text-align: center;
border: 300px solid #4C4B47;
width: 600px;
height: 400px;
}
section.about {
background-image: #000;
float: center;
overflow: hidden;
text-align: center;
}
section.moreinfo {
background-image: #000;
float: center;
overflow: hidden;
text-align: center;
}
script.map {
text-align: center;
}
section.about h2 {
text-align: center;
}
section.contact {
background-image: #000;
overflow: hidden;
text-align: center;
}
section.social {
background-image: #000;
overflow: hidden;
text-align: center;
}
section.favourites {
background-image: #000;
overflow: hidden;
text-align: center;
}
section.box {
padding: 50px 100px;
}
section.banner {
background-attachment: fixed;
}
h1, h2, h3, h4, p {
font-family: 'News Cycle', sans-serif;
}
.menu {
list-style: none;
padding: 0;
margin: 0;
text-align: center;
border-bottom: 1px solid #434A5C;
background: #ffffff;
position: fixed;
top: 0;
left: 0;
width: 100%;
}
.menu li {
display: inline-block;
padding: 20px 35px;
}
.menu a {
text-decoration: none;
color: #333333;
text-transform: uppercase;
font-weight: bold;
font-family: 'News Cycle', sans-serif;
}
</style>
</head>
<body>
<ul class="menu">
<li><a href="#about">About</a></li>
<li><a href="#moreinfo">More Information</a></li>
<li><a href="#contact">Contact</a></li>
<li><a href="#favourites">Favourites</a></li>
</ul>
<section class= "banner">
<h1>Mapathy</h1>
<h2>A re-conceptualization of the declining voter turnout rates in Canada</h2>
</section>
<div class="map" id="map3d"></div>
<script class="map" type="text/javascript">
var ge;
google.load("earth", "1", {"other_params":"sensor=false"});
function init() {
google.earth.createInstance('map3d', initCB, failureCB);
}
function initCB(instance) {
ge = instance;
ge.getWindow().setVisibility(true);
addKmlFromUrl('https://sites.google.com/site/mapathy2/kmz-files/1988eqintkmz.kmz?attredirects=0&d=1');
}
function addKmlFromUrl(kmlUrl) {
var link = ge.createLink('');
link.setHref(kmlUrl);
var networkLink = ge.createNetworkLink('');
networkLink.setLink(link);
networkLink.setFlyToView(true);
ge.getFeatures().appendChild(networkLink);
}
function failureCB(errorCode) {
}
google.setOnLoadCallback(init);
</script>
<section id= "about" class= "about box">
<h2>About this project</h2>
<p>The following maps depict the declining voter turnout rate being witnessed in Canada. Voter turnout refers to the percentage of eligible voters who cast a ballot in an election. Areas marked white (1.00), are where 54% or less of eligible voters cast a ballot, areas marked grey (2.00), are where between 55-74% of eligible voters cast a ballot, and areas marked black (3.00), are where 75% or more eligible voters cast a ballot. </p>
</section>
<section id= "moreinfo" class= "moreinfo box">
<h3>More Information</h3>
<a href="http://www.elections.ca/content.aspx?section=vot&document=index&lang=e">Elections Canada Official Information for Voters </a>
<p>for more information on the voting process & ways to vote in Canada</p>
<a href="http://www.elections.ca/content.aspx?section=ele&document=index&lang=e">Elections Canada Past Elections </a>
<p>to learn more about historical voter turnout rates.</p>
</section>
<section id= "contact" class= "contact box">
<h4>Contact Owner</h4>
<img src="images/profile1.png" class="profile1">
</section>
<section class= "social box">
<a href="http://www.twitter.com/akrichardson"><img src="images/twitter.png"></a>
<a href="http://ca.linkedin.com/in/annerichardson1"><img src="images/linkedin.png"></a>
<p>Note: This webpage is part of a final Master's Research project for the Communication and Culture program at Ryerson University. All Rights Reserved.</p>
</section>
<section id="favourites" class= "favourites box">
<h4>My Favourite Things</h4>
<img src="images/empirebiscuit.jpg" class="favourite">
<img src="images/candy.jpg" class="favourite">
<img src="images/algonquin.jpg" class="favourite">
</section>
</body>
</html>
马帕西
/*normalize.css 2011-06-23T00:50 UTC//github.com/jonathantneal/normalize.css*/
文章、旁白、详细信息、figcaption、数字、页脚、页眉、hgroup、nav、section{display:block}html{cursor:default；字体大小：100%；overflow-y:scroll；-webkit点击突出显示颜色：透明；-ms文本大小调整：100%；-webkit文本大小调整：100%}正文、表单、输入、按钮、选择、文本区域{字体大小：100%；边距：0}a、a:active a:hover{outline:none}a:focus{大纲：细点}缩写{u border-bottom:expression（this.title？'1px-dottered'：'none'）}缩写[title]{边框底部：1px-dottered}b，强{字体重量：粗体}dfn{字体样式：斜体}标记{背景：#FF0；颜色：#000}pre code，kbd，samp{字体系列：monospace，monospace；{u字体系列：'courier new monospace'，monospace；字体大小：1em}pre{空白：pre；空白：pre-wrap；单词wrap:break-word}q{quotes:none}q:before，q:after{content:''；content:none}小的，小的，小的，小的，小的，小的，小的，小的，小的，小的，小的，小的，小的，小的，小的，小的，小的，小的，小的，小的，小的，小的，小的，小的，小的，小的，小的，小的，小的，小的，小的，小的，小的，小的，小的，小的，小的，小的，小的，小的，小的，小的，小的，小的，小的，小的，小的，小的{display:none；{u display:expression（this.controls？'inline'：'none'）；*缩放：1}音频[控件]{display:inline block}img{border:0；-ms插值模式：双三次}svg:not（：root）{溢出：隐藏}图例{*左边距：-7px}按钮，输入，选择，文本区域{垂直对齐：基线；*垂直对齐：中间}按钮，输入{线高：正常；\u溢出：表达式（this.type=='button | reset | submit'？'visible'：''）按钮，输入[type=“button”]，输入[type=“reset”]，输入[type=“submit”]{溢出：可见；-webkit外观：button}输入[type=“checkbox”]，输入[type=“radio”]{框大小：边框框}输入[type=“search”]{-webkit外观：textfield；-moz框大小：content框；-webkit框大小：content框大小：content框大小：content框}input[type=“search”]：：-webkit搜索装饰{-webkit外观：none}按钮：：-moz焦点内部，输入：：-moz焦点内部{边框：0；填充：0}textarea{溢出：自动；垂直对齐：top}表格{边框折叠：折叠；边框间距：0}
身体{
颜色：#151412；
字体系列：Helvetica、Arial、无衬线字体；
}
h1{
字体大小：50px；
}
氢{
字体大小：36px；
}
p{
线高：1.4；
}
img.profile1{
边框：1px实心#4C4B47；
宽度：200px；
高度：200px；
边界半径：50%；
填充物：5px；
}
img.GE2008{
边框：3px实心#4C4B47；
宽度：800px；
高度：600px；
}
最爱{
边框：2px实心#4C4B47；
宽度：200px；
高度：200px；
边界半径：50%；
填充物：5px；
利润率：15px；
}
img.logo{
保证金：0自动；
显示：块；
}
第1节横幅{
填充顶部：100px；
填充底部：100px；
背景图片：url（'images/tweed.png'）；
文本对齐：居中；
}
第1节横幅h1{
字体大小：45px；
文本转换：大写；
填充：2px；
}
第6.h2节{
填充顶部：10px；
}
script.map{
背景图像：#000；
浮动：中心；
溢出：隐藏；
文本对齐：居中；
边框：300px实心#4C4B47；
宽度：600px；
高度：400px；
}
第1节关于{
背景图像：#000；
浮动：中心；
溢出：隐藏；
文本对齐：居中；
}
section.moreinfo{
背景图像：#000；
浮动：中心；
溢出：隐藏；
文本对齐：居中；
}
script.map{
文本对齐：居中；
}
第2节关于h2{
文本对齐：居中；
}
第1节联系人{
背景图像：#000；
溢出：隐藏；
文本对齐：居中；
}
第1节社会{
背景图像：#000；
溢出：隐藏；
文本对齐：居中；
}
第1节最喜爱的{
背景图像：#000；
溢出：隐藏；
文本对齐：居中；
}
剖面图框{
填充：50px 100px；
}
第1节横幅{
背景附件：固定；
}
h1，h2，h3，h4，p{
字体系列：“新闻周期”，无衬线；
}
.菜单{
列表样式：无；
填充：0；
保证金：0；
文本对齐：居中；
边框底部：1px实心#434A5C；
背景：#ffffff；
位置：固定；
排名：0；
左：0；
宽度：100%；
}
李先生{
显示：内联块；
填充：20px 35px；
}
.菜单a{
文字装饰：无；
颜色：#333333；
文本转换：大写；