如何使用JavaScript动态更改和预览Google Maps中的地图类型

如果你正在使用允许你自定义某些地图视图的表单, 则将需要从地图类型中进行动态切换。尽管这是一个非常简单的功能, 但并非所有人都知道该怎么做。为了指导你, 我们将使用卫星视图初始化一个简单的地图, 实例将存储在map变量中：

<div id="map"></div>
<script>
    var map;

    function initMap() {
        map = new google.maps.Map(document.getElementById('map'), {
            center: {
                lat: -34.397, lng: 150.644
            }, zoom: 8, // Defining map type during the initialization
            mapTypeId: 'satellite'
        });
    }
</script>
<script src="https://maps.googleapis.com/maps/api/js?key=YOUR_API_KEY&callback=initMap" async defer></script>

现在你有了实例, 可以从map变量强制转换setMapTypeId方法。只需提供新类型作为字符串或从MapTypeId接口提供, 例如：

// Using the MapTypeId interface
map.setMapTypeId(google.maps.MapTypeId.TERRAIN);

map.setMapTypeId(google.maps.MapTypeId.SATELLITE);

map.setMapTypeId(google.maps.MapTypeId.HYBRID);

map.setMapTypeId(google.maps.MapTypeId.ROADMAP);

// Using the string representation
map.setMapTypeId("roadmap");

map.setMapTypeId("hybrid");

map.setMapTypeId("satellite");

map.setMapTypeId("terrain");

编码愉快！