类型缩放Google map 地图类型

上班之余抽点时间出来写写博文，希望对新接触的朋友有帮助。今天在这里和大家一起学习一下类型缩放

    

1. 舆图类型
2. 基本舆图类型

    

1. 45° 图像
2. 启用和停用 45° 图像
3. 旋转 45° 图像
4. 修改舆图类型注册表
5. 样式化舆图
6. 自定义舆图类型
7. 舆图坐标
   1. 世界坐标
   2. 像素坐标
   3. 图块坐标
8. MapType 接口
   1. 基本舆图类型
   2. 叠加层舆图类型
   3. 图片舆图类型
9. 自定义投影
10. 实现投影接口
11. 投影中的坐标转换
12. 投影中的图块选择

    

舆图类型

    本文档介绍了您可以使用 Google Maps JavaScript API 表示的舆图类型。该 API 使用了 MapType 对象来存储这些舆图的相关信息。MapType 是一种接口，可用于定义舆图图块的表示方法和使用方法，以及坐标系从屏幕坐标转换到世界坐标（舆图上）的方法。每个 MapType 都必须包括一些用于处理图块检索和释放的方法，以及用于定义图块视觉行为的属性。

    Maps API 中舆图类型的内部工作原理是一个较为庞杂的主题。大部分开发者可以只使用下述的基本舆图类型。不过，您也可以使用自定义舆图类型来定义自己的舆图图块，或者使用样式化舆图来修改现有舆图类型的表示形式。供给自定义舆图类型时，您需要懂得如何修改舆图的舆图类型注册表。

    

基本舆图类型

    Google Maps API 中供给了多种舆图类型。除了用户熟习的“绘制”道路舆图图块，Google Maps API 也支持其他舆图类型。

    Google Maps API 中供给了以下舆图类型：

    

• MapTypeId.ROADMAP，用于表示默许的道路舆图视图
• MapTypeId.SATELLITE，用于表示 Google 地球卫星图片
• MapTypeId.HYBRID，用于同时表示一般视图和卫星视图
• MapTypeId.TERRAIN，用于根据地形信息表示现实舆图。

    要通过 Map 修改正在使用的舆图类型，您可以为其设置 mapTypeId 属性，方法是：在结构函数内设置其 Map options 对象，或者调用舆图的 setMapTypeId() 方法。

    根据结构函数设置 mapTypeId：

var myLatlng = new google.maps.LatLng(-34.397, 150.644);
var mapOptions = {
  zoom: 8,
  center: myLatlng,
  mapTypeId: google.maps.MapTypeId.ROADMAP
};
var map = new google.maps.Map(document.getElementById("map_canvas"),
    mapOptions);

    
动态修改 mapTypeId：

map.setMapTypeId(google.maps.MapTypeId.TERRAIN);

    
请注意，您现实上并没有直接设置舆图的舆图类型，而是将其 mapTypeId 设为引用使用标识符的 MapType。Maps JavaScript API V3 使用舆图类型注册表（详见下文）来管理这些引用

    

45° 图像

    Google Maps API 针对特定位置支持特别的 45° 图像。此类高分辨率图像可供给朝向各基本方向（东南西北）的透视视图。对于支持的舆图类型，这些图片还可供给更高的缩放级别。

    下图表示了加利福尼亚州圣塔克鲁兹市木板路的 45° 透视视图：

    现有的 google.maps.MapTypeId.SATELLITE 和 google.maps.MapTypeId.HYBRID 舆图类型支持高缩放级别的 45° 透视图像（如果有的话）。如果您放大的位置具有此类图像，那么这些舆图类型将会主动通过以下方法更改其视图：

    

