一切就绪!

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

激活 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({});

这将删除任何您已指定的自定义样式,而且特征将使用默认样式呈现。如果您不想再呈现特征,请将 StyleOptionsvisible 属性设置为 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.01.0 之间
  • strokeColor:描边颜色。支持所有 CSS3 颜色,扩展的已命名颜色除外。
  • strokeOpacity:描边不透明度介于 0.0 和 1.0 之间
  • strokeWeight:描边宽度(单位:像素)

添加事件处理程序

特征对事件(如 mouseupmousedown)做出响应。您可以添加事件侦听器以允许用户与地图上的数据进行交互。在下例中,我们添加了一个 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
需要帮助?请访问我们的支持页面