Google Maps API 中文開發手册 - 應用範例

一个简单例子

创建一个在所在层中居中的地图

var map = new GMap(document.getElementById("map"));
map.centerAndZoom(new GPoint(-122.141944, 37.441944), 4);

地图的移动和变换

recenterOrPanToLatLng方法进行一个地图变换，目标点经/纬在当前视口之中时执行一个连续的动作，否则，执行不连续的变换动作

var map = new GMap(document.getElementById("map"));
map.centerAndZoom(new GPoint(-122.1419, 37.4419), 4);
window.setTimeout(function() {
  map.recenterOrPanToLatLng(new GPoint(-122.1569, 37.4569));
}, 2000);

在地图上添加控件

addControl方法可以在地图上添加控件，并且集成了GSmallMapControl(用来缩放和移动图片)和GMapTypeControl(用来在地图和卫星图模式间切换)两个控件.

var map = new GMap(document.getElementById("map"));
map.addControl(new GSmallMapControl());
map.addControl(new GMapTypeControl());
map.centerAndZoom(new GPoint(-122.141944, 37.441944), 4);

事件监视

GEvent.addListener用来注册事件监视器，在这个例子中，在用户移动或拖拽地图后，输出地图中心点的经/纬.

var map = new GMap(document.getElementById("map"));
GEvent.addListener(map, "moveend", function() {
  var center = map.getCenterLatLng();
  var latLngStr = '(' + center.y + ', ' + center.x + ')';
  document.getElementById("message").innerHTML = latLngStr;
});
map.centerAndZoom(new GPoint(-122.141944, 37.441944), 4);

显示信息浮窗

这个范例显示一个指向地图中心点的"Hello world"信息浮窗，这里信息浮窗显示在指向点的上面，而实际上，信息窗能在地图的任何地方显示.

var map = new GMap(document.getElementById("map"));
map.centerAndZoom(new GPoint(-122.141944, 37.441944), 4);
map.openInfoWindow(map.getCenterLatLng(),
                   document.createTextNode("Hello world"));

地图标注

本范例通过创建10个随机的标注和折线来说明地图标注的用法.

// Center the map on Palo Alto
var map = new GMap(document.getElementById("map"));
map.addControl(new GSmallMapControl());
map.addControl(new GMapTypeControl());
map.centerAndZoom(new GPoint(-122.141944, 37.441944), 4);

// Add 10 random markers in the map viewport using the default icon
var bounds = map.getBoundsLatLng();
var width = bounds.maxX - bounds.minX;
var height = bounds.maxY - bounds.minY;
for (var i = 0; i < 10; i++) {
  var point = new GPoint(bounds.minX + width * Math.random(),
                        bounds.minY + height * Math.random());
  var marker = new GMarker(point);
  map.addOverlay(marker);
}

// Add a polyline with 4 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 GPoint(bounds.minX + width * Math.random(),
                        bounds.minY + height * Math.random()));
}
points.sort(function(p1, p2) { return p1.x - p2.x; });
map.addOverlay(new GPolyline(points));

响应用户点击

本范例在用户点击地图时，在相应的点创建一个标记，用户点击标记时，移除这个标记.

var map = new GMap(document.getElementById("map"));
map.addControl(new GSmallMapControl());
map.addControl(new GMapTypeControl());
map.centerAndZoom(new GPoint(-122.141944, 37.441944), 4);

GEvent.addListener(map, 'click', function(overlay, point) {
  if (overlay) {
    map.removeOverlay(overlay);
  } else if (point) {
    map.addOverlay(new GMarker(point));
  }
});

在标记上显示信息浮窗

在这个例子中，点击每一个标记，就会在标记上面显示一个自定义的信息浮窗.

// Center the map on Palo Alto
var map = new GMap(document.getElementById("map"));
map.addControl(new GSmallMapControl());
map.addControl(new GMapTypeControl());
map.centerAndZoom(new GPoint(-122.141944, 37.441944), 4);

// Creates a marker whose info window displays the given number
function createMarker(point, number) {
  var marker = new GMarker(point);

  // Show this marker's index in the info window when it is clicked
  var html = "Marker #<b>" + number + "</b>";
  GEvent.addListener(marker, "click", function() {
    marker.openInfoWindowHtml(html);
  });

  return marker;
}