• 舆图上现有的任何平移控件都将会变更为在现有的导航控件四周添加一个罗盘转轮。您可以通过该罗盘来更改恣意 45° 图像的方向，方法是：拖动该罗盘转轮，然后将方向对准包括图像的最近支持方向。
• 一个旋转控件将会间隙表当初现有的平移和缩放控件之间，它可用于将图像围绕支持方向旋转。旋转控件仅支持顺时针方向旋转。
• 以当前位置为中央的 45° 透视图像将会替换卫星图像或混合图像。默许情况下，此类视图会朝向北方。如果您缩小舆图，则舆图会重新表示默许的卫星图像或混合图像。
• MapType 控件将启用子菜单切换控件，用于表示 45° 图像。

    缩小表示 45° 图像的舆图类型将会还原全部更改，并重新构建原始舆图类型。

    Google 正在不断地为更多都会添加 45° 图像。有关最新信息，请参阅 Google 舆图上的 45° 图像列表。

    

启用和停用 45° 图像

    您可以通过在 Map 对象上调用 setTilt(0) 来停用 45° 图像。要启用适用于支持的舆图类型的 45° 透视图像，请调用 setTilt(45)。

    Map 的 getTilt() 方法将会一直反应舆图上所表示确当前倾斜度；如果您在舆图上设置了倾斜度后又将其删除（例如通过缩小舆图的方法），那么舆图的 getTilt() 方法将会返回 0。

    以下示例表示了俄勒冈州波特兰市中央的 45°视图：

var mapOptions = {
  center: new google.maps.LatLng(37.339085, -121.8914807),
  zoom: 18,
  mapTypeId: 'satellite'
};
map = new google.maps.Map(document.getElementById("map_canvas"), mapOptions);
map.setTilt(45);

    

旋转 45° 图像

    现实上，45° 图像是由朝向四个基本方向（东南西北）的一系列图片形成的。当舆图表示 45° 图像时，您可以将图像对准某个基本方向，方法是：在 Map 对象上调用 setHeading()，并传递一个数值以表示偏离北方的度数。

    以下示例中表示了一张航拍舆图，在您点击按钮后，该舆图会每 3 秒主动旋转一次：

var map;
function initialize() {

  var mapOptions = {
    center: new google.maps.LatLng(45.518970, -122.672899),
    zoom: 18,
    mapTypeId: google.maps.MapTypeId.SATELLITE
  };
  map = new google.maps.Map(document.getElementById("map_canvas"), mapOptions);
  map.setTilt(45);
  map.setHeading(90);
}

function autoRotate() {
  // Determine if we're showing aerial imagery
  if (map.getTilt() != 0) {
    map.setHeading(180);
    setTimeout('map.setHeading(270)',3000);
    setTimeout('map.setHeading(0)',6000);
    setTimeout('map.setHeading(90)',9000);
  }
}

    

修改舆图类型注册表

    舆图的 mapTypeId 是一种字符串标识符，可用于将 MapType 与独一值关联起来。每个 Map 对象都会保存一个 MapTypeRegistry，其中包括该舆图的一系列可用 MapType。该注册表用于选择舆图的某种控件（例如 MapType 控件）中的可用舆图类型。

    您无法直接读取舆图类型注册表，而是应该通过以下方法对注册表停止修改：添加自定义舆图类型并将它们与您所选择的字符串标识符停止关联。您无法修改或更改基本舆图类型（但您可通过更改与响应舆图相关联的 mapTypeControlOptions 的表示方法来将这些类型从舆图中删除）。

    以下代码将舆图设为仅表示其 mapTypeControlOptions 中的两种舆图类型，并修改了注册表，以将此标识符的关联项添加到 MapType 接口的现实实现中。请注意：我们特意未在之前的代码中记载自定义舆图类型本身的创立。有关构建舆图类型的信息，请参阅上面的样式化舆图或自定义舆图类型。

// Modify the control to only display two maptypes, the
// default ROADMAP and the custom 'mymap'.
// Note that because this is simply an association, we
// don't need to modify the MapTypeRegistry beforehand.

var MY_MAPTYPE_ID = 'mymaps';

var mapOptions = {
  zoom: 12,
  center: brooklyn,
  mapTypeControlOptions: {
     mapTypeIds: [google.maps.MapTypeId.ROADMAP, MY_MAPTYPE_ID]
  },
  mapTypeId: MY_MAPTYPE_ID
};

