Question

这就是我以前在Google地图中显示KML文件的内容：

HTML

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

的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()});

在这里你可以看到结果： http://www.taizefriesland.nl/?page_id=7

已加载KML文件，但背景地图不可见。如何显示hibryd背景图？

Answer 1

我刚开始使用Google Maps API V3之前就已经看过这个问题了。如果您使用HTML 5（using just the doctype element as they show in their "Hello World" map）以外的任何文档类型，则会显示此确切行为。从那时起谷歌就改进了API，你实际上可以使用诸如XHTML 1.0 Transitional，HTML 4.0.1 Strict等文档类型。我看到你正在使用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库和CSS。作为第一个破解，尝试做我做的并添加一个明确的样式定义（但留下你的内联一个），指定#map_canvas的尺寸为600px宽和400px高。我知道当你使用WordPress时有一些限制，所以上面的很多HTML实际上是由它生成的，而不是你手动编辑。我唯一可以猜到的是，有一些东西会改变你DIV中元素的z-index。将上述HTML并将其放在Web服务器上可以100％工作。

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

1 个答案: