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

【如何使用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 initializationmapTypeId: '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 interfacemap.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 representationmap.setMapTypeId("roadmap"); map.setMapTypeId("hybrid"); map.setMapTypeId("satellite"); map.setMapTypeId("terrain");

编码愉快！