javascript - 使用 javaScript 在新窗口中插入带有一些谷歌地图内容的代码

标签 javascript jquery html css google-maps

我基本上是根据点击的按钮创建一个带有谷歌地图和标题的新页面。如果复制/粘贴到 html 文件中,则 newhtml 变量中的 html 有效,但由于某种原因不适用于 document.write() 。我知道问题与 newhtml 变量中的最后一个脚本有关。有谁知道为什么它不起作用?

测试.js

function initialize() {
        var mapCanvas = document.getElementById('map-canvas');
        var mapOptions = {
          center: new google.maps.LatLng(44.5403, -78.5463),
          zoom: 8,
          mapTypeId: google.maps.MapTypeId.ROADMAP
        }
        var map = new google.maps.Map(mapCanvas, mapOptions)
      }
      google.maps.event.addDomListener(window, 'load', initialize);

open_event_test.html

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8"> 
<script src="https://maps.googleapis.com/maps/api/js"></script>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>
<title>Bee Map 2nd Level</title>
</head>

<body>
<h1>Bee Map Proof-of-Concept</h1>

<h3>Carbon County</h3>
<button onclick="myFunction('Bombus balteatus')"><em>Bombus balteatus</em> Dahlbom</button>

<button onClick="myFunction('Bombus auricomus')"><em>Bombus auricomus</em> (Robertson)</button>

<script>
function myFunction(species) 
{
    var newhtml = '<!DOCTYPE html><html><meta charset="utf-8"><head><script src="https://maps.googleapis.com/maps/api/js"><\/script><script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"><\/script><title>'+species+'<\/title><style>#map-canvas{width:400px;height:300px;}</style><\/head><body><h1><em>'+species+'</em> in County</h1><div id="map-canvas"></div><div id="loc_info"></div><script type="text/javascript" src="test.js"><\/script><\/body><\/html>';
	console.log(newhtml);
	var newWindow = window.open(species, '_blank');
	newWindow.document.write(newhtml);
	
	
}
</script>

</body>
</html>

最佳答案

好像你的斜杠放错地方了

var newhtml = '<!DOCTYPE html>
  <html><meta charset="utf-8">
    <head><script src="https://maps.googleapis.com/maps/api/js">

 ******
   <\/script>
 ********
   <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"><\/script><title>'+species+'</title><style>#map-canvas{width:400px;height:300px;}</style></head><body><h1><em>'+species+'</em> in County</h1><div id="map-canvas"></div><div id="loc_info"></div><script type="text/javascript" src="species_county_map.js"><\/script></body></html>';

关于javascript - 使用 javaScript 在新窗口中插入带有一些谷歌地图内容的代码,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/34423417/

相关文章:

javascript - 将单独的 js 文件与多个 jquery (document).ready() 事件统一的正确方法

jquery 事件检查 - 如果选择器 css 发生变化(显示 block /无)

javascript - 带有子菜单和平滑滚动的粘性导航

html/css 盒装内容是 "annoyed"应该在它下面的文本

javascript - Jquery分隔十进制数

javascript - WebGL : data to non square alpha texture

jquery - "$.something"在jquery中是什么意思?

javascript - 通过使用 jquery 检查选​​中哪个单选按钮来执行事件

javascript - 自动滚动加载 html 页面

javascript - 在javascript settimeout中依次调用两个函数