代码之家 › 专栏 › 技术社区 › Josjojo

KML文件已加载,但背景图不可见

kml google-maps javascript

Josjojo · 技术社区 · 15 年前

这是我用来在Google Maps中显示KML文件的:

<div id="map_canvas" style="width: 600px; height: 400px"></div>

function map_initialize() {
  var myLatlng = new google.maps.LatLng(52.200874,6.009521);
  var myOptions = {
    zoom: 7,
    center: myLatlng,
    mapTypeId: google.maps.MapTypeId.HYBRID
  };

  var map = new google.maps.Map(
      document.getElementById("map_canvas"),
      myOptions);

  var nyLayer = new google.maps.KmlLayer(
      'http://maps.google.com/maps/ms?msa=0&msid=114680467578999980893.00049426282c85822d40e&output=kml');
  nyLayer.setMap(map);
}

jQuery(function(){map_initialize()});

http://www.taizefriesland.nl/?page_id=7

文件已加载但背景不可见。如何显示hibryd背景图?

1 回复 | 直到 15 年前

Tony Miller 15 年前

在我第一次开始使用googlemapsapiv3时,我就见过这个问题。如果您使用了HTML5以外的任何文档类型( using just the doctype element as they show in their "Hello World" map )这种确切的行为会被展示出来。自那以后,Google改进了API,实际上可以使用一个doctype,比如xhtml1.0transitional、html4.0.1strict等等。我看到您使用的是XHTML 1.0 Transitional,所以我在这个简化的示例中使用的是:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Map Test</title>
<style type="text/css">
#map_canvas {
    width: 600px;
    height: 400px;
}
</style>
<link rel='stylesheet' id='contact-form-7-css'  href='http://www.taizefriesland.nl/wp-content/plugins/contact-form-7/styles.css?ver=2.4.1' type='text/css' media='all' />
<script type='text/javascript' src='http://www.taizefriesland.nl/wp-includes/js/prototype.js?ver=1.6.1'></script>
<script type='text/javascript' src='http://www.taizefriesland.nl/wp-includes/js/scriptaculous/wp-scriptaculous.js?ver=1.8.3'></script>
<script type='text/javascript' src='http://www.taizefriesland.nl/wp-includes/js/scriptaculous/effects.js?ver=1.8.3'></script>
<script type='text/javascript' src='http://www.taizefriesland.nl/wp-content/plugins/lightbox-2/lightbox.js?ver=1.8'></script>
<script type='text/javascript' src='http://www.taizefriesland.nl/wp-includes/js/jquery/jquery.js?ver=1.4.2'></script>
<script type='text/javascript' src='http://www.taizefriesland.nl/wp-includes/js/comment-reply.js?ver=20090102'></script>
<script type="text/javascript" src="http://www.taizefriesland.nl/wp-content/plugins/cryptx/js/cryptx.js"></script>
<link rel="EditURI" type="application/rsd+xml" title="RSD" href="http://www.taizefriesland.nl/xmlrpc.php?rsd" />
<link rel="wlwmanifest" type="application/wlwmanifest+xml" href="http://www.taizefriesland.nl/wp-includes/wlwmanifest.xml" /> 
<link rel='index' title='TaizÃ© Friesland' href='http://www.taizefriesland.nl' />
<link rel='prev' title='Inschrijven Franeker/ Harlingen' href='http://www.taizefriesland.nl/?page_id=6' />
<link rel='next' title='Franeker' href='http://www.taizefriesland.nl/?page_id=11' />
<link rel='canonical' href='http://www.taizefriesland.nl/?page_id=7' />
<script type="text/javascript" src="http://maps.google.com/maps/api/js?sensor=false"></script>
<script type="text/javascript">
function map_initialize() {
    var myLatlng = new google.maps.LatLng(52.200874,6.009521);
    var myOptions = {
        zoom: 7,
        center: myLatlng,
        mapTypeId: google.maps.MapTypeId.HYBRID
    };

    var map = new google.maps.Map(
      document.getElementById("map_canvas"),
      myOptions);

    var nyLayer = new google.maps.KmlLayer('http://maps.google.com/maps/ms?msa=0&msid=114680467578999980893.00049426282c85822d40e&output=kml');
    nyLayer.setMap(map);
}

jQuery(function(){map_initialize()});
</script>
</head>
<body>



<div class="post-headline"><h1>TaizÃ© jongerengebeden</h1></div>
<div class="post-bodycopy clearfix">
<p>Uit het feit dat TaizÃ© wekelijks duizenden jongeren ontvangt, blijkt dat het jongeren aanspreekt om bij een gebed in de sfeer van TaizÃ© aanwezig te zijn.<br>
Verschillende groepen willen jongeren de gelegenheid bieden om dichter bij huis een gebed bij te wonen.<br>
Het TaizÃ©gebed is oecumenisch: het wordt meestal voorbereid door jonge mensen die afkomstig zijn uit verschillende kerken.</p>
<p><em>Er wordt niets van je verwacht,<br>
er wordt je niets gevraagd.<br>
Er ligt alleen een uitnodiging.</em></p>

<div id="map_canvas" style="width: 600px; height: 400px">
<p><a href="http://maps.google.com/maps/ms?ie=UTF8&amp;hl=nl&amp;msa=0&amp;msid=114680467578999980893.00049426282c85822d40e&amp;t=h&amp;z=8" onclick="javascript:_gaq.push(['_trackEvent','outbound-article','maps.google.com']);">De kaart openen in Google Maps.</a></p>
</div>
</body>
</html>

为了帮助查看它是否有所不同,我已经加载了您的页面使用的所有JS-lib和CSS。作为第一个破解,尝试做我做的,并添加一个显式的样式定义(但保留内联定义),它将#map_画布的尺寸指定为600px宽和400px高。我知道当你使用WordPress时会有一些限制,所以上面的很多HTML实际上是由它生成的,而不是你手工编辑的。我唯一能猜到的是,有东西修改了DIV中元素的z-index。