// Create our map. This creation will implicitly create a
// map type registry.
map = new google.maps.Map(document.getElementById("map_canvas"),
    mapOptions);

// Create your custom map type using your own code.
// (See below.)
var myMapType = new MyMapType();

// Set the registry to associate 'mymap' with the
// custom map type we created, and set the map to
// show that map type.
map.mapTypes.set(MY_MAPTYPE_ID, myMapType);

    

样式化舆图

    借助 StyledMapType，您可以自定义 Google 标准基本舆图的表示方法，并更改道路、公园和建筑物区域等元素的视觉表示效果，以反应出与默许舆图类型中所使用的不同的样式。

    有关 StyledMapType 的信息，请参阅该开发者指南中的样式化舆图部分。

    

自定义舆图类型

    当初，Google Maps JavaScript API V3 支持自定义舆图类型的表示和管理，可以让您实现自己的舆图图像或图块叠加层。

    V3 API 中供给了以下几种可能的舆图类型实现：

    

• 标准图块集，其中所包括的图片独特形成了完全的制图舆图。这些图块集也称为基本舆图类型。这些舆图类型的行为和表示与现有的默许舆图类型相似：ROADMAP、SATELLITE、HYBRID 和 TERRAIN。您可以在舆图的 mapTypes 数组中添加自定义舆图类型，以允许 Maps API 中的用户界面将您的自定义舆图类型视为标准舆图类型（例如通过在 MapType 控件中加入自定义舆图类型）。
• 图片图块叠加层，表当初现有基本舆图类型之上。平日，这些舆图类型用于扩展现有舆图类型以表示更多信息，并常常受限于特定的位置和/或缩放级别。请注意，这些图块可以是透明的，以便您将舆图项添加到现有舆图中。
• 非图片的舆图类型，可以让您处理如何表示最基本级别的舆图信息。

    以上每个选项均需先创立一个类，以实现 MapType 接口。此外，ImageMapType 类供给了一些内置行为，以简化图像 MapType 的创立过程。

    在我们对用于实现 MapType 的类停止说明之前，请先懂得 Google 舆图是如何肯定坐标和要表示的舆图部分的。对于任何基本或叠加层 MapType，您需要实现相似的逻辑。

    

舆图坐标

    Google Maps API 使用以下几种坐标系：

    

• 纬度和经度值（对应地球上独一的一个点）（Google 使用世界测地系统 WGS84 标准。）
• 世界坐标（对应舆图上独一的一个点）。
• 图块坐标（对应特定缩放级别舆图上的特定图块）。

    

世界坐标

    每当 Maps API 需要将世界位置转换为舆图（屏幕）上的位置时，都需要先将纬度和经度值转换为“世界”坐标。此转换过程使用舆图投影来完成。为此，Google Maps 使用墨卡托投影。您也可以定义自己的投影以实现 google.maps.Projection 接口。（请注意，V3 中的接口并非您“分类”的类，而是您自己定义的类的简单规范。）

    为便于盘算像素坐标（如下所示），我们假设缩放级别为 0 的舆图为具有基本图块大小的单个图块。然后，我们在缩放级别 0 定义像素坐标对应的世界坐标，使用投影将纬度和经度值转换为此基本图块上的像素位置。该世界坐标为从舆图投影原点到特定位置测量的浮点值。请注意，该值为浮点值，因此可能比表示的舆图图片确当前分辨率更精确。也就是说，世界坐标与当前缩放级别无关。

    Google 舆图中的世界坐标是以墨卡托投影的原点（即舆图西北角，经度为 180 度，纬度为约 85 度）为起点停止测量的，在 x 方向上朝东（向右）增大，在 y 方向上朝南（向下）增大。由于基本的墨卡托 Google 舆图图块为 256x 256 像素，因此可用的世界坐标空间为 {0-256}, {0-256}（如下所示）。

    

    请注意，墨卡托投影在经度方向上的宽度有限，但在纬度方向上的高度无穷。我们利用约 +/- 85 度的墨卡托投影“剪切”基本舆图图像，使生成的舆图为方形，从而更便于选择图块。请注意，投影可能会在基本舆图的可用坐标空间以外生成世界坐标（例如，如果您在离极点非常近的地方停止绘制）。

    

