一切就绪！

着手开发前，请先阅读我们的开发者文档。

激活 Google Maps JavaScript API

为帮助您起步，我们将引导您在 Google Developers Console 中先完成几项任务：

  1. 创建或选择项目
  2. 激活 Google Maps JavaScript API 及相关服务
  3. 创建相应密钥
继续

数据层

Google 地图数据层提供了一个可用于储存任意地理空间数据的容器。您可以使用数据层储存您的自定义数据，或在 Google 地图上显示 GeoJSON 数据。

概览

观看这个 DevBytes 视频，了解有关数据层的更多信息。

利用 Google Maps JavaScript API，您可以使用各种叠加层（如标记、折线、多边形等）为地图添加标记。这些注解每个均将样式信息与位置数据相结合。google.maps.Data 类是一个可用于储存任意地理空间数据的容器。您可以使用数据层向地图添加任意地理空间数据，而无需添加这些叠加层。如果该数据中包含几何形状，如点、线或多边形，API 会默认将它们呈现为标记、折线和多边形。您可以根据需要将这些特征设计为普通叠加层，或者根据数据集中包含的其他属性应用样式规则。

google.maps.Data 类允许您：

  • 在地图上绘制多边形。
  • 向地图添加 GeoJSON 数据。
    GeoJSON 是一种针对互联网上的地理空间数据的标准。Data 类按照 GeoJSON 的结构表示其数据，并使您能够轻松显示 GeoJSON 数据。使用 loadGeoJson() 方法可轻松导入 GeoJSON 数据并显示点、线-字符串和多边形
  • 使用 google.maps.Data 对任意数据建模。
    现实世界中的大多数实体都具有相关联的其他属性。例如，商店有营业时间，道路有交通流动速度，每个女童子军机构都有义卖饼干的主场。利用 google.maps.Data，您可以对这些属性建模，并为您的数据设置相应的样式
  • 选择如何表示数据以及实时改变想法。
    数据层让您能够自行决定数据的可视化和交互方式。例如，在地图上查找便利店时，您可以选择仅显示销售公交车票的那些商店

绘制多边形

Data.Polygon 类可为您处理多边形环绕。可以向其传递一个包含一个或多个线性环（定义为纬度/经度坐标）的数组。第一个线性环定义多边形的外边界。如果传递的线性环不止一个，第二个以及后续线性环用于定义多边形中的内部路径（孔）。

下例创建的矩形多边形中包含两个孔：

// This example uses the Google Maps JavaScript API's Data layer
// to create a rectangular polygon with 2 holes in it.

function initMap() {
  var map = new google.maps.Map(document.getElementById('map'), {
    zoom: 6,
    center: {lat: -33.872, lng: 151.252},
  });

  // Define the LatLng coordinates for the outer path.
  var outerCoords = [
    {lat: -32.364, lng: 153.207}, // north west
    {lat: -35.364, lng: 153.207}, // south west
    {lat: -35.364, lng: 158.207}, // south east
    {lat: -32.364, lng: 158.207}  // north east
  ];

  // Define the LatLng coordinates for an inner path.
  var innerCoords1 = [
    {lat: -33.364, lng: 154.207},
    {lat: -34.364, lng: 154.207},
    {lat: -34.364, lng: 155.207},
    {lat: -33.364, lng: 155.207}
  ];

  // Define the LatLng coordinates for another inner path.
  var innerCoords2 = [
    {lat: -33.364, lng: 156.207},
    {lat: -34.364, lng: 156.207},
    {lat: -34.364, lng: 157.207},
    {lat: -33.364, lng: 157.207}
  ];

  map.data.add({geometry: new google.maps.Data.Polygon([outerCoords,
                                                        innerCoords1,
                                                        innerCoords2])})
}
<div id="map"></div>
/* Always set the map height explicitly to define the size of the div
 * element that contains the map. */
#map {
  height: 100%;
}
/* Optional: Makes the sample page fill the window. */
html, body {
  height: 100%;
  margin: 0;
  padding: 0;
}
 <!-- Replace the value of the key parameter with your own API key. -->
<script async defer
src="https://maps.googleapis.com/maps/api/js?key=AIzaSyCkUOdZ5y7hMm0yrcCQoCvLwzdM6M8s5qk&callback=initMap">
</script>
// This example uses the Google Maps JavaScript API's Data layer
// to create a rectangular polygon with 2 holes in it.

