gpt4 book ai didi

javascript - 如何在外部文件中存储谷歌地图选项

转载 作者:行者123 更新时间:2023-11-30 00:10:59 25 4
gpt4 key购买 nike

我正在使用 Google Maps API v3,我想将 map 选项存储在外部 JS 文件中,并与包含谷歌地图的其他页面共享 map 选项。假设有两个不同的页面,它们各自的 google map 指向不同的位置,并且您希望通过设置一些控制选项使这些 map 具有相同的外观和感觉。

我尝试过的:

a.html

<!DOCTYPE html>
<html>
<head>
<style>
#map {width: 500px; height: 500px;}
</style>
</head>
<body>
<div id="map"></div>
<script src="map-options.js"></script>
<script>
function initMap() {
var map = new google.maps.Map(document.getElementById('map'), MY_MAP_OPTIONS);
map.setCenter({lat: 40.782821, lng: -73.965596}); //New York
}
</script>
<script src="https://maps.googleapis.com/maps/api/js?key=YOUR_API_KEY&callback=initMap" async defer></script>
</body>
</html>

还会有一些其他页面,如 b.htmlc.html 等指向不同的位置。

map-options.js

var MY_MAP_OPTIONS = {
zoom: 10,
mapTypeControl: false,
streetViewControl: false,
zoomControl: true,
zoomControlOptions: {
position: google.maps.ControlPosition.RIGHT_TOP
}
};

显然,这些代码行不通。问题是 map-options.js 中的 position: google.maps.ControlPosition.RIGHT_TOP;浏览器不知道那是什么,因为在加载 map-options.js 时 Google Maps 库尚未加载。

有解决这个问题的办法吗?或者,有没有其他方法可以与其他页面共享 map 选项,避免在多个页面中编写相同的代码?

最佳答案

您可以尝试更改加载脚本的顺序并在加载正文时调用 initMap 函数,而不是在加载谷歌地图库时调用。

这样谷歌地图库和你的外部 js 都会在调用 initMap() 之前被加载。

<!DOCTYPE html>
<html>
<head>
<style>
#map {width: 500px; height: 500px;}
</style>
</head>
<body onload="initMap()">
<div id="map"></div>
<script src="https://maps.googleapis.com/maps/api/js?key=YOUR_API_KEY">
<script src="map-options.js"></script>
<script>
function initMap() {
var map = new google.maps.Map(document.getElementById('map'), MY_MAP_OPTIONS);
map.setCenter({lat: 40.782821, lng: -73.965596}); //New York
}
</script>
</script>
</body>
</html>

关于javascript - 如何在外部文件中存储谷歌地图选项,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/36515303/

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