菜单
×
   ❮     
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 Maps - 控件


Google Maps - 默认控件

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

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

Google Maps - 更多控件

除了默认控件外,Google Maps 还提供

  • Scale - 显示地图比例尺元素
  • Rotate - 显示一个小的圆形图标,允许你旋转地图
  • Overview Map - 显示一个缩略图概览地图,反映当前地图视口在一个更广阔区域内的位置

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


Google Maps - 禁用默认控件

你可能更希望关闭默认控件。

为此,将 Map 的 disableDefaultUI 属性(在 Map options 对象中)设置为 true

示例

var mapOptions {disableDefaultUI: true}


Google Maps - 打开所有控件

一些控件默认显示在地图上;而其他控件则不会出现,除非你进行设置。

添加或移除地图上的控件在 Map options 对象中指定。

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

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

示例

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

Google Maps - 修改控件

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

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

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

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

示例

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

注意: 如果你修改控件,请务必先启用该控件(将其设置为 true)。

另一个可配置的控件是 MapType 控件。

修改控件的选项在 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
}

×

联系销售

如果您想将 W3Schools 服务用于教育机构、团队或企业,请发送电子邮件给我们
sales@w3schools.com

报告错误

如果您想报告错误,或想提出建议,请发送电子邮件给我们
help@w3schools.com

W3Schools 经过优化,旨在方便学习和培训。示例可能经过简化,以提高阅读和学习体验。教程、参考资料和示例会不断审查,以避免错误,但我们无法保证所有内容的完全正确性。使用 W3Schools 即表示您已阅读并接受我们的使用条款Cookie 和隐私政策

版权所有 1999-2024 Refsnes Data。保留所有权利。W3Schools 由 W3.CSS 提供支持