十年代码生涯一瞬间,代码即人生!
网站正在维护,谢谢你的拜访。预计维护时间10天;一旦维护完毕,立即解封。谢谢诸位的赏光啦
2019/12/23
<返回上一级
Google 地图 API教程

Google 地图控件集


一个Google 地图 - 默认控件集设置:


Google 地图 - 默认控件集设置:

当使用一个标准的google地图,它的默认设置如下:


Google 地图 - 更多控件集

除了以上默认控件集,Google还有:

创建地图时你可以通过设置选项指定哪些控件集显示或者通过调用 setOptions() 来改变地图的设置选项。


Google 地图 - 关闭默认控件集

你可能希望能够关闭默认的控件集。

为了关闭默认控件集,设置地图的disableDefaultUI的属性为true:

实例

disableDefaultUI:true

尝试一下 »


Google 地图 - 开所有控件集

一些控件集默认显示在地图上,而其它的不会,除非你设置它们。

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

以下实例开启所有的控件:

实例

panControl:true,
zoomControl:true,
mapTypeControl:true,
scaleControl:true,
streetViewControl:true,
overviewMapControl:true,
rotateControl:true

尝试一下 »


Google 地图 - 修改控件集

某些地图控件是可配置的。通过制定控件选项域改变控件集。

F举个例子来说,修改Zoom 控件的选项在zoomControlOptions指定。zoomControlOptions包含如下3种选项:

实例

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

尝试一下 »

注意: 如果需要修改一个控件,首先开启控件(设置其为true)。

另一个控件为 MapType 控件。

MapType 控件可显示为以下 style 选项之一:

实例

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
}

尝试一下 »


Google 地图 - 自定义控件集

创建一个返回伦敦自定义控件,用于点击事件: (如果地图被拖拽):

实例

controlDiv.style.padding = '5px';
var controlUI = document.createElement('div');
controlUI.style.backgroundColor = 'yellow';
controlUI.style.border='1px solid';
controlUI.style.cursor = 'pointer';
controlUI.style.textAlign = 'center';
controlUI.title = 'Set map to London';
controlDiv.appendChild(controlUI);
var controlText = document.createElement('div');
controlText.style.fontFamily='Arial,sans-serif';
controlText.style.fontSize='12px';
controlText.style.paddingLeft = '4px';
controlText.style.paddingRight = '4px';
controlText.innerHTML = '<b>Home<b>'
controlUI.appendChild(controlText);

尝试一下 »


Google 地图 - 控件集参考手册

Google Maps API 参考手册.