Menu
×
   ❮     
HTML CSS JAVASCRIPT SQL PYTHON JAVA PHP HOW TO W3.CSS C C++ C# BOOTSTRAP REACT MYSQL JQUERY EXCEL XML DJANGO NUMPY PANDAS NODEJS R TYPESCRIPT ANGULAR GIT POSTGRESQL MONGODB ASP AI GO KOTLIN SASS VUE DSA GEN AI SCIPY AWS CYBERSECURITY DATA SCIENCE
     ❯   

Google 地图 控件


Google 地图 - 默认控件

当显示标准的 Google 地图时,它会带有默认的控件集

  • 缩放 - 显示一个滑块或 "+/-" 按钮来控制地图的缩放级别
  • 平移 - 显示一个平移控件来平移地图
  • 地图类型 - 允许用户在地图类型之间切换(路线图和卫星图)
  • 街景 - 显示一个 Pegman 图标,可以将其拖放到地图上以启用街景

Google 地图 - 更多控件

除了默认控件之外,Google 地图还具有

  • 比例尺 - 显示地图比例尺元素
  • 旋转 - 显示一个小的圆形图标,允许您旋转地图
  • 概览地图 - 显示一个缩略图概览地图,反映当前地图视窗在一个更广阔的区域内

您可以在创建地图时(在 MapOptions 中)指定要显示哪些控件,或者通过调用 setOptions() 来更改地图的选项。


Google 地图 - 禁用默认控件

您可能希望关闭默认控件。

要做到这一点,请将地图的 disableDefaultUI 属性(在地图选项对象中)设置为 true

示例

var mapOptions {disableDefaultUI: true}


Google 地图 - 打开所有控件

某些控件默认情况下会出现在地图上;而其他控件则不会出现,除非您设置它们。

在地图上添加或删除控件是在地图选项对象中指定的。

将控件设置为 true 以使其可见 - 将控件设置为 false 以隐藏它。

以下示例将所有控件“打开”

示例

var mapOptions {
  panControl: true,
  zoomControl: true,
  mapTypeControl: true,
  scaleControl: true,
  streetViewControl: true,
  overviewMapControl: true,
  rotateControl: true
}

Google 地图 - 修改控件

几个地图控件是可配置的。

可以通过指定控件选项字段来修改控件。

例如,用于修改缩放控件的选项在 zoomControlOptions 字段中指定。zoomControlOptions 字段可能包含

  • google.maps.ZoomControlStyle.SMALL - 显示迷你缩放控件(只有 + 和 - 按钮)
  • google.maps.ZoomControlStyle.LARGE - 显示标准缩放滑块控件
  • google.maps.ZoomControlStyle.DEFAULT - 根据设备和地图大小选择最佳缩放控件

示例

zoomControl: true,
zoomControlOptions: {
    style: google.maps.ZoomControlStyle.SMALL
}

注意:如果修改控件,请始终先启用控件(将其设置为 true)。

另一个可配置的控件是地图类型控件。

用于修改控件的选项在 mapTypeControlOptions 字段中指定。mapTypeControlOptions 字段可能包含:

  • google.maps.MapTypeControlStyle.HORIZONTAL_BAR - 为每种地图类型显示一个按钮
  • google.maps.MapTypeControlStyle.DROPDOWN_MENU - 通过下拉菜单选择地图类型
  • google.maps.MapTypeControlStyle.DEFAULT - 显示“默认”行为(取决于屏幕大小)

示例

mapTypeControl: true,
mapTypeControlOptions: {
  style: google.maps.MapTypeControlStyle.DROPDOWN_MENU
}

您也可以使用 ControlPosition 属性定位控件

示例

mapTypeControl: true,
mapTypeControlOptions: {
  style: google.maps.MapTypeControlStyle.DROPDOWN_MENU,
  position: google.maps.ControlPosition.TOP_CENTER
}

×

Contact Sales

If you want to use W3Schools services as an educational institution, team or enterprise, send us an e-mail:
[email protected]

Report Error

If you want to report an error, or if you want to make a suggestion, send us an e-mail:
[email protected]

W3Schools is optimized for learning and training. Examples might be simplified to improve reading and learning. Tutorials, references, and examples are constantly reviewed to avoid errors, but we cannot warrant full correctness of all content. While using W3Schools, you agree to have read and accepted our terms of use, cookie and privacy policy.

Copyright 1999-2024 by Refsnes Data. All Rights Reserved. W3Schools is Powered by W3.CSS.