gpt4 book ai didi

javascript - 如何使用 javascript 从外部 html 页面加载 div?

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

我在一个名为 map 的 div 中有一个带有谷歌地图的 html 页面。

  var map = new google.maps.Map(document.getElementById('map'),mapOptions);

现在我想在多个网页中使用相同的谷歌地图。如何在其他页面中引用此 div。

例如

我有另一个这样的 html 文件

<html><head></head>
<body><div><!--How do I get the map here--></div>
</body></html>

可以使用 Jquery 吗?

---编辑----

所以我有一个名为 myscript.js 的脚本它有一个

jQuery(文档).ready(函数(){

反过来有一个

var map = new google.maps.Map(document.getElementById('map'),mapOptions);

那么我如何在其他地方加载这个脚本呢?

最佳答案

您不会引用此 div。加载页面时会即时生成 map 。

如果您考虑过使用 $('#element').load('map.html #map) - 它会从加载的内容中剥离所有脚本,因此生成脚本不会可以运行。

因为它应该是同一张 map ,请尝试使用 jQuery.getScript()?

// gmaps.js
function generateMap() {
//your custom logic
}

// html file
<html><head></head>
<body><div id="gmap"></div>
<script>
$.getScript('gmaps.js', function() {
// Call custom function defined in script
generateMap();
});

</script>
</body></html>

您还可以在此处查看有关使用 jQuery.getScript() 和谷歌地图的 stackoverflow 示例:

编辑 - 更新示例

// map.js
function generateMap()
{
map = new GMap2(document.getElementById("div_map"));
map.addControl(new GSmallMapControl());
map.addControl(new GMapTypeControl());
var latLong = new GLatLng(parseFloat(52.2322549), parseFloat(21.0387957));
var marker = new GMarker(latLong, {draggable : false});
map.addOverlay(marker);
map.setCenter(latLong, 15);
}


// map.html - ! CHANGE API KEY !
<html>
<head>
<title>Google Map sample</title>
<script type="text/javascript" src="js/jquery-1.7.1-min.js"></script>
<script src="http://maps.google.com/maps?file=api&amp;v=2&amp;key=PUT_YOUR_KEY_HERE&sensor=false" type="text/javascript"></script>
</head>
<body>
<div id="div_map" style="width:500px;height:400px;background-color:red;"></div>
<script type="text/javascript">
$.getScript('map.js', function() {
generateMap();
});
</script>
</body>
</html>

关于javascript - 如何使用 javascript 从外部 html 页面加载 div?,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/8807708/

24 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com