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

发布于 2024-10-01 02:33:01 字数 917 浏览 2 评论 0原文

这是我用来在 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 背景图？

原文

This is what I used to display a KML-file in Google Maps:

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

Here you can see the result:
http://www.taizefriesland.nl/?page_id=7

The KML-file is loaded but the background map is not visible. How can I show the hibryd background map?

分享到QQ

分享到微博

如果你对这篇内容有疑问，欢迎到本站社区发帖提问参与讨论，获取更多帮助，或者扫码二维码加入 Web 技术交流群。

发布评论

需要登录才能够评论，你可以免费注册一个本站的账号。

千と千尋 2024-10-08 02:33:01

当我第一次开始使用 Google Maps API V3 时，我以前就遇到过这个问题。如果您使用除 HTML 5 之外的任何文档类型（仅使用 doctype元素，如他们在“Hello World”地图中显示的），将展示这种确切的行为。从那时起，Google 改进了 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&hl=nl&msa=0&msid=114680467578999980893.00049426282c85822d40e&t=h&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 的尺寸指定为 600 像素宽和 400 像素高。我知道你使用 WordPress 时有一些限制，因此上面的很多 HTML 实际上是由它生成的，而不是你手动编辑的。我唯一能猜测的是，有一些东西修改了 DIV 中元素的 z 索引。将上述 HTML 放在 Web 服务器上，效果 100%。

I've seen this problem before, when I first started using the Google Maps API V3. If you used any document type other than HTML 5 (using just the doctype element as they show in their "Hello World" map) this exact behavior would be exhibited. Google has improved the API since then, and you can actually use a doctype such as XHTML 1.0 Transitional, HTML 4.0.1 Strict, and suchlike. I see that you're using XHTML 1.0 Transitional, so that's what I used in this cut down example:

<!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&hl=nl&msa=0&msid=114680467578999980893.00049426282c85822d40e&t=h&z=8" onclick="javascript:_gaq.push(['_trackEvent','outbound-article','maps.google.com']);">De kaart openen in Google Maps.</a></p>
</div>
</body>
</html>

To help see if it made a difference, I've loaded all the JS libs and CSS that your page is using. As a first crack, try doing what I did and adding an explicit style definition (but leave your inline one) that specifies the dimensions of #map_canvas as 600px wide and 400px high. I know there are limitations when you're using WordPress, so that a lot of the HTML above is actually generated by it, not you manually editing. The only thing I can guess is that there's something modifying the z-index of the elemnts in your DIV. Taking the above HTML and putting it on a web server works 100%.

回复收藏 0 原文

~没有更多了~