像素坐标

    世界坐标表示的是给定投影上的绝对位置，但我们需要将该坐标转换为像素坐标，以肯定给定缩放级别的“像素”偏移量。像素坐标采用以下公式停止盘算：

pixelCoordinate = worldCoordinate * 2

    zoomLevel

    请注意，根据上述公式，各增大的缩放级别在 x 和 y 方向上均为原来的两倍大。因此，缩放级别每增大一级，分辨率就为前一个级别的四倍。例如，在缩放级别 1，舆图包括 4 个 256x256 像素图块，因此像素空间为 512x512。在缩放级别 19，舆图上的每个 x 和 y 像素均可使用 0 到 256 * 219 之间的值停止引用。

    由于世界坐标是建立在舆图的图块大小基本上的，因此像素坐标的整数部分起着标识当前缩放级别位置的确实像素的作用。请注意，对于缩放级别 0，像素坐标即是世界坐标。

    当初，我们在各个缩放级别的舆图上都可精确表示全部位置。Maps API 会在舆图中央结构给定缩放级别的视口（例如 LatLng）以及包括的 DOM 元素的大小，并将此边框转换为像素坐标。然后，API 从逻辑上肯定位于给定像素边界内的全部舆图图块。其中的每个舆图图块均使用图块坐标引用，该坐标大大简化了舆图图像的表示。

    

图块坐标

    Google Maps API 可能无法加载最有效的较高缩放级别的全部舆图图像；而是会将每个缩放级别的图像都分割为一组舆图图块，这些图块逻辑上按照应用能识别的次序排列。当舆图滚动到新位置或新的缩放级别时，Maps API 会使用像素坐标肯定所需的图块，然后将这些值转换为一组要检索的图块。这些图块坐标采用逻辑上易于肯定哪些图块包括任何给定点的图像的方案停止分配。

    Google 舆图中的图块从与像素原点相同的位置停止编号。要实现 Google 墨卡托投影，原点图块应一直位于舆图的西北角，且 x 值从西向东逐渐增大，而 y 值则从北向南逐渐增大。图块会使用相对于该原点的 x,y 坐标停止索引。例如，对于缩放级别 2，如果地球分割为了 16 个图块，那么每个图块都可通过独一的 x,y 对停止引用：

    

    请注意，您可以通过按图块大小划分像素坐标并采用结果的整数部分，来生成当前缩放级别的图块坐标（这属于副产品）。

    以下示例表示了伊利诺州芝加哥在不同缩放级别下的坐标，其中包括 LatLng 值、世界坐标、像素坐标以及图块坐标：

    每日一道理
水仙亭亭玉立，兰花典雅幽香，牡丹雍容华贵，梨花洁白无暇……美丽的花朵总能得到世人的羡慕与赞叹，殊不知，它从一粒小小的种子到最后开花，要历经无数的艰辛与坎坷！我们的成长也是如此。只有做辛勤的“织梦者”，我们的梦想才会成真！

    查看示例 (map-coordinates.html)

    

MapType 接口

    自定义舆图类型必须实现 MapType 接口。此接口用于指定某些属性和方法，以允许 API 在肯定需要在当前视口和缩放级别中表示舆图图块时可以发起对舆图类型的请求。您可处理这些请求，以决定要加载的图块。

    请注意：您可以创立自己的类以实现此接口，也可以在具有兼容图像的情况下，使用已实现此接口的 ImageMapType 类。

    实现 MapType 接口的类要求您定义并填充以下属性：

    