// Add 10 random markers in the map viewport
var bounds = map.getBoundsLatLng();
var width = bounds.maxX - bounds.minX;
var height = bounds.maxY - bounds.minY;
for (var i = 0; i < 10; i++) {
  var point = new GPoint(bounds.minX + width * Math.random(),
                        bounds.minY + height * Math.random());
  var marker = createMarker(point, i + 1);
  map.addOverlay(marker);
}

创建图标

创建一种新图标,就像在Google Ride Finder上面使用的迷你标记一样.必须给图标指定前景图片、阴影图片、图标在地图上的点和信息浮窗在图标上的点.

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

// Center the map on Palo Alto
var map = new GMap(document.getElementById("map"));
map.addControl(new GSmallMapControl());
map.addControl(new GMapTypeControl());
map.centerAndZoom(new GPoint(-122.141944, 37.441944), 4);

// Creates one of our tiny markers at the given point
function createMarker(point) {
  var marker = new GMarker(point, icon);
  map.addOverlay(marker);
  GEvent.addListener(marker, "click", function() {
    marker.openInfoWindowHtml("You clicked me!");
  });
}

// Place the icons randomly in the map viewport
var bounds = map.getBoundsLatLng();
var width = bounds.maxX - bounds.minX;
var height = bounds.maxY - bounds.minY;
for (var i = 0; i < 10; i++) {
  createMarker(new GPoint(bounds.minX + width * Math.random(),
                          bounds.minY + height * Math.random()));
}

使用图标类

多数情况下，使用的图标可能前景图片不同，可是形状和阴影是一样的，达到这种效果最简单的方法是使用GIcon类的copy方法来构造.这样可以将一个Icon对象的所有属性复制到一个新的Icon对象中.

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

// Center the map on Palo Alto
var map = new GMap(document.getElementById("map"));
map.addControl(new GSmallMapControl());
map.addControl(new GMapTypeControl());
map.centerAndZoom(new GPoint(-122.141944, 37.441944), 4);

// 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 from above
  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);

  // Show this marker's index in the info window when it is clicked
  var html = "Marker <b>" + letter + "</b>";
  GEvent.addListener(marker, "click", function() {
    marker.openInfoWindowHtml(html);
  });

  return marker;
}

// Add 10 random markers in the map viewport
var bounds = map.getBoundsLatLng();
var width = bounds.maxX - bounds.minX;
var height = bounds.maxY - bounds.minY;
for (var i = 0; i < 10; i++) {
  var point = new GPoint(bounds.minX + width * Math.random(),
                         bounds.minY + height * Math.random());
  var marker = createMarker(point, i);
  map.addOverlay(marker);
}

在地图上使用XML和异步RPC ("AJAX")

在这个范例中，我们下载一个静态文件("data.xml")，这个XML文件中包含一系列经/纬坐标，当下载完成后，读取这个XML文件并为每一个坐标在地图上创建一个标记.

// Center the map on Palo Alto
var map = new GMap(document.getElementById("map"));
map.addControl(new GSmallMapControl());
map.addControl(new GMapTypeControl());
map.centerAndZoom(new GPoint(-122.141944, 37.441944), 4);

// Download the data in data.xml and load it on the map. The format we
// expect is:
// <markers>
//   <marker lat="37.441" lng="-122.141"/>
//   <marker lat="37.322" lng="-121.213"/>
// </markers>
var request = GXmlHttp.create();
request.open("GET", "data.xml", true);
request.onreadystatechange = function() {
  if (request.readyState == 4) {
    var xmlDoc = request.responseXML;
    var markers = xmlDoc.documentElement.getElementsByTagName("marker");
    for (var i = 0; i < markers.length; i++) {
      var point = new GPoint(parseFloat(markers[i].getAttribute("lng")),
                             parseFloat(markers[i].getAttribute("lat")));
      var marker = new GMarker(point);
      map.addOverlay(marker);
    }
  }
}
request.send(null);

查看范例(async.html)

本文来源于Google由Step1.cn翻译并整理

來源: http://www.gearthchina.com/eartshow.asp?911.html