一切就绪!

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

激活 Google Maps JavaScript API

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

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

将数据导入地图

概览

学习如何从本地或远程来源导入 GeoJSON 数据,并将其显示在地图上。 本教程利用下面这幅地图来说明将数据导入地图的各种方法。

下文显示了创建本教程中的地图所需的完整代码。

var map;
function initMap() {
  map = new google.maps.Map(document.getElementById('map'), {
    zoom: 2,
    center: new google.maps.LatLng(2.8,-187.3),
    mapTypeId: 'terrain'
  });

  // Create a <script> tag and set the USGS URL as the source.
  var script = document.createElement('script');
  // This example uses a local copy of the GeoJSON stored at
  // http://earthquake.usgs.gov/earthquakes/feed/v1.0/summary/2.5_week.geojsonp
  script.src = 'https://developers.google.com/maps/documentation/javascript/examples/json/earthquake_GeoJSONP.js';
  document.getElementsByTagName('head')[0].appendChild(script);
}

// Loop through the results array and place a marker for each
// set of coordinates.
window.eqfeed_callback = function(results) {
  for (var i = 0; i < results.features.length; i++) {
    var coords = results.features[i].geometry.coordinates;
    var latLng = new google.maps.LatLng(coords[1],coords[0]);
    var marker = new google.maps.Marker({
      position: latLng,
      map: map
    });
  }
}
<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>

自己试一试

悬停在代码块右上角以复制代码或在 JSFiddle 中打开。

<!DOCTYPE html>
<html>
  <head>
    <style>
      /* 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;
      }
    </style>
  </head>
  <body>
    <div id="map"></div>
    <script>
      var map;
      function initMap() {
        map = new google.maps.Map(document.getElementById('map'), {
          zoom: 2,
          center: new google.maps.LatLng(2.8,-187.3),
          mapTypeId: 'terrain'
        });

        // Create a <script> tag and set the USGS URL as the source.
        var script = document.createElement('script');
        // This example uses a local copy of the GeoJSON stored at
        // http://earthquake.usgs.gov/earthquakes/feed/v1.0/summary/2.5_week.geojsonp
        script.src = 'https://developers.google.com/maps/documentation/javascript/examples/json/earthquake_GeoJSONP.js';
        document.getElementsByTagName('head')[0].appendChild(script);
      }

      // Loop through the results array and place a marker for each
      // set of coordinates.
      window.eqfeed_callback = function(results) {
        for (var i = 0; i < results.features.length; i++) {
          var coords = results.features[i].geometry.coordinates;
          var latLng = new google.maps.LatLng(coords[1],coords[0]);
          var marker = new google.maps.Marker({
            position: latLng,
            map: map
          });
        }
      }
    </script>
    <script async defer
    src="https://maps.googleapis.com/maps/api/js?key=YOUR_API_KEY&callback=initMap">
    </script>
  </body>
</html>

加载数据

此部分介绍如何从与 Maps JavaScript API 应用相同或不同的网域加载数据。

从同一网域加载数据

Google 地图数据层提供了一个可用于存储任意地理空间数据(包括 GeoJSON)的容器。

如果数据所在的文件托管在与 Maps JavaScript API 应用相同的网域上,可以使用 map.data.loadGeoJson() 方法加载数据。

文件必须位于同一网域上,但可以将其托管在不同的子域名中。

例如,可以从 www.example.comfiles.example.com 发出请求。

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

跨网域加载数据

还可以从所在网域以外的其他网域请求数据,前提是网域的配置允许这样的请求。 针对这种权限的标准称作跨来源资源共享 (CORS)。

如果网域已允许跨域请求,其响应标头应包括以下声明:

Access-Control-Allow-Origin: *

使用 Chrome 开发者工具 (DevTools) 了解网域是否启用了 CORS。

从这种网域加载数据与从同一网域加载 JSON 的方法相同:

map.data.loadGeoJson('http://www.CORS-ENABLED-SITE.com/data.json');

请求 JSONP

目标网域必须支持 JSONP 请求,才能使用此方法。

要请求 JSONP,请使用 createElement() 向文档头部添加一个 script 标记。

var script = document.createElement('script');
script.src = 'http://earthquake.usgs.gov/earthquakes/feed/v1.0/summary/2.5_week.geojsonp';
document.getElementsByTagName('head')[0].appendChild(script);

该脚本运行时,目标网域会将数据以参数形式传递给_另一_ 脚本(通常命名为 callback())。 目标网域定义回调脚本的名称,即在浏览器中加载目标网址时页面上出现的第一个名称。

例如,在浏览器窗口中加载 http://earthquake.usgs.gov/earthquakes/feed/v1.0/summary/2.5_week.geojsonp 时显示的回调名称为 eqfeed_callback

必须在代码中定义回调脚本:

function eqfeed_callback(response) {
  map.data.addGeoJson(response);
}

使用 addGeoJson() 方法将解析过的 GeoJSON 数据添加到地图上。

设置数据样式

可通过向 Map 对象添加 GeoJSON 数据来改变数据的外观。

如需了解有关设置数据样式的详细信息,请阅读开发者指南。

了解详情

  • GeoJSON 是一种得到广泛使用的开源地理数据编码格式,基于 JSON(JavaScript 对象标记)制定。 专为 JSON 数据设计的 JavaScript 工具和方法同样兼容 GeoJSON。

如需了解详细信息,请阅读开发者指南

  • JSONP 代表_填充式_ JSON。 它是运行在网络浏览器中的 JavaScript 程序内使用的一种通信方法,用于从位于不同网域的服务器请求数据。

发送以下问题的反馈:

此网页
Google Maps JavaScript API
Google Maps JavaScript API
需要帮助?请访问我们的支持页面