• tileSize（必填），用于指定图块（类型为 google.maps.Size）的大小。图块大小必须为矩形，但不必定要是正方形。
• maxZoom（必填），用于指定要表示该舆图类型图块的最大缩放级别。
• minZoom（可选），用于指定要表示该舆图类型图块的最小缩放级别。该值默许为 0，即表示不存在最小缩放级别。
• name（可选），用于指定该舆图类型的名称。只有当您希望此舆图类型可在 MapType 控件中选择时，才需要填充该属性。（请参阅上面的添加 MapType 控件。）
• alt（可选），用于指定该舆图类型的备用文本（以悬停文本的形式表示）。只有当您希望此舆图类型可在 MapType 控件中选择时，才需要填充该属性。（请参阅上面的添加 MapType 控件。）

    此外，实现 MapType 接口的类还需要实现以下方法：

    

• getTile()（必填）：对于给定视口，每当 API 肯定舆图需要表示新的图块时，就调用此方法。getTile() 方法必须具有以下签名：

  getTile(tileCoord:Point,zoom:number,ownerDocument:Document):Node

  API 会根据 MapType 的 tileSize、minZoom 和 maxZoom 属性以及舆图确当前视口和缩放级别来决定是否需要调用 getTile()。在给定已传递坐标、缩放级别和要在其上附加图块图片的 DOM 元素的情况下，此方法的处理程序应返回 HTML 元素。

• releaseTile()（可选）：每当 API 肯定舆图需要删除视图范围外的图块时，就调用此方法。该方法必须具有以下签名：

  releaseTile(tile:Node)

  一般情况下，您应当删除附加到舆图图块而非舆图中的任何元素。例如，如果您在舆图图块叠加层中附加了事件监听器，则应在此删除这些监听器。

    getTile() 方法可作为用于肯定要在给定视口内加载哪些图块的重要控制程序。

    

基本舆图类型

    用此方法结构的舆图类型可以独自使用，也可以作为叠加层与其他舆图类型结合使用。独自使用的舆图类型称为“基本舆图类型”。您可能希望 API 以看待 ROADMAP、TERRAIN 等其他任何现有基本舆图类型的统一方法看待此类自定义 MapType。为此，您可将自己的自定义 MapType 添加到 Map 的 mapTypes 属性中。此属性的类型为 MapTypeRegistry。

    以下代码创立了一个基本 MapType 以表示舆图的图块坐标，并绘制了图块轮廓：

function CoordMapType() {
}

CoordMapType.prototype.tileSize = new google.maps.Size(256,256);
CoordMapType.prototype.maxZoom = 19;

CoordMapType.prototype.getTile = function(coord, zoom, ownerDocument) {
  var div = ownerDocument.createElement('div');
  div.innerHTML = coord;
  div.style.width = this.tileSize.width + 'px';
  div.style.height = this.tileSize.height + 'px';
  div.style.fontSize = '10';
  div.style.borderStyle = 'solid';
  div.style.borderWidth = '1px';
  div.style.borderColor = '#AAAAAA';
  return div;
};

CoordMapType.prototype.name = "Tile #s";
CoordMapType.prototype.alt = "Tile Coordinate Map Type";

var map;
var chicago = new google.maps.LatLng(41.850033,-87.6500523);
var coordinateMapType = new CoordMapType();

function initialize() {
  var mapOptions = {
    zoom: 10,
    center: chicago,
    mapTypeControlOptions: {
      mapTypeIds: ['coordinate', google.maps.MapTypeId.ROADMAP],
      style: google.maps.MapTypeControlStyle.DROPDOWN_MENU
    }
  };
  map = new google.maps.Map(document.getElementById("map_canvas"),
      mapOptions);

  // Now attach the coordinate map type to the map's registry.
  map.mapTypes.set('coordinate',coordinateMapType);

  // We can now set the map to use the 'coordinate' map type.
  map.setMapTypeId('coordinate');
}

    
 

    

