Google Maps JS API v3 - Add Map Types

Google Maps JS API v3 - Add Map Types

本文关键字：Add Map Types v3 Maps JS API Google      更新时间：2023-09-26

如何将混合、卫星、地形和物理视图模式添加到使用 Gmap Javascript API v3 渲染的 Google 地图中？

我的代码如下所示：

var myLatlng = new google.maps.LatLng(47.283902, 11.526825);
var mapOptions = {
  zoom: 14,
  center: myLatlng,
  mapTypeId: google.maps.MapTypeId.ROADMAP,
  mapTypeControlOptions: {
    mapTypes: [google.maps.MapTypeId.ROADMAP, google.maps.MapTypeId.HYBRID, google.maps.MapTypeId.SATELLITE, google.maps.MapTypeId.TERRAIN]
  }
};
directionsService = new google.maps.DirectionsService();
directionsDisplay = new google.maps.DirectionsRenderer();
map = new google.maps.Map(document.getElementById("gmap"), mapOptions);
directionsDisplay.setMap(map);

但这似乎不起作用！

在将一些旧的 V2 地图转换为 V3 时，我正在研究同样的问题，因为谷歌将在 5 月 19 日杀死 V2。在 V2 中，这是一个选项，因此要求我重新添加它。

但是，在 V3 中，卫星和混合动力是相同的。卫星视图的标签是打开的，这确实是唯一的区别。因此，从功能上讲，没有必要为卫星视图和混合视图设置两个按钮。卫星按钮有一个下拉菜单，其中包含用于禁用这些标签的标签复选框选项。

您当然可以为它编写一个自定义按钮，但它是完全多余的。

ROADMAP、TERRAIN、SATELLITE和HYBRID是基本的地图类型，不需要添加它们。如果要在它们之间进行选择，则必须使用 map 选项mapTypeControl启用它（布尔值：Map 类型控件的初始启用/禁用状态）。

例如，使用：

var mapOptions = {
    zoom: 14,
    center: myLatlng,
    mapTypeId: google.maps.MapTypeId.ROADMAP,
    mapTypeControl: true
};

您将在窗口的右上角获得地图控件。然后，您可以选择您喜欢的地图类型。

相关文章：