My favorites ▼ | 中文(简体) ▼ | Sign in 例如，“ajax api”或“开源” Google 地图 API 主页 文档 常见问题解答 文章 博客 网上论坛 条款 获取地图 API 密钥 创建 KML Sitemap Google 地图 API V3 主页 文档 Google 地图 API V2 开发人员指南 基础知识 事件 控件 叠加层 服务 API 参考 代码示例： 演示 示例 更多资源： 文章 演示文稿 已知问题 实用工具库 案例研究 新！ Google Maps API（Flash 版） 主页 文档 静态地图 API 开发人员指南 Mapplet API 主页 文档
Google 地图 API 专业版
除了同样具有功能强大的地图外，还包含 SLA、支持和广告控制。
控件 地图控件概述 向地图添加控件 在地图上放置控件 修改标准控件的结构 创建自定义控件 控件概述
http://ditu.google.cn 上的地图包含允许用户与地图交互的 UI 元素，这些元素称为“控件”。您可以在 Google 地图 API 应用程序中添加这些控件的多种组合。您还可以通过子类化 GControl 类来构建自己的自定义控件。
地图 API 带有大量可以在地图中使用的内置控件：
GLargeMapControl - 一个在 Google 地图上使用的大平移/缩放控件。默认情况下显示在地图的左上角。 GSmallMapControl - 一个在 Google 地图上使用的小一点的平移/缩放控件。默认情况下显示在地图的左上角。 GSmallZoomControl - 小型缩放控件（无平移控件），用于在 Google 地图上显示行车路线的小地图弹出窗口。 GScaleControl - 地图比例尺 GMapTypeControl - 让用户切换地图类型（例如“地图”和“卫星”）的按钮 GHierarchicalMapTypeControl - 用于放置多个地图类型选择器的一组精选的嵌套按钮和菜单项。 GOverviewMapControl - 位于屏幕一角的可折叠概览地图。
所有这些控件都基于 GControl 对象。
GMapTypeControl 和 GHierarchicalMapTypeControl 是特殊情况，因为它们还可以进行配置,
ghd purple。这些控件增加的功能可以更改 Google 地图 API 中的地图当前所用的 GMapType。有关配置这些控件的详细信息，请参见修改标准控件的结构。
下面是当前支持的地图类型列表：
G_NORMAL_MAP 显示 Google 地图默认的普通二维图块 G_SATELLITE_MAP 显示拍摄的图块 G_HYBRID_MAP 同时显示拍摄的图块和普通（突出显示道路、城市名等明显地图特征）图块 G_PHYSICAL_MAP 根据地形信息显示实际地图图块
如果您有图像或者已经定义好的叠加层,
ghd rare，也可以定义自己的自定义地图类型。
默认情况下，Google 地图 API 提供三种地图类型：G_NORMAL_MAP、G_SATELLITE_MAP 和 G_HYBRID_MAP。您可以通过这两种方式来改变地图上可用的地图类型：使用 GMap2.removeMapType() 删除地图类型；使用 GMap2.addMapType() 添加地图类型。无论您何时创建地图类型控件，它都使用当前地图上已经添加的地图类型，并通过控件让用户可以 切换这些地图类型。请注意，您必须在添加地图类型控件（主要指 GHierarchicalMapTypeControl）之前指定各地图类型之间的阶层关系，以便地图类 型控件可以准确反映这些关系。
使用下面的代码可将 G_HYBRID_MAP 从添加到地图上的可用地图类型中删除，只剩下两种地图类型。添加 GMapTypeControl 后，便只有这两种地图类型可用。
var map = new GMap2(document.getElementById("map_canvas"), { size: new GSize(640,320) } );
map.removeMapType(G_HYBRID_MAP);
map.setCenter(new GLatLng(39.927, 116.407), 11);
var mapControl = new GMapTypeControl();
map.addControl(mapControl);
map.addControl(new GLargeMapControl());
查看示例 (control-maptypes.html)
向地图添加控件
可以使用 GMap2 方法 addControl() 向地图添加控件。例如，要将 Google 地图上显示的平移/缩放控件添加到您的地图中，您可以在您的地图初始化代码中添加下面这行语句：
map.addControl(new GLargeMapControl());
可以向地图添加多个控件。在本例中，我们添加内置 GSmallMapControl 和 GMapTypeControl 控件，它们分别可以平移/缩放地图以及切换“地图”与“卫星”这两种类型。在地图中添加标准控件后，它们即刻完全生效。
var map = new GMap2(document.getElementById("map"));
map.addControl(new GSmallMapControl());
map.addControl(new GMapTypeControl());
map.setCenter(new GLatLng(39.9493, 116.3975), 13);
查看示例 (control-simple.html)
在地图上放置控件
addControl 方法有第二个可选的参数 GControlPosition，可用于指定控件在地图上的位置。它可以是以下值之一，这些值分别指定要 放置控件的地图某个角：
G_ANCHOR_TOP_RIGHT G_ANCHOR_TOP_LEFT G_ANCHOR_BOTTOM_RIGHT G_ANCHOR_BOTTOM_LEFT
如果不包含此参数，则地图 API 会使用控件指定的默认位置。
GControlPosition 还可以指定偏移量，来指示控件的放置位置与地图边界间隔多少像素。这些偏移量使用 GSize 对象指定。
本示例会将 GMapTypeControl 添加到地图的右上角，填充为 10 个像素。双击地图上的任何位置可以删除该控件，将其放在地图的右下角。
var map = new GMap2(document.getElementById"map_canvas"));
var mapTypeControl = new GMapTypeControl();
var topRight = new GControlPosition(G_ANCHOR_TOP_RIGHT, new GSize(10,10));
var bottomRight = new GControlPosition(G_ANCHOR_BOTTOM_RIGHT, new GSize(10,10));
map.addControl(mapTypeControl,
ghd precious, topRight);
GEvent.addListener(map, "dblclick", function() { map.removeControl(mapTypeControl); map.addControl(new GMapTypeControl(), bottomRight);
});
map.addControl(new GSmallMapControl());
map.setCenter(new GLatLng(39.9493, 116.3975), 13);
查看示例 (control-positioning.html)
请参见 GControlPosition 类参考以了解详细信息。
修改标准控件的结构
Google 地图 API 内的大多数控件都提供具有标准行为的简单控件。但是，有些控件需要初始化才能正常使用。例如，GHiera rchicalMapTypeControl 通常需要一定的初始化才能在层叠“菜单”中以正确顺序显示地图类型。
此示例将带有十字准线图块层叠加层的 G_PHYSICAL_MAP 地图类型添加到地图中，然后创建 GHierarchicalMapTypeControl 来排列添加到地图的其他地图类型。
// define the crosshair tile layer and its required functions
var crossLayer = new GTileLayer(new GCopyrightCollection(""), 0, 15); crossLayer.getTileUrl = function(tile, zoom) { return "./include/tile_crosshairs.png";
}
crossLayer.isPng = function() {return true;} // Create a new map type incorporating the tile layer
var layerTerCross = [ G_PHYSICAL_MAP.getTileLayers()[0], crossLayer ];
var mtTerCross = new GMapType(layerTerCross, G_PHYSICAL_MAP.getProjection(), "Ter+"); var map = new GMap2(document.getElementById("map_canvas"), { size: new GSize(640,320) } );
map.addMapType(G_PHYSICAL_MAP);
map.addMapType(mtTerCross);
map.setCenter(new GLatLng(39.9493, 116.3975), 4);
var mapControl = new GHierarchicalMapTypeControl(); // Set up map type menu relationships
mapControl.clearRelationships();
mapControl.addRelationship(G_SATELLITE_MAP, G_HYBRID_MAP, "文字标记", false);
mapControl.addRelationship(G_PHYSICAL_MAP, mtTerCross, "十字交叉"); // Add control after you've specified the relationships
map.addControl(mapControl); map.addControl(new GLargeMapControl());
查看示例 (control-initialization.html)
自定义地图控件
Google 地图 API 还允许您通过子类化 GControl 来创建自定义地图控件。（您并没有在 JavaScript 中实现一个“子类化”对象，而是把这个对象的 prototype 指定为 GControl 对象的实例。）
要创建可用的自定义控件，您需要实现在该类中定义的至少两个方法：initialize() 和 getDefaultPosition()。initialize() 方法必须返回 DOM 元素，而 getDefaultPosition() 方法必须返回类型为 GControlPosition 的对象。
所有自定义的地图控件中的 DOM 元素最终都应该添加到地图容器（也是 DOM 元素）中去，这个地图容器可以通过 GMap2 getContainer() 方法获得。
在此示例中，我们创建一个简单的缩放控件，它具有文本链接，而不是标准 Google 地图缩放控件中使用的图形图标。
// A TextualZoomControl is a GControl that displays textual "Zoom In"
// and "Zoom Out" buttons (as opposed to the iconic buttons used in
// Google Maps). // We define the function first
function TextualZoomControl() {
} // To "subclass" the GControl, we set the prototype object to
// an instance of the GControl object
TextualZoomControl.prototype = new GControl(); // Creates a one DIV for each of the buttons and places them in a container
// DIV which is returned as our control element. We add the control to
// to the map container and return the element for the map class to
// position properly.
TextualZoomControl.prototype.initialize = function(map) { var container = document.createElement("div"); var zoomInDiv = document.createElement("div"); this.setButtonStyle_(zoomInDiv); container.appendChild(zoomInDiv); zoomInDiv.appendChild(document.createTextNode("放大" )); GEvent.addDomListener(zoomInDiv, "click", function() { map.zoomIn(); }); var zoomOutDiv = document.createElement("div"); this.setButtonStyle_(zoomOutDiv); container.appendChild(zoomOutDiv); zoomOutDiv.appendChild(document.createTextNode("缩小 ")); GEvent.addDomListener(zoomOutDiv, "click", function() { map.zoomOut(); }); map.getContainer().appendChild(container); return container;
} // By default, the control will appear in the top left corner of the
// map with 7 pixels of padding.
TextualZoomControl.prototype.getDefaultPosition = function() { return new GControlPosition(G_ANCHOR_TOP_LEFT, new GSize(7, 7));
} // Sets the proper CSS for the given button element.
TextualZoomControl.prototype.setButtonStyle_ = function(button) { button.style.textDecoration = "underline"; button.style.color = "#0000cc"; button.style.backgroundColor = "white"; button.style.font = "small Arial"; button.style.border = "1px solid black"; button.style.padding = "2px"; button.style.marginBottom = "3px"; button.style.textAlign = "center"; button.style.width = "6em"; button.style.cursor = "pointer";
} var map = new GMap2(document.getElementById("map"));
map.addControl(new TextualZoomControl());
map.setCenter(new GLatLng(37.441944, -122.141944), 13);
查看示例 (control-custom.html)
©2010 Google - Code 主页 - 站点服务条款 - 隐私政策 - 站点目录
Google Code 有以下版本： English - Español - 日本語 - 한국어 - Português - Pусский - 中文(简体) - 中文(繁體)
ghd rare|ghd precious|ghd precious
Linear Mode