叠加层舆图类型

    某些舆图类型计划为可在现有舆图类型上使用。此类舆图类型可能具有透明图层，以指示兴致点或向用户表示其他数据。（Google 的路况图层就属于这种舆图类型。）

    在这种情况下，您不会希望将舆图类型视为独自的实体。因此，您可以使用 Map 的 overlayMapTypes 属性，直接将舆图类型添加到现有 MapType。该属性包括 MapType 的 MVCArray。全部舆图类型（基本和叠加层）都呈当初 mapPane 图层中。叠加层舆图类型将按其在 Map.overlayMapTypes 数组中的出现次序，表当初所附加到的任何基本舆图之上。

    以下示例与之前的示例相似，只是此示例在 ROADMAP 舆图类型上创立了一个图块叠加层 MapType：

function CoordMapType(tileSize) {
  this.tileSize = tileSize;
}

CoordMapType.prototype.getTile = function(coord, zoom, ownerDocument) {
  var div = ownerDocument.createElement('div');
  div.innerHTML = coord;
  div.style.width = this.tileSize.width + 'px';
  div.style.height = this.tileSize.height + 'px';
  div.style.fontSize = '10';
  div.style.borderStyle = 'solid';
  div.style.borderWidth = '1px';
  div.style.borderColor = '#AAAAAA';
  return div;
};

var map;
var chicago = new google.maps.LatLng(41.850033,-87.6500523);

function initialize() {
  var mapOptions = {
    zoom: 10,
    center: chicago,
    mapTypeId: google.maps.MapTypeId.ROADMAP
  };
  map = new google.maps.Map(document.getElementById("map_canvas"),
      mapOptions);

  // Insert this overlay map type as the first overlay map type at
  // position 0. Note that all overlay map types appear on top of
  // their parent base map.
  map.overlayMapTypes.insertAt(0, new CoordMapType(new google.maps.Size(256, 256)));
}

    
 

    

图片舆图类型

    实现 MapType 来作为基本舆图类型可能既耗时又耗力。API 为大多数常见舆图类型供给了可实现 MapType 接口的特别类：包括由单个图片文件组成的图块的舆图类型。

    这一 ImageMapType 类是使用 ImageMapTypeOptions 对象规范停止结构的，该规范定义了以下必填属性：

    

• tileSize（必填），用于指定图块（类型为 google.maps.Size）的大小。图块大小必须为矩形，但不必定要是正方形。
• getTileUrl（必填），用于指定函数（平日作为内联函数常量供给），以根据供给的世界坐标和缩放级别选择适合的图片图块。

    以下代码使用 Google 的路况图块实现基本 ImageMapType。此示例使用正规化函数来确保图块沿着您舆图的 x 轴（而不是 y 轴）重复。

var moonTypeOptions = {
  getTileUrl: function(coord, zoom) {
      var normalizedCoord = getNormalizedCoord(coord, zoom);
      if (!normalizedCoord) {
        return null;
      }
      var bound = Math.pow(2, zoom);
      return "http://mw1.google.com/mw-planetary/lunar/lunarmaps_v1/clem_bw" +
          "/" + zoom + "/" + normalizedCoord.x + "/" +
          (bound - normalizedCoord.y - 1) + ".jpg";
  },
  tileSize: new google.maps.Size(256, 256),
  maxZoom: 9,
  minZoom: 0,
  radius: 1738000,
  name: "Moon"
};

var moonMapType = new google.maps.ImageMapType(moonTypeOptions);

function initialize() {
  var myLatlng = new google.maps.LatLng(0, 0);
  var mapOptions = {
    center: myLatlng,
    zoom: 1,
    streetViewControl: false,
    mapTypeControlOptions: {
      mapTypeIds: ["moon"]
    }
  };

  var map = new google.maps.Map(document.getElementById("map_canvas"),
      mapOptions);
  map.mapTypes.set('moon', moonMapType);
  map.setMapTypeId('moon');
}

// Normalizes the coords that tiles repeat across the x axis (horizontally)
// like the standard Google map tiles.
function getNormalizedCoord(coord, zoom) {
  var y = coord.y;
  var x = coord.x;

  // tile range in one direction range is dependent on zoom level
  // 0 = 1 tile, 1 = 2 tiles, 2 = 4 tiles, 3 = 8 tiles, etc
  var tileRange = 1 << zoom;

  // don't repeat across y-axis (vertically)
  if (y < 0 || y >= tileRange) {
    return null;
  }

  // repeat across x-axis
  if (x < 0 || x >= tileRange) {
    x = (x % tileRange + tileRange) % tileRange;
  }

  return {
    x: x,
    y: y
  };
}

    
 

    

