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背景圖？

來源

2010-11-04 Josjojo

它不需要處理您的實際地圖代碼，對我來說工作正常。 – Galen 2010-11-04 15:50:06

我剛開始使用Google Maps API V3時，就已經看到過這個問題。如果您使用HTML 5以外的任何文檔類型（using just the doctype element as they show in their "Hello World" map），則會顯示此確切行爲。 Google從那時起就改進了API，並且實際上可以使用DOCTYPE，例如XHTML 1.0 Transitional，HTML 4.0.1 Strict等類型。我看到你使用XHTML 1.0過渡，所以這就是我在這裏曾經砍下例如：

<!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％。

來源

2010-11-06 17:33:04

我仍然不知道如何使地圖可見。託尼，我也試過你的建議，現在我可以看到地圖。現在我再也看不到我的導航了。 – Josjojo 2010-12-03 14:14:33

KML文件加載，但背景圖不可見

回答

相關問題