Google Maps 控件



  • 默认控件

    叠加层是地图上绑定到纬度/显示标准谷歌地图时,它带有默认控件集:
    • Zoom-显示滑块或“ +/-”按钮以控制地图的缩放级别
    • Pan-显示用于平移地图的平移控件
    • MapType-让用户在地图类型(路线图和卫星图)之间切换
    • Street View-显示一个衣夹人图标,可以将其拖动到地图上以启用街景视图
    除了默认控件外,谷歌地图还具有:
    • Scale-显示地图比例尺元素
    • Rotate-显示一个小的圆形图标,可让您旋转地图
    • Overview Map-显示缩略图总览图,以反映更大范围内的当前地图视口
    您可以指定在创建地图时要显示的控件(在MapOptions内部),也可以通过调用 setOptions() 来更改地图的选项。
  • 禁用默认控件

    您可能希望关闭默认控件。
    为此,请将 Map 的 disableDefaultUI 属性(在Map options对象中)设置为 true:
    var mapOptions {disableDefaultUI: true}
    
  • 打开所有控件

    默认情况下,某些控件会显示在地图上;除非您进行设置,否则其他人不会出现。
    在地图选项对象中指定在地图中添加或删除控件。
    将控件设置为 true 以使其可见-将控件设置为 false 以将其隐藏。
    下面的示例将“打开”所有控件:
    var mapOptions {
      panControl: true,
      zoomControl: true,
      mapTypeControl: true,
      scaleControl: true,
      streetViewControl: true,
      overviewMapControl: true,
      rotateControl: true
    }
    
  • 修改控件

    一些地图控件是可配置的。
    可以通过指定控件选项字段来修改控件。
    例如,在 zoomControlOptions 字段中指定了用于修改 Zoom 控件的选项;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
    }