投影

    地球是一个三维球体（近似说法），而舆图是二维平面。您在 Google Maps API 内看到的舆图与其他的地球平面舆图一样，都是地球在平面上的投影。简单而言，投影可定义为纬度/经度值在投影舆图的坐标上的映射。

    Google Maps API 中的投影必须实现 Projection 接口。Projection 实现必须同时供给坐标系之间的单向映射和双向映射。也就是说，您必须定义地球坐标 (LatLng) 和 Projection 的世界坐标系之间的双向转换方法。Google 舆图使用墨卡托投影来根据地理数据创立舆图，并将舆图上的事件转换为地理坐标。您可以在 Map（或任何标准的基本 MapType）上调用 getProjection() 以获得该投影。该标准 Projection 可满足大部分使用需求，不过您也可以定义和使用自己的自定义投影。

    

实现投影

    在实现自定义投影时，您需要定义以下内容：

    

• 用于在经纬度坐标和笛卡尔平面之间停止双向映射的公式。（Projection 接口仅支持转换为直线坐标。）
• 基本图块大小。全部图块必须为矩形。
• 对于使用基本图块的舆图，必须将其“世界大小”的缩放级别设置为 0。请注意：对于缩放级别为 0 且仅由一个图块形成的舆图，其世界大小和基本图块大小是相同的。

    

投影中的坐标转换

    每个投影都供给了两种方法，以用于在这两个坐标系之间停止转换，您可以使用这些方法在地理坐标和世界坐标之间停止转换：

    

• Projection.fromLatLngToPoint() 方法可将 LatLng 值转换为世界坐标。此方法用于在舆图上放置叠加层（同时放置舆图本身）。
• Projection.fromPointToLatLng() 方法可将世界坐标转换为 LatLng 值。此方法用于将舆图上发生的事件（如点击）转换为地理坐标。

    Google 舆图假设投影是直线的。

    一般来说，您可能会在以下两种情况下使用投影：创立世界舆图和创立当地区域舆图。在前一种情况下，您应当确保投影在全部经度上都为直线且与经度垂直。某些投影（尤其是圆锥投影）可能为“局部垂直”（即指向北方），但该舆图定位相对于某些参考经度较远时，投影就可能会偏离正北（举例而言）。您可以在局部区域使用此类投影，但请注意该投影肯定存在误差，而且偏离参考经度越远，转换错误将会越明显。

    

投影中的舆图图块选择

    投影不仅可用于肯定位置或叠加层的位置，还可用于定位舆图图块本身。Maps API 使用 MapType 接口来呈现基本舆图，该接口必须同时声明用于识别舆图投影的 projection 属性和用于根据图块坐标值检索舆图图块的 getTile() 方法。图块坐标是您的基本图块大小（必须为矩形）和舆图的“世界大小”（缩放级别为 0 时的舆图世界的像素大小）为基本的。（对于缩放级别为 0 且仅由一个图块形成的舆图，其图块大小和世界大小是相等的。）

    您可以在 MapType 的 tileSize 属性内定义基本图块大小，并在投影的 fromLatLngToPoint() 和 fromPointToLatLng() 方法中明肯定义世界大小。

    由于所选择的图片取决于这些传递的值，因此在给定这些传递值的情况下，您可以对图片停止定名（例如 map_zoom_tileX_tileY.png），以便通过编程方法停止选择。

    以下示例定义了一个使用盖尔-彼得斯投影的 ImageMapType：

// Note: this value is exact as the map projects a full
// 360 degrees of longitude.
var GALL_PETERS_RANGE_X = 800;

// Note: this value is inexact as the map is cut off at ~ +/- 83 degrees.
// However, the polar regions produce very little increase in Y range, so
// we will use the tile size.
var GALL_PETERS_RANGE_Y = 510;