function initMap() {
  var map = new google.maps.Map(document.getElementById('map'), {
    zoom: 6,
    center: {lat: -33.872, lng: 151.252},
  });

  // Define the LatLng coordinates for the outer path.
  var outerCoords = [
    {lat: -32.364, lng: 153.207}, // north west
    {lat: -35.364, lng: 153.207}, // south west
    {lat: -35.364, lng: 158.207}, // south east
    {lat: -32.364, lng: 158.207}  // north east
  ];

  // Define the LatLng coordinates for an inner path.
  var innerCoords1 = [
    {lat: -33.364, lng: 154.207},
    {lat: -34.364, lng: 154.207},
    {lat: -34.364, lng: 155.207},
    {lat: -33.364, lng: 155.207}
  ];

  // Define the LatLng coordinates for another inner path.
  var innerCoords2 = [
    {lat: -33.364, lng: 156.207},
    {lat: -34.364, lng: 156.207},
    {lat: -34.364, lng: 157.207},
    {lat: -33.364, lng: 157.207}
  ];

  map.data.add({geometry: new google.maps.Data.Polygon([outerCoords,
                                                        innerCoords1,
                                                        innerCoords2])})
}

查看示例。

加载 GeoJSON

GeoJSON 是一种针对互联网上共享地理空间数据的通用标准，属于轻量版，而且便于人工读取，非常适合用于共享与协作。利用数据层，您只需编写一行代码，即可向 Google 地图添加 GeoJSON 数据。

map.data.loadGeoJson('google.json');

每个地图均有一个 map.data 对象充当数据层，用于储存任意地理空间数据，包括 GeoJSON。您可以通过调用 data 对象的 loadGeoJSON() 方法，加载和显示 GeoJSON 文件。下例显示了如何添加地图并加载外部 GeoJSON 数据。

var map;
function initMap() {
  map = new google.maps.Map(document.getElementById('map'), {
    zoom: 4,
    center: {lat: -28, lng: 137}
  });

  // NOTE: This uses cross-domain XHR, and may not work on older browsers.
  map.data.loadGeoJson(
      'https://storage.googleapis.com/mapsdevsite/json/google.json');
}
<div id="map"></div>
/* Always set the map height explicitly to define the size of the div
 * element that contains the map. */
#map {
  height: 100%;
}
/* Optional: Makes the sample page fill the window. */
html, body {
  height: 100%;
  margin: 0;
  padding: 0;
}
 <!-- Replace the value of the key parameter with your own API key. -->
<script async defer
src="https://maps.googleapis.com/maps/api/js?key=AIzaSyCkUOdZ5y7hMm0yrcCQoCvLwzdM6M8s5qk&callback=initMap">
</script>
var map;
function initMap() {
  map = new google.maps.Map(document.getElementById('map'), {
    zoom: 4,
    center: {lat: -28, lng: 137}
  });

  // NOTE: This uses cross-domain XHR, and may not work on older browsers.
  map.data.loadGeoJson(
      'https://storage.googleapis.com/mapsdevsite/json/google.json');
}

查看示例。

GeoJSON 示例

此页的多数示例都使用了一个通用 GeoJSON 文件。此文件在澳大利亚上方以多边形形式定义“Google”中的六个字符。测试数据层时，请随意复制或修改此文件。

注：要从另一个域加载一份 JSON 文件，该域必须已启用跨域资源共享。

展开 google.json 旁边的小箭头后即可看到此文件的完整文本，如下所示。

样式化 GeoJSON 数据

使用 Data.setStyle() 方法可指定您数据应采取的显示方式。setStyle() 方法会使用 StyleOptions 对象字面量或一个用于计算每个特征样式的函数。

简单的样式规则

设置特征样式的最简单方法是向 setStyle() 传递一个 StyleOptions 对象字面量。这将为集合中的每个特征设置一个样式。请注意，每个特征类型只能呈现一个可用选项子集。这意味着可以将不同特征类型的样式合并到一个对象字面量。例如，下面的代码段设置了一个自定义 icon（仅影响点类几何形状）和 fillColor（仅影响多边形）。

map.data.setStyle({
  icon: '//example.com/path/to/image.png',
  fillColor: 'green'
});

有关有效样式/特征组合的详细信息请见样式选项部分。

下例介绍了如何使用 StyleOptions 对象字面量为多个特征设置描边和填充颜色。请注意，每个多边形的样式均相同。

// Set the stroke width, and fill color for each polygon
map.data.setStyle({
  fillColor: 'green',
  strokeWeight: 1
});

查看示例

说明性样式规则

如果您想要更新很多叠加层（如标记或折线）的样式，通常需要循环访问地图上的每个叠加层并分别为其设置样式。您可以使用数据层设置说明性规则，它们将应用于您的整个数据集。当数据或规则更新时，系统将自动为每个特征应用相应的样式。您可以使用特征属性自定义其样式。

例如，下面的代码就是通过检查各字符在 ASCII 字符集中的位置，设置 google.json 中每个字符的颜色。在此例中，我们已经将字符位置随我们的数据一起进行了编码。

// Color Capital letters blue, and lower case letters red.
// Capital letters are represented in ascii by values less than 91
map.data.setStyle(function(feature) {
    var ascii = feature.getProperty('ascii');
    var color = ascii > 91 ? 'red' : 'blue';
    return {
      fillColor: color,
      strokeWeight: 1
    };
});

删除样式

如果您要删除任何已应用的样式，请向 setStyles() 方法传递一个空的对象字面量。

