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

How to store google map options in an external file

本文关键字：存储 谷歌地图 选项 文件 外部      更新时间：2024-04-01

我正在使用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
    }
};

显然，这些代码不起作用。问题是map-options.js中的position: google.maps.ControlPosition.RIGHT_TOP；浏览器不知道这是什么，因为在加载CCD_ 7时谷歌地图库还没有加载。

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

您可以尝试更改加载脚本的顺序，并在加载body时调用initMap函数，而不是在加载google map库时调用。

这样一来，谷歌地图库和外部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>
相关文章：