个人中心
gpt4 book ai didi

javascript - KML 文件已加载但背景 map 不可见

转载 作者：行者123 更新时间：2023-11-30 06:48:11 24 4
gpt4 key购买 nike

这是我用来在 Google map 中显示 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 文件已加载，但背景 map 不可见。如何显示混合背景图？

最佳答案

我以前遇到过这个问题，当时我刚开始使用 Google Maps API V3。如果您使用 HTML 5 ( using just the doctype element as they show in their "Hello World" map ) 以外的任何文档类型，就会出现这种确切的行为。 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&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 的尺寸指定为 600 像素宽和 400 像素高。我知道你在使用 WordPress 时有一些限制，所以上面的很多 HTML 实际上是由它生成的，而不是你手动编辑的。我唯一可以猜测的是，有些东西正在修改您的 DIV 中元素的 z-index。将上面的 HTML 放在 Web 服务器上可以 100% 工作。

关于javascript - KML 文件已加载但背景 map 不可见，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/4095447/

24 4 0
文章推荐： javascript - Facebook JS (FBJS) 事件监听器
文章推荐： php - 发送数据后创建 div 的简单 jQuery Ajax 表单
文章推荐： javascript - 稍后在不使用 .prototype 的情况下将其他功能添加到类中
文章推荐： Javascript 获取变量名
行者123
个人简介

我是一名优秀的程序员,十分优秀！

滴滴打车优惠券免费领取
滴滴打车优惠券
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com