// Remove custom styles.
map.data.setStyle({});

这将删除任何您已指定的自定义样式，而且特征将使用默认样式呈现。如果您不想再呈现特征，请将 StyleOptions 的 visible 属性设置为 false。

// Hide the Data layer.
map.data.setStyle({visible: false});

重写默认样式

样式规则通常会应用到数据层中的每个特征。不过，有时您可能想要对某些特定特征应用特殊的样式规则。例如，在点击某特征时突出显示该特征。

要应用特殊样式规则，请使用 overrideStyle() 方法。除了已经在 setStyle() 中指定的全局样式外，系统将应用您利用 overrideStyle() 方法更改的任何属性。例如，下面的代码将在某多边形被点击时更改其填充颜色，但不会设置任何其他样式。

// Set the global styles.
map.data.setStyle({
  fillColor: 'green',
  strokeWeight: 3
});

// Set the fill color to red when the feature is clicked.
// Stroke weight remains 3.
map.data.addListener('click', function(event) {
   map.data.overrideStyle(event.feature, {fillColor: 'red'});
});

调用 revertStyles() 方法可删除所有重写样式。

样式选项

每个特征可用的样式选项取决于特征类型。例如，fillColor 将仅在多边形类几何形状上呈现，icon 将仅在点类几何形状上显示。如需了解详细信息，请参阅 StyleOptions 的参考文档。

适用于所有几何形状

  • clickable：如果设置为 true，则特征将接收鼠标和触摸事件
  • visible：如果设置为 true，则特征将处于可见状态
  • zIndex：地图上的所有特征均按照其 zIndex 显示，值较高的特征显示在值较低的特征前面。标记始终显示在线-字符串和多边形前面

适用于点类几何形状

  • cursor：悬停时显示的鼠标光标
  • icon：为点类几何形状显示的图标
  • shape：定义进行碰撞检测所用的图像映射
  • title：翻转文本

适用于线类几何形状

  • strokeColor：描边颜色。支持所有 CSS3 颜色，扩展的已命名颜色除外。
  • strokeOpacity：描边不透明度介于 0.0 和 1.0 之间
  • strokeWeight：描边宽度（单位：像素）

适用于多边形类几何形状

  • fillColor：填充颜色。支持所有 CSS3 颜色，扩展的已命名颜色除外。
  • fillOpacity：填充不透明度介于 0.0 和 1.0 之间
  • strokeColor：描边颜色。支持所有 CSS3 颜色，扩展的已命名颜色除外。
  • strokeOpacity：描边不透明度介于 0.0 和 1.0 之间
  • strokeWeight：描边宽度（单位：像素）

添加事件处理程序

特征对事件（如 mouseup 或 mousedown）做出响应。您可以添加事件侦听器以允许用户与地图上的数据进行交互。在下例中，我们添加了一个 mouseover 事件，该事件会在鼠标光标下方显示特征的相关信息。

// Set mouseover event for each feature.
map.data.addListener('mouseover', function(event) {
  document.getElementById('info-box').textContent =
      event.feature.getProperty('letter');
});

数据层事件

以下事件是所有特征都有的事件，无论其几何形状类型如何：

  • addfeature
  • click
  • dblclick
  • mousedown
  • mouseout
  • mouseover
  • mouseup
  • removefeature
  • removeproperty
  • rightclick
  • setgeometry
  • setproperty

有关这些事件的详细信息，请参阅 google.maps.data 类的参考文档。

动态更改外观

您可以通过向 google.maps.data.setStyle() 方法传递一个用于计算每个特征样式的函数，来设置数据层的样式。特征的属性每次更新时，系统即会调用此函数。

在下例中，我们为 click 事件添加了一个事件侦听器，该事件会更新特征的 isColorful 属性。在设置属性后，特征样式会立即进行相应的更新，以体现这一变化。

// Color each letter gray. Change the color when the isColorful property
// is set to true.
map.data.setStyle(function(feature) {
  var color = 'gray';
  if (feature.getProperty('isColorful')) {
    color = feature.getProperty('color');
  }
  return /** @type {google.maps.Data.StyleOptions} */({
    fillColor: color,
    strokeColor: color,
    strokeWeight: 2
  });
});

// When the user clicks, set 'isColorful', changing the color of the letters.
map.data.addListener('click', function(event) {
  event.feature.setProperty('isColorful', true);
});

// When the user hovers, tempt them to click by outlining the letters.
// Call revertStyle() to remove all overrides. This will use the style rules
// defined in the function passed to setStyle()
map.data.addListener('mouseover', function(event) {
  map.data.revertStyle();
  map.data.overrideStyle(event.feature, {strokeWeight: 8});
});

map.data.addListener('mouseout', function(event) {
  map.data.revertStyle();
});

查看示例

发送以下问题的反馈：

此网页
文档反馈
Google Maps JavaScript API
Google Maps JavaScript API
产品反馈
需要帮助？请访问我们的支持页面。