function degreesToRadians(deg) {
  return deg * (Math.PI / 180);
}

function radiansToDegrees(rad) {
  return rad / (Math.PI / 180);
}

function GallPetersProjection() {

  // Using the base map tile, denote the lat/lon of the equatorial origin.
  this.worldOrigin_ = new google.maps.Point(GALL_PETERS_RANGE_X * 400 / 800,
      GALL_PETERS_RANGE_Y / 2);

  // This projection has equidistant meridians, so each longitude
  // degree is a linear mapping.
  this.worldCoordinatePerLonDegree_ = GALL_PETERS_RANGE_X / 360;

  // This constant merely reflects that latitudes
  // vary from +90 to -90 degrees.
  this.worldCoordinateLatRange = GALL_PETERS_RANGE_Y / 2;
};

GallPetersProjection.prototype.fromLatLngToPoint = function(latLng) {

  var origin = this.worldOrigin_;
  var x = origin.x + this.worldCoordinatePerLonDegree_ * latLng.lng();

  // Note that latitude is measured from the world coordinate origin
  // at the top left of the map.
  var latRadians = degreesToRadians(latLng.lat());
  var y = origin.y - this.worldCoordinateLatRange * Math.sin(latRadians);

  return new google.maps.Point(x, y);
};

GallPetersProjection.prototype.fromPointToLatLng = function(point, noWrap) {

  var y = point.y;
  var x = point.x;

  if (y < 0) {
    y = 0;
  }
  if (y >= GALL_PETERS_RANGE_Y) {
    y = GALL_PETERS_RANGE_Y;
  }

  var origin = this.worldOrigin_;
  var lng = (x - origin.x) / this.worldCoordinatePerLonDegree_;
  var latRadians = Math.asin((origin.y - y) / this.worldCoordinateLatRange);
  var lat = radiansToDegrees(latRadians);
  return new google.maps.LatLng(lat, lng, noWrap);
};

function initialize() {
  var gallPetersMap;

  var gallPetersMapType = new google.maps.ImageMapType({
    getTileUrl: function(coord, zoom) {
      var numTiles = 1 << zoom;

      // Don't wrap tiles vertically.
      if (coord.y < 0 || coord.y >= numTiles) {
        return null;
      }

      // Wrap tiles horizontally.
      var x = ((coord.x % numTiles) + numTiles) % numTiles;

      // For simplicity, we use a tileset consisting of 1 tile at zoom level 0
      // and 4 tiles at zoom level 1.
      var baseURL = 'images/';
      baseURL += 'gall-peters_' + zoom + '_' + x + '_' + coord.y + '.png';
      return baseURL;
    },
    tileSize: new google.maps.Size(800, 512),
    minZoom: 0,
    maxZoom: 1,
    name: 'Gall-Peters'
  });

  gallPetersMapType.projection = new GallPetersProjection();

  var mapOptions = {
    zoom: 0,
    center: new google.maps.LatLng(0,0)
  };
  gallPetersMap = new google.maps.Map(document.getElementById("gallPetersMap"),
      mapOptions);

  gallPetersMap.mapTypes.set('gallPetersMap', gallPetersMapType);
  gallPetersMap.setMapTypeId('gallPetersMap');
  gallPetersMap.overlayMapTypes.insertAt(0, gallPetersMapType);
}

    
详细见 ：https://developers.google.com/maps/documentation/javascript/maptypes?hl=zh-cn

文章结束给大家分享下程序员的一些笑话语录： 关于编程语言
如果 C++是一把锤子的话，那么编程就会变成大手指头。
如果你找了一百万只猴子来敲打一百万个键盘，那么会有一只猴子会敲出一 段 Java 程序，而其余的只会敲出 Perl 程序。
一阵急促的敲门声，“谁啊！”，过了 5 分钟，门外传来“Java”。
如果说 Java 很不错是因为它可以运行在所有的操作系统上，那么就可以说 肛交很不错，因为其可以使用于所有的性别上。