Google Maps上的Hello World(2)

在地图上添加控件

您可以用addControl方法在地图上添加控件。在这个例子里，我们加入GSmallMapControl和GMapTypeControl控件，这样我们分别可以移动/缩放地图以及在地图和卫星模式之间切换。

var map = new GMap2(document.getElementById("map")); map.addControl(new GSmallMapControl()); map.addControl(new GMapTypeControl()); map.setCenter(new GLatLng(37.4419, -122.1419), 控件初始化

大多数Google Maps API的控件提供带有标准行为的简单控件。然而，有些控件需要特殊的初始化。例如，GHierarchicalMapTypeControl需要额外的初始化来保证菜单中的地图类型顺序正确。

例子中加入了地图类型G_PHYSICAL_MAP，一个交叉线的图层，然后创建了一个把这个图层和这个地图类型联系在一起。

// 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(37.4419, -122.1419), 4);
var mapControl = new GHierarchicalMapTypeControl();

// Set up map type menu relationships
mapControl.clearRelationships();
mapControl.addRelationship(G_SATELLITE_MAP, G_HYBRID_MAP, "Labels", false);
mapControl.addRelationship(G_PHYSICAL_MAP, mtTerCross, "Crosshairs");

// Add control after you've specified the relationships
map.addControl(mapControl);

map.addControl(new GLargeMapControl());

 

事件监听器

要注册一个事件监听器需要调用GEvent.addListener方法。把一个地图，一个需要监听的事件，一个事件发生时需要调用的函数传给GEvent.addListener方法。在下面的例子里，在我们托动地图后，显示地图中心的经纬度。

var map = new GMap2(document.getElementById("map")); GEvent.addListener(map, "moveend", function() { var center = map.getCenter(); document.getElementById("message").innerHTML = center.toString(); }); map.setCenter(new GLatLng(37.4419, -122.1419), 13);

 

想得到更多事件的信息，参看Events纵览。想得到GMap2对象的完整事件列表，参看GMap2.Events.

打开信息窗口

要创建一个信息窗口，调用openInfoWindow方法，传递给它一个位置和一个用来显示的DOM元素。下面的例子在地图中心显示一个包含"Hello, world"信息的窗口。

var map = new GMap2(document.getElementById("map")); map.setCenter(new GLatLng(37.4419, -122.1419), 13); map.openInfoWindow(map.getCenter(), document.createTextNode("Hello, world"));

 

地图覆盖物

这个例子在地图上显示10个位置随机的标记和一个5个点连成的折线。如果不指定其他的图标，GMarker类会使用缺省的Google地图图标。自定义图标的例子请参看创建图标。

记得您必须在HTML文档里面包含VML命名空间和CSS以使您的网页能在IE下显示折线。更多的信息参看XHTML和VML。

var map = new GMap2(document.getElementById("map"));
map.addControl(new GSmallMapControl());
map.addControl(new GMapTypeControl());
map.setCenter(new GLatLng(37.4419, -122.1419), 13);

// Add 10 markers in random locations on the map
var bounds = map.getBounds();
var southWest = bounds.getSouthWest();
var northEast = bounds.getNorthEast();
var lngSpan = northEast.lng() - southWest.lng();
var latSpan = northEast.lat() - southWest.lat();
for (var i = 0; i < 10; i++) {
  var point = new GLatLng(southWest.lat() + latSpan * Math.random(),
                          southWest.lng() + lngSpan * Math.random());
  map.addOverlay(new GMarker(point));
}

// Add a polyline with five random points. Sort the points by
// longitude so that the line does not intersect itself.
var points = [];
for (var i = 0; i < 5; i++) {
  points.push(new GLatLng(southWest.lat() + latSpan * Math.random(),
                          southWest.lng() + lngSpan * Math.random()));
}
points.sort(function(p1, p2) {
  return p1.lng() - p2.lng();
});
map.addOverlay(new GPolyline(points));

 

点击事件处理

要在用户点击地图的时候触发一个动作，就需要在您的GMap2实例上注册一个"click"事件的监听器。当事件被触发的时候，事件处理句柄将收到两个参数：被点击的标记(如果有)，被点击点的GLatLng(经纬度)。如果没有标记被点击，那么第一个参数为null。

注意：标记是唯一支持"click"事件的内建覆盖对象。其他类型的覆盖对象，如GPolyline是不能被点击的。

在下面的例子里，当访客点击在地图上一个没有标记的点上时，我们在这个点上创建一个标记。当访客点击在一个标记上的时候，我们把它删除。

var map = new GMap2(document.getElementById("map")); map.addControl(new GSmallMapControl()); map.addControl(new GMapTypeControl()); map.setCenter(new GLatLng(37.4419, -122.1419), 13); GEvent.addListener(map, "click", function(marker, point) { if (marker) { map.removeOverlay(marker); } else { map.addOverlay(new GMarker(point)); } });

在标记上显示信息窗口

在这个例子里，我们通过监听每一个标记来在他们上面显示定制的信息窗口。借助技术，我们可以定制每个标记的信息窗口的内容。

var map = new GMap2(document.getElementById("map"));

map.addControl(new GSmallMapControl()); map.addControl(new GMapTypeControl());

 map.setCenter(new GLatLng(37.4419, -122.1419), 13); // Creates a marker at the given point with the given number label function createMarker(point, number) { var marker = new GMarker(point);

GEvent.addListener(marker, "click", function() { marker.openInfoWindowHtml("Marker #" + number + ""); }); return marker; } /

