google地图API开发基础(三):控件
2012年01月13日
[b]控件概述
[/b]
Google Maps 上的地图包含用户界面元素,可以让用户通过地图进行交互。这些元素称为“控件”。您可以在 Google Maps API 应用程序中添加这些控件的多种组合。或者,您也可以不进行任何操作,让 Google Maps API 处理所有控件行为。
Google Maps API 带有大量可以在地图中使用的内置控件:
[b]导航控件[/b],用于显示 Google Maps 上所使用的大型平移/缩放控件。该控件默认显示在地图的左上角。[b]比例控件[/b],用于显示地图比例元素。默认情况下,系统不会启用此控件。[b]MapType 控件[/b],可让用户在不同的地图类型(例如 ROADMAP 和 SATELLITE)之间进行切换。该控件默认显示在地图的右上角。
您不能直接访问或修改控件,而应修改地图的 MapOptions 字段,这些字段会影响控件的可见性和显示方式。您可以在初始化地图时调整控件的显示(使用适当 MapOptions),或者通过调用 setOptions() 以更改地图的选项,对地图进行动态修改。
默认情况下,系统并不会启用所有这些控件。要了解有关默认用户界面行为(以及如何修改此类行为)的信息,请参阅下面的默认用户界面部分。
[b]默认用户界面
[/b]
您可能只想指定自己的地图展示 Google Maps 界面的外观(其中包括以后要添加到地图中的所有新特征或控件),而不想指定和设置单独的控件。要实现此行为,您无需进行任何操作。地图将会显示默认控件。
默认控件集
Google Maps API 提供了以下默认控件:
控件大屏幕小屏幕iPhoneAndroid导航大型平移/缩放控件,适用于 400x350 像素以上的屏幕小型迷你缩放控件,适用于 400x350 像素以下的屏幕不存在“Android”控件MapType水平栏,适用于宽度在 320 像素以上的屏幕下拉菜单,适用于宽度在 320 像素以下的屏幕与大屏幕/小屏幕相同与大屏幕/小屏幕相同比例不存在不存在不存在不存在
此外,默认情况下,系统对所有设备都启用了键盘处理功能。
停用默认用户界面
有时,您可能希望关闭 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);
}
查看示例 (control-disableUI.html)
[b]向地图添加控件
[/b]
您可能想要通过删除、添加或修改用户界面行为或控件调整您的界面,并确保即使以后进行了更新,也不会改变这种行为。如果您只想添加或修改现有的行为,您需要确保以显式的方式将相应的控件添加到自己的应用程序中。
有些控件在默认情况下会出现在地图上,而其他控件则只有在您明确提出相关请求后,才会显示出来。在地图中添加控件,或者从地图中删除控件都是在以下 Map options 对象的字段中指定的,您可以将这些字段设置为 true 以显示相应的控件,或者设置为 false 以隐藏相应的控件:
{
navigationControl: boolean,
mapTypeControl: boolean,
scaleControl: boolean
}
请注意,您目前还不能使用 Google Maps API 第 3 版动态地添加或删除控件。这些控件必须在创建地图的过程中通过 Map options 对象进行设置。
以下示例介绍了如何将地图设置成隐藏导航控件和显示比例控件。请注意,我们并未显式停用默认用户界面,因此,您可在默认用户界面行为中加入这些修改。
function initialize() {
var myOptions = {
zoom: 4,
center: new google.maps.LatLng(-33, 151),
navigationControl: false,
scaleControl: true,
mapTypeId: google.maps.MapTypeId.ROADMAP
}
var map = new google.maps.Map(document.getElementById("map_canvas"),
myOptions);
}
查看示例 (control-simple.html)
[b]控件选项
[/b]
有些控件是可以配置的,这样,您就可以更改它们的行为或外观。例如,[b]导航控件[/b]可显示为具有完整缩放控件和平移控件的大型控件(如 Google Maps 中所示),或者显示为适用于小型设备的小型迷你缩放控件。
您可以通过在创建地图时更改 MapOptions 对象中的适当控件选项字段修改这些控件。例如,用于更改“导航”控件的选项位于navigationControlOptions 字段中。[b][/b]
[b]导航控件[/b]可显示为以下 style 选项之一:
google.maps.NavigationControlStyle.SMALL,用于显示迷你缩放控件,其中仅限 [b]+[/b] 和 [b]-[/b] 按钮。此样式适用于移动设备。google.maps.NavigationControlStyle.ZOOM_PAN,用于显示如 Google Maps 中所示带有平移控件的标准缩放滑块控件。google.maps.NavigationControlStyle.ANDROID,用于显示 Android 设备上的本地 Google Maps 应用程序中所使用的小型缩放控件。google.maps.NavigationControlStyle.DEFAULT,会根据地图的尺寸和运行地图的设备挑选合适的导航控件。
[b]MapType 控件[/b]可显示为以下 style 选项之一:
google.maps.MapTypeControlStyle.HORIZONTAL_BAR,用于在水平栏中将一组控件显示为如 Google Maps 中所示按钮。google.maps.MapTypeControlStyle.DROPDOWN_MENU,用于显示单个按钮控件,以便您从下拉菜单中选择地图类型。google.maps.MapTypeControlStyle.DEFAULT,用于显示“默认”的行为,该行为取决于屏幕尺寸,并且可能会在 API 以后的版本中有所变化。
请注意,如果您确实想要修改任何控件选项,您还是应当通过将 MapOptions 值设置为 true 以显式地启用相应的控件。例如,要将导航控件设置为采用 SMALL 样式,请在 MapOptions 对象中使用以下代码:[b][/b]
...
navigationControl: true,
navigationControlOptions: {
style: google.maps.NavigationControlStyle.SMALL
}
...
以下示例介绍了如何设置一个下拉式的 [b]MapType[/b] 控件,并指定让[b]导航控件[/b]使用小型迷你缩放布局:
function initialize() {
var myOptions = {
zoom: 4,
center: new google.maps.LatLng(-33, 151),
mapTypeControl: true,
mapTypeControlOptions: {style: google.maps.MapTypeControlStyle.DROPDOWN_MENU},
navigationControl: true,
navigationControlOptions: {style: google.maps.NavigationControlStyle.SMALL},
mapTypeId: google.maps.MapTypeId.ROADMAP
}
var map = new google.maps.Map(document.getElementById("map_canvas"),
myOptions);
}
查看示例 (control-options.html)
控件通常是在创建地图时配置的。但是,您可以通过调用 Map 的 setOptions() 方法并为其传递新的控件选项动态更改控件的显示。
修改控件
您可以在创建地图时通过地图的 MapOptions 对象中的字段指定控件的显示。下面对这些字段进行了说明:
mapTypeControl 可启用/停用“地图类型”控件,该控件允许用户在地图类型(如“地图”和“卫星”)之间切换。默认情况下,此控件将显示在地图右上角。mapTypeControlOptions 字段可进一步指定要用于此控件的 MapTypeControlOptions。navigationControl 可启用/停用“导航”控件,该控件可提供一个平移/缩放控件。默认情况下,此控件将显示在地图左上角。navigationControlOptions 字段可进一步指定要用于此控件的 NavigationControlOptions。scaleControl 可启用/停用“比例”控件,该控件可提供一个简单的地图比例尺。默认情况下,不会显示此控件。启用后,它将显示在地图的左下角。scaleControlOptions 可进一步指定用于此控件的 ScaleControlOptions。
请注意,您可以为您最初停用的控件指定选项。
控件定位
每个控件选项都包含一个 position 属性(类型为 ControlPosition),它指明要在地图上放置该控件的位置。控件的定位并不是绝对的;相反,API 会在给定的约束条件(如地图大小)下,通过围绕现有地图元素或其他控件“流动”控件以智能方式布局控件。注意:虽然 API 会尝试以智能方式排列控件,但这并不能保证控件不会叠加指定的复杂布局。
系统支持以下控件位置:
TOP 表示控件应沿着地图顶部中心放置。TOP_LEFT 表示控件应沿着地图顶部左侧放置,控件的任何子元素“流”向顶部中心。TOP_RIGHT 表示控件应沿着地图顶部右侧放置,控件的任何子元素“流”向顶部中心。BOTTOM 表示控件应沿着地图底部中心放置。BOTTOM_LEFT 表示控件应沿着地图底部左侧放置,控件的任何子元素“流”向底部中心。BOTTOM_RIGHT 表示控件应沿着地图底部右侧放置,控件的任何子元素“流”向底部中心。LEFT 表示控件应沿着地图左侧放置,位于使用 TOP_LEFT 定位方法放置的任何元素之下,控件的任何子元素“流”向底部。RIGHT 表示控件应沿着地图右侧放置,位于使用 TOP_RIGHT 定位方法放置的任何元素之下,控件的任何子元素“流”向底部。
请注意,这些位置可能会与用户界面元素的位置相冲突,而您无法修改用户界面元素(如版权和 Google 徽标)的位置。在这种情况下,控件将按照每个位置的逻辑说明“流动”,并显示在尽可能靠近指定位置的位置。
下面的示例显示了一个简单的地图,其中启用了位于不同位置的所有控件。
function initialize() {
var myOptions = {
zoom: 12,
center: new google.maps.LatLng(-28.643387, 153.612224),
mapTypeId: google.maps.MapTypeId.ROADMAP,
mapTypeControl: true,
mapTypeControlOptions: {
style: google.maps.MapTypeControlStyle.HORIZONTAL_BAR,
position: google.maps.ControlPosition.BOTTOM
},
navigationControl: true,
navigationControlOptions: {
style: google.maps.NavigationControlStyle.ZOOM_PAN,
position: google.maps.ControlPosition.TOP_RIGHT
},
scaleControl: true,
scaleControlOptions: {
position: google.maps.ControlPosition.TOP_LEFT
}
}
var map = new google.maps.Map(document.getElementById("map_canvas"),
myOptions);
}
查看示例 (control-positioning.html)
[b]自定义控件
[/b]
除了修改现有 API 控件的样式和位置外,您还可以创建自己的控件以处理与用户的交互操作。控件是固定的窗口小部件,浮动在地图之上的绝对位置处;这与“叠加”不同,后者会随下面的地图一起移动。从本质上讲,控件只是一个在地图上具有绝对位置的 元素,它会向用户显示某个用户界面,并处理与用户或地图的交互(通常通过某个事件处理程序)。
要创建您自己的自定义控件,没有什么需要遵循的“规则”。不过,您可以将以下指导原则视为最佳实践的参考:
为要显示的控件元素定义适当 CSS。针对地图属性更改或用户事件(如 'click' 事件),通过事件处理程序处理与用户或地图的交互。创建一个 元素以承载控件并将此元素添加到 Map 的 controls 属性中。
下面将分别对上述原则加以说明。
绘制自定义控件
如何绘制控件由您自己决定。一般来讲,我们建议您将所有控件的显示方式放在一个单独的 元素中,以便可以将控件作为一个单元进行处理。我们将在下面所示的示例中使用这种设计模式。
设计具有吸引力的控件需要具备一些 CSS 和 DOM 结构方面的知识。以下代码显示了如何通过一个 容器、一个承载按钮轮廓的 和另一个承载按钮内部事项的 创建一个简单的控件。
// Create a div to hold the control.
var controlDiv = document.createElement('DIV');
// Set CSS styles for the DIV containing the control
// Setting padding to 5 px will offset the control
// from the edge of the map
controlDiv.style.padding = '5px';
// Set CSS for the control border
var controlUI = document.createElement('DIV');
controlUI.style.backgroundColor = 'white';
controlUI.style.borderStyle = 'solid';
controlUI.style.borderWidth = '2px';
controlUI.style.cursor = 'pointer';
controlUI.style.textAlign = 'center';
controlUI.title = 'Click to set the map to Home';
controlDiv.appendChild(controlUI);
// Set CSS for the control interior
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);处理自定义控件的事件
要使控件有用,它必须能够实际完成某些任务。控件的用途由您确定。控件可以响应用户输入,也可以响应 Map 的状态变化。
对于响应用户输入,Google Maps API 提供了一个跨浏览器的事件处理方法 addDomListener(),它可以处理浏览器的多数支持的 DOM 事件。以下代码段为浏览器的 'click' 事件添加了一个侦听器。请注意,此事件是从 DOM 接收的,而不是从地图。
// Setup the click event listener: simply set the map to
// center on Chicago
var chicago = new google.maps.LatLng(41.850033, -87.6500523);
google.maps.event.addDomListener(outer, 'click', function() {
map.setCenter(chicago)
});定位自定义控件
要在地图上定位自定义控件,您可以在 Map 对象的 controls 属性中将其放在适当位置。此属性包含一个 google.maps.ControlPosition 数组。您可以通过将 Node(通常是 )添加至适当 ControlPosition 向地图中添加自定义控件。(有关这些位置的信息,请参见上面的控件定位。)
每个 ControlPosition 会存储一个显示在该位置的控件的 MVCArray。因此,当您向该位置添加或从中删除控件时,API 将相应更新控件。
API 按照 index 属性的顺序将控件放在每个位置,并会首先放置索引值较低的控件。例如,位置 BOTTOM_RIGHT 处的两个自定义控件将按照此索引顺序进行排列,并优先放置索引值较低的控件。默认情况下,所有自定义控件将在放置完任何 API 默认控件之后进行放置。您可以通过将控件的 index 属性设置为一个负值覆盖此行为。请注意,如果希望在放置相同位置的默认 API 控件“之前”放置您的控件,通常只需设置一个索引值。
以下代码将创建一个新的自定义控件(未显示其构造函数)并将其添加到地图中的 TOP_RIGHT 位置。
var map = new google.maps.Map(document.getElementById('map_canvas'), mapOptions);
// Construct your control in whatever manner is appropriate.
// Generally, your constructor will want access to the
// DIV on which you'll attach the control UI to the Map.
var controlDiv = document.createElement('DIV');
var myControl = new MyControl(controlDiv);
// We don't really need to set an index value here, but
// this would be how you do it. Note that we set this
// value as a property of the DIV itself.
controlDiv.index = 1;
// Add the control to the map at a designated control position
// by pushing it on the position's array. This code will
// implicitly add the control to the DOM, through the Map
// object. You should not attach the control manually.
map.controls[google.maps.ControlPosition.TOP_RIGHT].push(controlDiv);自定义控件示例
下面是一个简单的控件(尽管不是很实用),其中综合了上面所示的模式。该控件通过将地图在某个默认位置居中来响应 DOM 'click' 事件:
var map;
var chicago = new google.maps.LatLng(41.850033, -87.6500523);
/**
* The HomeControl adds a control to the map that simply
* returns the user to Chicago. This constructor takes
* the control DIV as an argument.
*/
function HomeControl(controlDiv, map) {
// Set CSS styles for the DIV containing the control
// Setting padding to 5 px will offset the control
// from the edge of the map
controlDiv.style.padding = '5px';
// Set CSS for the control border
var controlUI = document.createElement('DIV');
controlUI.style.backgroundColor = 'white';
controlUI.style.borderStyle = 'solid';
controlUI.style.borderWidth = '2px';
controlUI.style.cursor = 'pointer';
controlUI.style.textAlign = 'center';
controlUI.title = 'Click to set the map to Home';
controlDiv.appendChild(controlUI);
// Set CSS for the control interior
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);
// Setup the click event listeners: simply set the map to
// Chicago
google.maps.event.addDomListener(controlUI, 'click', function() {
map.setCenter(chicago)
});
}
function initialize() {
var mapDiv = document.getElementById('map_canvas');
var myOptions = {
zoom: 12,
center: chicago,
mapTypeId: google.maps.MapTypeId.ROADMAP
}
map = new google.maps.Map(mapDiv, myOptions);
// Create the DIV to hold the control and
// call the HomeControl() constructor passing
// in this DIV.
var homeControlDiv = document.createElement('DIV');
var homeControl = new HomeControl(homeControlDiv, map);
homeControlDiv.index = 1;
map.controls[google.maps.ControlPosition.TOP_RIGHT].push(homeControlDiv);
}
查看示例 (control-custom.html)
为控件添加状态
控件也可以存储状态。下面的示例与前面所示的类似,但该控件包含了一个额外的“Set Home”按钮,它将控件设置为显示一个新首页位置。为此,我们在该控件内创建一个 home_ 属性以存储此状态,并为该状态提供了获取函数和设置函数。
var map;
var chicago = new google.maps.LatLng(41.850033, -87.6500523);
/**
* The HomeControl adds a control to the map that
* returns the user to the control's defined home.
*/
// Define a property to hold the Home state
HomeControl.prototype.home_ = null;
// Define setters and getters for this property
HomeControl.prototype.getHome = function() {
return this.home_;
}
HomeControl.prototype.setHome = function(home) {
this.home_ = home;
}
function HomeControl(map, div, home) {
// Get the control DIV. We'll attach our control
// UI to this DIV.
var controlDiv = div;
// We set up a variable for the 'this' keyword
// since we're adding event listeners later
// and 'this' will be out of scope.
var control = this;
// Set the home property upon construction
control.home_ = home;
// Set CSS styles for the DIV containing the control
// Setting padding to 5 px will offset the control
// from the edge of the map
controlDiv.style.padding = '5px';
// Set CSS for the control border
var goHomeUI = document.createElement('DIV');
goHomeUI.title = 'Click to set the map to Home';
controlDiv.appendChild(goHomeUI);
// Set CSS for the control interior
var goHomeText = document.createElement('DIV');
goHomeText.innerHTML = '[b]Home[/b]';
goHomeUI.appendChild(goHomeText);
// Set CSS for the setHome control border
var setHomeUI = document.createElement('DIV');
setHomeUI.title = 'Click to set Home to the current center';
controlDiv.appendChild(setHomeUI);
// Set CSS for the control interior
var setHomeText = document.createElement('DIV');
setHomeText.innerHTML = '[b]Set Home[/b]';
setHomeUI.appendChild(setHomeText);
// Setup the click event listener for Home:
// simply set the map to the control's current home property.
google.maps.event.addDomListener(goHomeUI, 'click', function() {
var currentHome = control.getHome();
map.setCenter(currentHome);
});
// Setup the click event listener for Set Home:
// Set the control's home to the current Map center.
google.maps.event.addDomListener(setHomeUI, 'click', function() {
var newHome = map.getCenter();
control.setHome(newHome);
});
}
function initialize() {
var mapDiv = document.getElementById('map_canvas');
var myOptions = {
zoom: 12,
center: chicago,
mapTypeId: google.maps.MapTypeId.ROADMAP
}
map = new google.maps.Map(mapDiv, myOptions);
// Create the DIV to hold the control and
// call the HomeControl() constructor passing
// in this DIV.
var homeControlDiv = document.createElement('DIV');
var homeControl = new HomeControl(map, homeControlDiv, chicago);
homeControlDiv.index = 1;
map.controls[google.maps.ControlPosition.TOP_RIGHT].push(homeControlDiv);
}
查看示例 (control-custom-state.html)
2012年01月13日
[b]控件概述
[/b]
Google Maps 上的地图包含用户界面元素,可以让用户通过地图进行交互。这些元素称为“控件”。您可以在 Google Maps API 应用程序中添加这些控件的多种组合。或者,您也可以不进行任何操作,让 Google Maps API 处理所有控件行为。
Google Maps API 带有大量可以在地图中使用的内置控件:
[b]导航控件[/b],用于显示 Google Maps 上所使用的大型平移/缩放控件。该控件默认显示在地图的左上角。[b]比例控件[/b],用于显示地图比例元素。默认情况下,系统不会启用此控件。[b]MapType 控件[/b],可让用户在不同的地图类型(例如 ROADMAP 和 SATELLITE)之间进行切换。该控件默认显示在地图的右上角。
您不能直接访问或修改控件,而应修改地图的 MapOptions 字段,这些字段会影响控件的可见性和显示方式。您可以在初始化地图时调整控件的显示(使用适当 MapOptions),或者通过调用 setOptions() 以更改地图的选项,对地图进行动态修改。
默认情况下,系统并不会启用所有这些控件。要了解有关默认用户界面行为(以及如何修改此类行为)的信息,请参阅下面的默认用户界面部分。
[b]默认用户界面
[/b]
您可能只想指定自己的地图展示 Google Maps 界面的外观(其中包括以后要添加到地图中的所有新特征或控件),而不想指定和设置单独的控件。要实现此行为,您无需进行任何操作。地图将会显示默认控件。
默认控件集
Google Maps API 提供了以下默认控件:
控件大屏幕小屏幕iPhoneAndroid导航大型平移/缩放控件,适用于 400x350 像素以上的屏幕小型迷你缩放控件,适用于 400x350 像素以下的屏幕不存在“Android”控件MapType水平栏,适用于宽度在 320 像素以上的屏幕下拉菜单,适用于宽度在 320 像素以下的屏幕与大屏幕/小屏幕相同与大屏幕/小屏幕相同比例不存在不存在不存在不存在
此外,默认情况下,系统对所有设备都启用了键盘处理功能。
停用默认用户界面
有时,您可能希望关闭 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);
}
查看示例 (control-disableUI.html)
[b]向地图添加控件
[/b]
您可能想要通过删除、添加或修改用户界面行为或控件调整您的界面,并确保即使以后进行了更新,也不会改变这种行为。如果您只想添加或修改现有的行为,您需要确保以显式的方式将相应的控件添加到自己的应用程序中。
有些控件在默认情况下会出现在地图上,而其他控件则只有在您明确提出相关请求后,才会显示出来。在地图中添加控件,或者从地图中删除控件都是在以下 Map options 对象的字段中指定的,您可以将这些字段设置为 true 以显示相应的控件,或者设置为 false 以隐藏相应的控件:
{
navigationControl: boolean,
mapTypeControl: boolean,
scaleControl: boolean
}
请注意,您目前还不能使用 Google Maps API 第 3 版动态地添加或删除控件。这些控件必须在创建地图的过程中通过 Map options 对象进行设置。
以下示例介绍了如何将地图设置成隐藏导航控件和显示比例控件。请注意,我们并未显式停用默认用户界面,因此,您可在默认用户界面行为中加入这些修改。
function initialize() {
var myOptions = {
zoom: 4,
center: new google.maps.LatLng(-33, 151),
navigationControl: false,
scaleControl: true,
mapTypeId: google.maps.MapTypeId.ROADMAP
}
var map = new google.maps.Map(document.getElementById("map_canvas"),
myOptions);
}
查看示例 (control-simple.html)
[b]控件选项
[/b]
有些控件是可以配置的,这样,您就可以更改它们的行为或外观。例如,[b]导航控件[/b]可显示为具有完整缩放控件和平移控件的大型控件(如 Google Maps 中所示),或者显示为适用于小型设备的小型迷你缩放控件。
您可以通过在创建地图时更改 MapOptions 对象中的适当控件选项字段修改这些控件。例如,用于更改“导航”控件的选项位于navigationControlOptions 字段中。[b][/b]
[b]导航控件[/b]可显示为以下 style 选项之一:
google.maps.NavigationControlStyle.SMALL,用于显示迷你缩放控件,其中仅限 [b]+[/b] 和 [b]-[/b] 按钮。此样式适用于移动设备。google.maps.NavigationControlStyle.ZOOM_PAN,用于显示如 Google Maps 中所示带有平移控件的标准缩放滑块控件。google.maps.NavigationControlStyle.ANDROID,用于显示 Android 设备上的本地 Google Maps 应用程序中所使用的小型缩放控件。google.maps.NavigationControlStyle.DEFAULT,会根据地图的尺寸和运行地图的设备挑选合适的导航控件。
[b]MapType 控件[/b]可显示为以下 style 选项之一:
google.maps.MapTypeControlStyle.HORIZONTAL_BAR,用于在水平栏中将一组控件显示为如 Google Maps 中所示按钮。google.maps.MapTypeControlStyle.DROPDOWN_MENU,用于显示单个按钮控件,以便您从下拉菜单中选择地图类型。google.maps.MapTypeControlStyle.DEFAULT,用于显示“默认”的行为,该行为取决于屏幕尺寸,并且可能会在 API 以后的版本中有所变化。
请注意,如果您确实想要修改任何控件选项,您还是应当通过将 MapOptions 值设置为 true 以显式地启用相应的控件。例如,要将导航控件设置为采用 SMALL 样式,请在 MapOptions 对象中使用以下代码:[b][/b]
...
navigationControl: true,
navigationControlOptions: {
style: google.maps.NavigationControlStyle.SMALL
}
...
以下示例介绍了如何设置一个下拉式的 [b]MapType[/b] 控件,并指定让[b]导航控件[/b]使用小型迷你缩放布局:
function initialize() {
var myOptions = {
zoom: 4,
center: new google.maps.LatLng(-33, 151),
mapTypeControl: true,
mapTypeControlOptions: {style: google.maps.MapTypeControlStyle.DROPDOWN_MENU},
navigationControl: true,
navigationControlOptions: {style: google.maps.NavigationControlStyle.SMALL},
mapTypeId: google.maps.MapTypeId.ROADMAP
}
var map = new google.maps.Map(document.getElementById("map_canvas"),
myOptions);
}
查看示例 (control-options.html)
控件通常是在创建地图时配置的。但是,您可以通过调用 Map 的 setOptions() 方法并为其传递新的控件选项动态更改控件的显示。
修改控件
您可以在创建地图时通过地图的 MapOptions 对象中的字段指定控件的显示。下面对这些字段进行了说明:
mapTypeControl 可启用/停用“地图类型”控件,该控件允许用户在地图类型(如“地图”和“卫星”)之间切换。默认情况下,此控件将显示在地图右上角。mapTypeControlOptions 字段可进一步指定要用于此控件的 MapTypeControlOptions。navigationControl 可启用/停用“导航”控件,该控件可提供一个平移/缩放控件。默认情况下,此控件将显示在地图左上角。navigationControlOptions 字段可进一步指定要用于此控件的 NavigationControlOptions。scaleControl 可启用/停用“比例”控件,该控件可提供一个简单的地图比例尺。默认情况下,不会显示此控件。启用后,它将显示在地图的左下角。scaleControlOptions 可进一步指定用于此控件的 ScaleControlOptions。
请注意,您可以为您最初停用的控件指定选项。
控件定位
每个控件选项都包含一个 position 属性(类型为 ControlPosition),它指明要在地图上放置该控件的位置。控件的定位并不是绝对的;相反,API 会在给定的约束条件(如地图大小)下,通过围绕现有地图元素或其他控件“流动”控件以智能方式布局控件。注意:虽然 API 会尝试以智能方式排列控件,但这并不能保证控件不会叠加指定的复杂布局。
系统支持以下控件位置:
TOP 表示控件应沿着地图顶部中心放置。TOP_LEFT 表示控件应沿着地图顶部左侧放置,控件的任何子元素“流”向顶部中心。TOP_RIGHT 表示控件应沿着地图顶部右侧放置,控件的任何子元素“流”向顶部中心。BOTTOM 表示控件应沿着地图底部中心放置。BOTTOM_LEFT 表示控件应沿着地图底部左侧放置,控件的任何子元素“流”向底部中心。BOTTOM_RIGHT 表示控件应沿着地图底部右侧放置,控件的任何子元素“流”向底部中心。LEFT 表示控件应沿着地图左侧放置,位于使用 TOP_LEFT 定位方法放置的任何元素之下,控件的任何子元素“流”向底部。RIGHT 表示控件应沿着地图右侧放置,位于使用 TOP_RIGHT 定位方法放置的任何元素之下,控件的任何子元素“流”向底部。
请注意,这些位置可能会与用户界面元素的位置相冲突,而您无法修改用户界面元素(如版权和 Google 徽标)的位置。在这种情况下,控件将按照每个位置的逻辑说明“流动”,并显示在尽可能靠近指定位置的位置。
下面的示例显示了一个简单的地图,其中启用了位于不同位置的所有控件。
function initialize() {
var myOptions = {
zoom: 12,
center: new google.maps.LatLng(-28.643387, 153.612224),
mapTypeId: google.maps.MapTypeId.ROADMAP,
mapTypeControl: true,
mapTypeControlOptions: {
style: google.maps.MapTypeControlStyle.HORIZONTAL_BAR,
position: google.maps.ControlPosition.BOTTOM
},
navigationControl: true,
navigationControlOptions: {
style: google.maps.NavigationControlStyle.ZOOM_PAN,
position: google.maps.ControlPosition.TOP_RIGHT
},
scaleControl: true,
scaleControlOptions: {
position: google.maps.ControlPosition.TOP_LEFT
}
}
var map = new google.maps.Map(document.getElementById("map_canvas"),
myOptions);
}
查看示例 (control-positioning.html)
[b]自定义控件
[/b]
除了修改现有 API 控件的样式和位置外,您还可以创建自己的控件以处理与用户的交互操作。控件是固定的窗口小部件,浮动在地图之上的绝对位置处;这与“叠加”不同,后者会随下面的地图一起移动。从本质上讲,控件只是一个在地图上具有绝对位置的 元素,它会向用户显示某个用户界面,并处理与用户或地图的交互(通常通过某个事件处理程序)。
要创建您自己的自定义控件,没有什么需要遵循的“规则”。不过,您可以将以下指导原则视为最佳实践的参考:
为要显示的控件元素定义适当 CSS。针对地图属性更改或用户事件(如 'click' 事件),通过事件处理程序处理与用户或地图的交互。创建一个 元素以承载控件并将此元素添加到 Map 的 controls 属性中。
下面将分别对上述原则加以说明。
绘制自定义控件
如何绘制控件由您自己决定。一般来讲,我们建议您将所有控件的显示方式放在一个单独的 元素中,以便可以将控件作为一个单元进行处理。我们将在下面所示的示例中使用这种设计模式。
设计具有吸引力的控件需要具备一些 CSS 和 DOM 结构方面的知识。以下代码显示了如何通过一个 容器、一个承载按钮轮廓的 和另一个承载按钮内部事项的 创建一个简单的控件。
// Create a div to hold the control.
var controlDiv = document.createElement('DIV');
// Set CSS styles for the DIV containing the control
// Setting padding to 5 px will offset the control
// from the edge of the map
controlDiv.style.padding = '5px';
// Set CSS for the control border
var controlUI = document.createElement('DIV');
controlUI.style.backgroundColor = 'white';
controlUI.style.borderStyle = 'solid';
controlUI.style.borderWidth = '2px';
controlUI.style.cursor = 'pointer';
controlUI.style.textAlign = 'center';
controlUI.title = 'Click to set the map to Home';
controlDiv.appendChild(controlUI);
// Set CSS for the control interior
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);处理自定义控件的事件
要使控件有用,它必须能够实际完成某些任务。控件的用途由您确定。控件可以响应用户输入,也可以响应 Map 的状态变化。
对于响应用户输入,Google Maps API 提供了一个跨浏览器的事件处理方法 addDomListener(),它可以处理浏览器的多数支持的 DOM 事件。以下代码段为浏览器的 'click' 事件添加了一个侦听器。请注意,此事件是从 DOM 接收的,而不是从地图。
// Setup the click event listener: simply set the map to
// center on Chicago
var chicago = new google.maps.LatLng(41.850033, -87.6500523);
google.maps.event.addDomListener(outer, 'click', function() {
map.setCenter(chicago)
});定位自定义控件
要在地图上定位自定义控件,您可以在 Map 对象的 controls 属性中将其放在适当位置。此属性包含一个 google.maps.ControlPosition 数组。您可以通过将 Node(通常是 )添加至适当 ControlPosition 向地图中添加自定义控件。(有关这些位置的信息,请参见上面的控件定位。)
每个 ControlPosition 会存储一个显示在该位置的控件的 MVCArray。因此,当您向该位置添加或从中删除控件时,API 将相应更新控件。
API 按照 index 属性的顺序将控件放在每个位置,并会首先放置索引值较低的控件。例如,位置 BOTTOM_RIGHT 处的两个自定义控件将按照此索引顺序进行排列,并优先放置索引值较低的控件。默认情况下,所有自定义控件将在放置完任何 API 默认控件之后进行放置。您可以通过将控件的 index 属性设置为一个负值覆盖此行为。请注意,如果希望在放置相同位置的默认 API 控件“之前”放置您的控件,通常只需设置一个索引值。
以下代码将创建一个新的自定义控件(未显示其构造函数)并将其添加到地图中的 TOP_RIGHT 位置。
var map = new google.maps.Map(document.getElementById('map_canvas'), mapOptions);
// Construct your control in whatever manner is appropriate.
// Generally, your constructor will want access to the
// DIV on which you'll attach the control UI to the Map.
var controlDiv = document.createElement('DIV');
var myControl = new MyControl(controlDiv);
// We don't really need to set an index value here, but
// this would be how you do it. Note that we set this
// value as a property of the DIV itself.
controlDiv.index = 1;
// Add the control to the map at a designated control position
// by pushing it on the position's array. This code will
// implicitly add the control to the DOM, through the Map
// object. You should not attach the control manually.
map.controls[google.maps.ControlPosition.TOP_RIGHT].push(controlDiv);自定义控件示例
下面是一个简单的控件(尽管不是很实用),其中综合了上面所示的模式。该控件通过将地图在某个默认位置居中来响应 DOM 'click' 事件:
var map;
var chicago = new google.maps.LatLng(41.850033, -87.6500523);
/**
* The HomeControl adds a control to the map that simply
* returns the user to Chicago. This constructor takes
* the control DIV as an argument.
*/
function HomeControl(controlDiv, map) {
// Set CSS styles for the DIV containing the control
// Setting padding to 5 px will offset the control
// from the edge of the map
controlDiv.style.padding = '5px';
// Set CSS for the control border
var controlUI = document.createElement('DIV');
controlUI.style.backgroundColor = 'white';
controlUI.style.borderStyle = 'solid';
controlUI.style.borderWidth = '2px';
controlUI.style.cursor = 'pointer';
controlUI.style.textAlign = 'center';
controlUI.title = 'Click to set the map to Home';
controlDiv.appendChild(controlUI);
// Set CSS for the control interior
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);
// Setup the click event listeners: simply set the map to
// Chicago
google.maps.event.addDomListener(controlUI, 'click', function() {
map.setCenter(chicago)
});
}
function initialize() {
var mapDiv = document.getElementById('map_canvas');
var myOptions = {
zoom: 12,
center: chicago,
mapTypeId: google.maps.MapTypeId.ROADMAP
}
map = new google.maps.Map(mapDiv, myOptions);
// Create the DIV to hold the control and
// call the HomeControl() constructor passing
// in this DIV.
var homeControlDiv = document.createElement('DIV');
var homeControl = new HomeControl(homeControlDiv, map);
homeControlDiv.index = 1;
map.controls[google.maps.ControlPosition.TOP_RIGHT].push(homeControlDiv);
}
查看示例 (control-custom.html)
为控件添加状态
控件也可以存储状态。下面的示例与前面所示的类似,但该控件包含了一个额外的“Set Home”按钮,它将控件设置为显示一个新首页位置。为此,我们在该控件内创建一个 home_ 属性以存储此状态,并为该状态提供了获取函数和设置函数。
var map;
var chicago = new google.maps.LatLng(41.850033, -87.6500523);
/**
* The HomeControl adds a control to the map that
* returns the user to the control's defined home.
*/
// Define a property to hold the Home state
HomeControl.prototype.home_ = null;
// Define setters and getters for this property
HomeControl.prototype.getHome = function() {
return this.home_;
}
HomeControl.prototype.setHome = function(home) {
this.home_ = home;
}
function HomeControl(map, div, home) {
// Get the control DIV. We'll attach our control
// UI to this DIV.
var controlDiv = div;
// We set up a variable for the 'this' keyword
// since we're adding event listeners later
// and 'this' will be out of scope.
var control = this;
// Set the home property upon construction
control.home_ = home;
// Set CSS styles for the DIV containing the control
// Setting padding to 5 px will offset the control
// from the edge of the map
controlDiv.style.padding = '5px';
// Set CSS for the control border
var goHomeUI = document.createElement('DIV');
goHomeUI.title = 'Click to set the map to Home';
controlDiv.appendChild(goHomeUI);
// Set CSS for the control interior
var goHomeText = document.createElement('DIV');
goHomeText.innerHTML = '[b]Home[/b]';
goHomeUI.appendChild(goHomeText);
// Set CSS for the setHome control border
var setHomeUI = document.createElement('DIV');
setHomeUI.title = 'Click to set Home to the current center';
controlDiv.appendChild(setHomeUI);
// Set CSS for the control interior
var setHomeText = document.createElement('DIV');
setHomeText.innerHTML = '[b]Set Home[/b]';
setHomeUI.appendChild(setHomeText);
// Setup the click event listener for Home:
// simply set the map to the control's current home property.
google.maps.event.addDomListener(goHomeUI, 'click', function() {
var currentHome = control.getHome();
map.setCenter(currentHome);
});
// Setup the click event listener for Set Home:
// Set the control's home to the current Map center.
google.maps.event.addDomListener(setHomeUI, 'click', function() {
var newHome = map.getCenter();
control.setHome(newHome);
});
}
function initialize() {
var mapDiv = document.getElementById('map_canvas');
var myOptions = {
zoom: 12,
center: chicago,
mapTypeId: google.maps.MapTypeId.ROADMAP
}
map = new google.maps.Map(mapDiv, myOptions);
// Create the DIV to hold the control and
// call the HomeControl() constructor passing
// in this DIV.
var homeControlDiv = document.createElement('DIV');
var homeControl = new HomeControl(map, homeControlDiv, chicago);
homeControlDiv.index = 1;
map.controls[google.maps.ControlPosition.TOP_RIGHT].push(homeControlDiv);
}
查看示例 (control-custom-state.html)