所以我目前正在尝试创建一个网页，用户可以在KMZ（将有8个）文件之间切换（描绘加拿大的彩色编码地图，然后转换为KMZ）。我希望这个网站看起来像什么，可以在www.mapathy.ca看到，但在那里有切换选项！这是我遇到问题的地方，我可以找到类似的问题，其中有代码选项为这些KMZ图层进行切换，但我无法将它们放入我现有的html文件中。每当我尝试时，我似乎都会使当前存在的GoogleEarth窗口完全消失。我将目前包含我的整个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>
答案 0 :(得分：0)
如果您使用预制的KML文件并且不实时更改，则使用fetchKML切换ON和OFF比使用networkLink（正如您所做）更容易
查看此Google演示
https://code.google.com/apis/ajax/playground/#fetch_kml_(interactive,_checkboxes)