控件概述

Google Maps 上的地图包含用户界面元素，可以让用户通过地图进行交互。这些元素称为“控件”。您可以在 Google Maps API 应用程序中添加这些控件的多种组合。或者，您也可以不进行任何操作，让 Google Maps API 处理所有控件行为。

Google Maps API 带有大量可以在地图中使用的内置控件：

  • 缩放控件会显示一个滑块（对于大型地图）或小型的“+/-”按钮（对于小型地图），用于控制地图的缩放级别。在非触摸的设备上，该控件默认显示在地图的左上角，而在触摸设备上则会出现在左下角。
  • 平移控件显示了用于平移地图的按钮。在非触摸的设备上，该控件默认显示在地图的左上角。您还可以使用平移控件对图像进行 45° 旋转（如果可用的话）。
  • 比例控件，用于显示地图比例元素。默认情况下，系统不会启用此控件。
  • MapType 控件，可让用户在不同的地图类型（例如 ​​ROADMAP​​ 和 ​​SATELLITE​​）之间进行切换。该控件默认显示在地图的右上角。
  • Street View 控件包含一个街景小人图标，将该图标拖动到地图上即可启用 Street View。该控件默认显示在地图的左上角。
  • 旋转控件包含一个较小的圆形图标，可让您旋转包含斜面图像的地图。该控件默认显示在地图的左上角（有关详情，请参见 ​​45° 图像​​）。
  • 总览图控件会显示一个简略的总览图，用于在更广阔区域内反映当前的地图视口。该控件默认以压缩状态显示在地图的右下角。

请注意：以前提供的导航控件已弃用，系统已将其分割为独立的缩放和平移控件。

您无法直接访问或修改这些地图控件，而应修改地图的 ​​MapOptions​​ 字段，这些字段会影响控件的可见性和显示方式。您可以在初始化地图时调整控件的显示（使用适当 ​​MapOptions​​），或者通过调用 ​​setOptions()​​ 以更改地图的选项，对地图进行动态修改。

默认情况下，系统并不会启用所有这些控件。要了解有关默认用户界面行为（以及如何修改此类行为）的信息，请参阅下面的​​默认用户界面​​部分

默认用户界面

您可能只想指定自己的地图展示 Google Maps 界面的外观（其中包括以后要添加到地图中的所有新特征或控件），而不想指定和设置单独的控件。要实现此行为，您无需进行任何操作。地图将会显示默认控件。

停用默认用户界面

有时，您可能希望关闭 API 的默认用户界面设置。要进行上述操作，请将 Map 的 disableDefaultUI 属性（在 Map options 对象中）设置为 true。此属性可停用 Google Maps API 中所有自动执行的用户界面行为。

以下代码可彻底停用默认用户界面



function initialize() {
  var myOptions = {
    zoom: 4,
    center: new google.maps.LatLng(-33, 151),
    disableDefaultUI: true,
    mapTypeId: google.maps.MapTypeId.ROADMAP  
  }
  var map = new google.maps.Map(document.getElementById("map_canvas"),
       myOptions);
}


向地图添加控件

您可能想要通过删除、添加或修改用户界面行为或控件调整您的界面，并确保即使以后进行了更新，也不会改变这种行为。如果您只想添加或修改现有的行为，您需要确保以显式的方式将相应的控件添加到自己的应用程序中。

有些控件在默认情况下会出现在地图上，而其他控件则只有在您明确提出相关请求后，才会显示出来。在地图中添加控件，或者从地图中删除控件都是在以下 ​​Map options​​ 对象的字段中指定的，您可以将这些字段设置为 ​​true​​ 以显示相应的控件，或者设置为 ​​false​​ 以隐藏相应的控件：

{
  panControl:boolean,
  zoomControl:boolean,
  mapTypeControl:boolean,
  scaleControl:boolean,
  streetViewControl:boolean,
  overviewMapControl:boolean
}
scaleControl在左下角，显示地图的比例。
以下示例对地图进行了设置，使其隐藏导航（缩放和平移）控件，同时显示比例控件。请注意，我们并未显式停用默认用户界面，因此，您可在默认用户界面行为中加入这些修改。



function initialize() {
  var myOptions = {
    zoom: 4,
    center: new google.maps.LatLng(-33, 151),
    panControl: false,
    zoomControl: false,
    scaleControl: true,
    mapTypeId: google.maps.MapTypeId.ROADMAP
  }
  var map = new google.maps.Map(document.getElementById("map_canvas"),
        myOptions);
}


...via:https://developers.google.com/maps/documentation/javascript/controls