Question

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

我尝试了什么：

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.html，c.html等指向不同的位置。

map-options.js

中的

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

显然，这些代码不起作用。 position: google.maps.ControlPosition.RIGHT_TOP中的问题是map-options.js;浏览器不知道这是什么，因为在加载map-options.js时尚未加载Google地图库。

有什么想法解决这个问题吗？或者，有没有其他方法可以与其他页面共享地图选项，避免在许多页面中编写相同的代码？

Answer 1

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

这样，在调用initMap（）之前，将加载谷歌地图库和你的外部js。

<!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>

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

1 个答案: