定制地图覆盖物

Maps API版本2引入了创建自定义的地图覆盖对象的能力，就像内建的GMarker和GPolyline对象，继承内建的GOverlay类即可。在这个例子里，我们创建一个矩形对象用来在地图上面标记一个矩形区域。

Rectangle类定义了GOverlay接口中四个必须的方法：initialize()，用来创建我们用来表现覆盖对象的DOM元素；remove()，用于移除覆盖对象；copy()，用于复制覆盖对象；redraw()，用于在当前投影范围缩放级别下定位和调节覆盖对象的大小。想得到关于创建您的自定义覆盖对象可以重载函数的更多信息请参看GOverlay类参考。

每个在地图上构成覆盖对象的DOM元素需要定义它绘制时的Z序。例如，折线浮在地图上，所以他们绘制在Z序最小的G_MAP_MAP_PANE层。标记的影子元素放置在G_MAP_MARKER_SHADOW_PANE层，他们的前景元素放置在G_MAP_MARKER_PANE层。放置您的覆盖元素在正确的层上，确保直线画在标记影子的下面，信息窗口在其他的覆盖对象之上。这个例子里，我们的覆盖对象负载地图上，所以，我们把它放置在Z序最小的G_MAP_MAP_PANE层，就像GPolyline。在类参考里面可以得到完整的地图层的列表。

// A Rectangle is a simple overlay that outlines a lat/lng bounds on the

// map. It has a border of the given weight and color and can optionally

// have a semi-transparent background color.

function Rectangle(bounds, opt_weight, opt_color) {

  this.bounds_ = bounds;

  this.weight_ = opt_weight || 2;

  this.color_ = opt_color || "#888888";

}

Rectangle.prototype = new GOverlay();

 

// Creates the DIV representing this rectangle.

Rectangle.prototype.initialize = function(map) {

  // Create the DIV representing our rectangle

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

  div.style.border = this.weight_ + "px solid " + this.color_;

  div.style.position = "absolute";

 

  // Our rectangle is flat against the map, so we add our selves to the

  // MAP_PANE pane, which is at the same z-index as the map itself (i.e.,

  // below the marker shadows)

  map.getPane(G_MAP_MAP_PANE).appendChild(div);

 

  this.map_ = map;

  this.div_ = div;

}

 

// Remove the main DIV from the map pane

Rectangle.prototype.remove = function() {

  this.div_.parentNode.removeChild(this.div_);

}

 

// Copy our data to a new Rectangle

Rectangle.prototype.copy = function() {

  return new Rectangle(this.bounds_, this.weight_, this.color_,

                       this.backgroundColor_, this.opacity_);

}

 

// Redraw the rectangle based on the current projection and zoom level

Rectangle.prototype.redraw = function(force) {

  // We only need to redraw if the coordinate system has changed

  if (!force) return;

 

  // Calculate the DIV coordinates of two opposite corners of our bounds to

  // get the size and position of our rectangle

  var c1 = this.map_.fromLatLngToDivPixel(this.bounds_.getSouthWest());

  var c2 = this.map_.fromLatLngToDivPixel(this.bounds_.getNorthEast());

 

  // Now position our DIV based on the DIV coordinates of our bounds

  this.div_.style.width = Math.abs(c2.x - c1.x) + "px";

  this.div_.style.height = Math.abs(c2.y - c1.y) + "px";

  this.div_.style.left = (Math.min(c2.x, c1.x) - this.weight_) + "px";

  this.div_.style.top = (Math.min(c2.y, c1.y) - this.weight_) + "px";

}

 

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

map.addControl(new GSmallMapControl());

map.addControl(new GMapTypeControl());

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

 

// Display a rectangle in the center of the map at about a quarter of

// the size of the main map

var bounds = map.getBounds();

var southWest = bounds.getSouthWest();

var northEast = bounds.getNorthEast();

var lngDelta = (northEast.lng() - southWest.lng()) / 4;

var latDelta = (northEast.lat() - southWest.lat()) / 4;

var rectBounds = new GLatLngBounds(

    new GLatLng(southWest.lat() + latDelta, southWest.lng() + lngDelta),

    new GLatLng(northEast.lat() - latDelta, northEast.lng() - lngDelta));

map.addOverlay(new Rectangle(rectBounds));

显示范例 (customoverlay.html)

地理译码示例

您可以直接发HTTP请求的方式来访问Maps API的地理译码器，或者可以用GClientGeocoder对象在JavaScript下发送请求。这样您可以从您的服务器进行地理译码调用或者让用户的浏览器进行这个操作。如果您有一个相对稳定的地址数据库(待售房产的列表)，我们建议您通过HTTP请求一次性获得地理译码信息，然后把这些地址缓存在您自己的数据库呢。这让对用户来说您的网站会更快，而且可以减少您对每日地理译码请求限额的消耗。如果您不能访问服务器段脚本，那么您可以用JavaScript来发送地理译码请求。

JavaScript下使用地理译码

在JavaScript下您可以用GClientGeocoder对象来访问地理译码器。getLatLng方法可以用来把地址转换为GLatLng(经纬度)。因为地理译码需要发送请求到Google的服务器，所以这可能会花点时间。为了避免您的脚本一直等待，您需要指定一个函数在回应后触发。在这个例子里，我们把一个地址地理译码，然后在这个点上加一个标记，然后打开一个信息窗口显示地址。

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

var geocoder = new GClientGeocoder();

 

function showAddress(address) {

  geocoder.getLatLng(

    address,

    function(point) {

      if (!point) {

        alert(address + " not found");

      } else {

        map.setCenter(point, 13);

        var marker = new GMarker(point);

        map.addOverlay(marker);

        marker.openInfoWindowHtml(address);

      }

    }

  );

}