/ Add 10 markers to the map at random locations var bounds = map.getBounds(); var southWest = bounds.getSouthWest(); var northEast = bounds.getNorthEast();

 var lngSpan = northEast.lng() - southWest.lng(); var latSpan = northEast.lat() - southWest.lat(); for (var i = 0; i < 10; i++) { var point = new GLatLng(southWest.lat() + latSpan * Math.random(), southWest.lng() + lngSpan * Math.random()); map.addOverlay(createMarker(point, i + 1)); 分页信息窗口

API版本2引入了openInfoWindowTabs()方法和GInfoWindowTab类用来支持信息窗口拥有多个命名的分页。下面的例子在一个标记上显示了一个简单的分页信息窗口。

var map = new GMap2(document.getElementById("map"));

map.addControl(new GSmallMapControl());

map.addControl(new GMapTypeControl());

map.setCenter(new GLatLng(37.4419, -122.1419), 13);

 

// Our info window content

var infoTabs = [

  new GInfoWindowTab("Tab #1", "This is tab #1 content"),

  new GInfoWindowTab("Tab #2", "This is tab #2 content")

];

 

// Place a marker in the center of the map and open the info window

// automatically

var marker = new GMarker(map.getCenter());

GEvent.addListener(marker, "click", function() {

  marker.openInfoWindowTabsHtml(infoTabs);

});

map.addOverlay(marker);

marker.openInfoWindowTabsHtml(infoTabs);

创建图标

这个例子创建一个新类型图标，采用Google Ride Finder里面的小标记图标做为例子。我们需要指定背景图片，影子图片和点本身的图片。

var map = new GMap2(document.getElementById("map"));

map.addControl(new GSmallMapControl());

map.addControl(new GMapTypeControl());

map.setCenter(new GLatLng(37.4419, -122.1419), 13);

 

// Create our "tiny" marker icon

var icon = new GIcon();

icon.image = "http://labs.google.com/ridefinder/images/mm_20_red.png";

icon.shadow = "http://labs.google.com/ridefinder/images/mm_20_shadow.png";

icon.iconSize = new GSize(12, 20);

icon.shadowSize = new GSize(22, 20);

icon.iconAnchor = new GPoint(6, 20);

icon.infoWindowAnchor = new GPoint(5, 1);

 

// Add 10 markers to the map at random locations

var bounds = map.getBounds();

var southWest = bounds.getSouthWest();

var northEast = bounds.getNorthEast();

var lngSpan = northEast.lng() - southWest.lng();

var latSpan = northEast.lat() - southWest.lat();

for (var i = 0; i < 10; i++) {

  var point = new GLatLng(southWest.lat() + latSpan * Math.random(),

                          southWest.lng() + lngSpan * Math.random());

  map.addOverlay(new GMarker(point, icon));

}

使用Icon类

在很多情况下，您的图标有很多不同的前景，但是有相同的形状和背景。实现这类行为的最简单的方式就是利用GIcon类的复制构造函数，它会把所有的属性复制给您想定制的新图标。

var map = new GMap2(document.getElementById("map"));

map.addControl(new GSmallMapControl());

map.addControl(new GMapTypeControl());

map.setCenter(new GLatLng(37.4419, -122.1419), 13);

 

// Create a base icon for all of our markers that specifies the

// shadow, icon dimensions, etc.

var baseIcon = new GIcon();

baseIcon.shadow = "http://www.google.com/mapfiles/shadow50.png";

baseIcon.iconSize = new GSize(20, 34);

baseIcon.shadowSize = new GSize(37, 34);

baseIcon.iconAnchor = new GPoint(9, 34);

baseIcon.infoWindowAnchor = new GPoint(9, 2);

baseIcon.infoShadowAnchor = new GPoint(18, 25);

 

// Creates a marker whose info window displays the letter corresponding

// to the given index.

function createMarker(point, index) {

  // Create a lettered icon for this point using our icon class

  var letter = String.fromCharCode("A".charCodeAt(0) + index);

  var icon = new GIcon(baseIcon);

  icon.image = "http://www.google.com/mapfiles/marker" + letter + ".png";

  var marker = new GMarker(point, icon);

 

  GEvent.addListener(marker, "click", function() {

    marker.openInfoWindowHtml("Marker " + letter + "");

  });

  return marker;

}

 

// Add 10 markers to the map at random locations

var bounds = map.getBounds();

var southWest = bounds.getSouthWest();

var northEast = bounds.getNorthEast();

var lngSpan = northEast.lng() - southWest.lng();

var latSpan = northEast.lat() - southWest.lat();

for (var i = 0; i < 10; i++) {

  var point = new GLatLng(southWest.lat() + latSpan * Math.random(),

                          southWest.lng() + lngSpan * Math.random());

  map.addOverlay(createMarker(point, i));

}

显示范例 (iconclass.html)

可拖动的标记

标记是可以点击和拖动到一个新位置的交互对象。在这个例子里，我们把一个可以拖动的标记放置在地图上，并监听它的几种简单事件。可拖动的标记支持四种事件click，dragstart， drag和dragend。缺省情况下，标记是可以点击的，但不能被拖动，所以他们需要用设置附加标记选项draggable为真的方式来初始化。可拖动的标记缺省情况下，会在放下的时候跳动。如果您不喜欢这个行为，把bouncy选项设置为假，他们就会在放下的时候老实些。

var map = new GMap2(document.getElementById("map"));

var center = new GLatLng(37.4419, -122.1419);

map.setCenter(center, 13);

 

var marker = new GMarker(center, {draggable: true});

 

GEvent.addListener(marker, "dragstart", function() {

  map.closeInfoWindow();

  });

 

GEvent.addListener(marker, "dragend", function() {

  marker.openInfoWindowHtml("Just bouncing along...");

  });

 

map.addOverlay(marker);

 编码折线

Google地图中的GPolyline对象表示的是一系列的点，简单易用但不够简洁。表示长且复杂的折线需要大量的内存，而且在描绘的时候会花费大量的时间。而且未经编码的折线会在Google地图的每个缩放级别中可见。

Google Maps API也允许你用编码折线来表现路径。编码折线用一个压缩格式的ASCII字符串来表现一系列的点。编码折线还允许你指定线段的可见缩放级别；这样你就可以指定折线在当前的缩放级别下细节如何表现。虽然用起来更加复杂，但是编码折线可以让你的地图描绘效率更高。

例如，有三个点的GPolyline对象通常表现为:

var polyline = new GPolyline([

    new GLatLng(37.4419, -122.1419),

    new GLatLng(37.4519, -122.1519),

    new GLatLng( 37.4619, -122.1819)

], "#FF0000", 10);

map.addOverlay(polyline);

而具有相同点的编码GPolyline对象如下(请先不要去关心编码算法的细节)。

var encodedPolyline = new GPolyline.fromEncoded([

    color: "#FF0000",

    weight: 10,

    points: "yzocFzynhVq}@n}@o}@nzD",

    levels: "BBB",

    zoomLevel: 32,

    numLevels: 4

]);

map.addOverlay(encodedPolyline);

需要注意的两点是:

1.   首先，编码折线用一系列ASCII字符来表现一系列点，就像基本GPolyline对象用一系列经纬度那样。创建这些点序列的编码ASCII值的算法文档在此。如果你需要在运行期间在服务器上面计算这些编码的话，那么你需要了解这个算法。然而，如果你仅仅需要把现有点的经纬度转换成编码，那么你可以使用我们的交互工具。

2.   其次，编码折线允许你指定每个线段的最高可见缩放级别。如果一个点在更高的缩放级别中不可见，那么折线会自动地连接上一个可见点和下一个可见点。注意，这个特性非编码折线并不支持，这一特性非常有利于加快在高缩放级别的折线绘制速度，因为折线的一些细节无需表现出来。例如，当地图放大到州级的时候，一条用于表现从纽约市到芝加哥驱车路线的编码折线，就不需要表现出麦哈顿的具体街道了。

在地图上使用XML和异步远程调用（AJAX）

在这里例子里，我们下载一个静态文件("data.xml")，我们用GDownloadUrl方法下载这个包含一个经纬度列表的XML文件。当下载完成，我们用GXml类来解析，并为XML文档中的每一个点建立一个标记。

var map = new GMap2(document.getElementById("map"));

map.addControl(new GSmallMapControl());

map.addControl(new GMapTypeControl());

map.setCenter(new GLatLng(37.4419, -122.1419), 13);

 

// Download the data in data.xml and load it on the map. The format we

// expect is:

//

//  

//  

//

GDownloadUrl("data.xml", function(data, responseCode) {

  var xml = GXml.parse(data);

  var markers = xml.documentElement.getElementsByTagName("marker");

  for (var i = 0; i < markers.length; i++) {

    var point = new GLatLng(parseFloat(markers[i].getAttribute("lat")),

                            parseFloat(markers[i].getAttribute("lng")));

    map.addOverlay(new GMarker(point));

  }

});

这个例子使用了一个外部的XML数据文件data.xml。

定制地图控件

Maps API的版本2引入了创建定制地图空间的能力，就像内建的平移和缩放控件，继承内建类GControl即可。在这个例子里，我们创建了一个简单的缩放控件，基于文字链接而不是像标准的Google地图缩放控件那样基于图片。

GTextualZoomControl类定义了GControl接口中两个必须的方法：initialize()，用来创建我们用来表现我们的控件的DOM元素；getDefaultPosition()，用来返回一个GControlPosition用于设定在没有指定控件位置的情况下控件的放置位置。想得到关于创建您的自定义控件可以重载函数的更多信息请参看GControl类参考。

所有的地图控件应该加入在地图的容器内，这个容器可以用GMap2类的getContainer()方法。

// A TextualZoomControl is a GControl that displays textual "Zoom In"

// and "Zoom Out" buttons (as opposed to the iconic buttons used in

// Google Maps).

function TextualZoomControl() {

}

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("Zoom In"));

  GEvent.addDomListener(zoomInDiv, "click", function() {

    map.zoomIn();

  });

 

  var zoomOutDiv = document.createElement("div");

  this.setButtonStyle_(zoomOutDiv);

  container.appendChild(zoomOutDiv);

  zoomOutDiv.appendChild(document.createTextNode("Zoom Out"));

  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);

显示范例 (customcontrol.html)

来自 “ ITPUB博客 ” ，链接：http://blog.itpub.net/14884692/viewspace-408770/，如需转载，请注明出处，否则将追究法律责任。

转载于:http://blog.itpub.net/14884692/viewspace-408770/