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

Inserting code with some google map stuff in a new window with javaScript

本文关键字：谷歌地图 代码 插入 新窗口 javaScript 窗口 使用      更新时间：2023-09-26

我基本上是在根据点击的按钮创建一个带有谷歌地图和标题的新页面。如果将newhtml变量中的html复制/粘贴到html文件中，则该变量可以工作，但由于某些原因，不能使用document.write（）。我知道这个问题与newhtml变量中的最后一个脚本有关。有人知道为什么它不起作用吗？

test.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>';

代码片段对我来说是有效的，因为它打开了一个关于物种和国家的新窗口，但由于您尚未实现它，因此没有显示地图（这个问题可能与地图本身无关）。

我认为您最好遵循Google Maps API JavaScript入门。当页面被实例化时，调用一个JS函数，该函数将把Map对象实例化到页面中。

希望这能有所帮助！

相关文章：