简明现代魔法 -> 软件项目 -> Google Maps 控件

Google Maps 控件

2009-11-25

地图控件概述

http://ditu.google.cn 上的地图包含允许用户与地图交互的 UI 元素,这些元素称为“控件”。您可以在 Google 地图 API 应用程序中添加这些控件的多种组合。您还可以通过子类化 GControl 类来构建自己的自定义控件。

地图 API 带有大量可以在地图中使用的内置控件:

所有这些控件都基于 GControl 对象。

GMapTypeControl 和 GHierarchicalMapTypeControl 是特殊情况,因为它们还可以进行配置。这些控件增加的功能可以更改 Google 地图 API 中的地图当前所用的 GMapType。

下面是当前支持的地图类型列表:

如果您有图像或者已经定义好的叠加层,也可以定义自己的自定义地图类型。

默认情况下,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.php)

向地图添加控件

可以使用 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.php)

在地图上放置控件

addControl 方法有第二个可选的参数 GControlPosition,可用于指定控件在地图上的位置。它可以是以下值之一,这些值分别指定要放置控件的地图某个角:

如果不包含此参数,则地图 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, 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.php)

修改标准控件的结构

Google 地图 API 内的大多数控件都提供具有标准行为的简单控件。但是,有些控件需要初始化才能正常使用。例如,GHierarchicalMapTypeControl 通常需要一定的初始化才能在层叠“菜单”中以正确顺序显示地图类型。

此示例将带有十字准线图块层叠加层的 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.php)

自定义地图控件

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.php)

随机文章推荐
网站分类


注:如需转载本文,请注明出处(原文链接),谢谢。更多精彩内容,请进入简明现代魔法首页。

进入新博客
喜欢本文,就分享它吧
给我留言
您的名字:
您的邮件:
您的网站:


 

copyright © 2009 简明现代魔法    学习、分享、进步

power by Gonn 感谢所有关心和支持本站的朋友们