Data Mapping
Overview
Learn how to import from a local or remote source GeoJSON data and displays it on a map. Use the following tutorial maps to illustrate a variety of techniques to map data import.
The following sections show all the code to create a map required in this tutorial.
Try it yourself
You can click <>to try this code in JSFiddle in the top right corner of the code window.
<span style="color:#37474f"><span style="color:#c53929"><!DOCTYPE html></span>
<span style="color:#3b78e7"><html></span>
<span style="color:#3b78e7"><head></span>
<span style="color:#3b78e7"><style></span>
<span style="color:#d81b60">/* Always set the map height explicitly to define the size of the div
* element that contains the map. */</span>
#map {
<span style="color:#3b78e7">height</span>: <span style="color:#c53929">100%</span>;
}
<span style="color:#d81b60">/* Optional: Makes the sample page fill the window. */</span>
html, body {
<span style="color:#3b78e7">height</span>: <span style="color:#c53929">100%</span>;
<span style="color:#3b78e7">margin</span>: <span style="color:#c53929">0</span>;
<span style="color:#3b78e7">padding</span>: <span style="color:#c53929">0</span>;
}
<span style="color:#3b78e7"></style></span>
<span style="color:#3b78e7"></head></span>
<span style="color:#3b78e7"><body></span>
<span style="color:#3b78e7"><div</span> <span style="color:#9c27b0">id</span>=<span style="color:#0d904f">"map"</span><span style="color:#3b78e7">></div></span>
<span style="color:#3b78e7"><script></span>
<span style="color:#3b78e7">var</span> map;
<span style="color:#3b78e7">function</span> initMap() {
map = <span style="color:#3b78e7">new</span> google.maps.<span style="color:#9c27b0">Map</span>(document.getElementById(<span style="color:#0d904f">'map'</span>), {
zoom: <span style="color:#c53929">2</span>,
center: <span style="color:#3b78e7">new</span> google.maps.<span style="color:#9c27b0">LatLng</span>(<span style="color:#c53929">2.8</span>,-<span style="color:#c53929">187.3</span>),
mapTypeId: <span style="color:#0d904f">'terrain'</span>
});
<span style="color:#d81b60">// Create a <script> tag and set the USGS URL as the source.</span>
<span style="color:#3b78e7">var</span> script = document.createElement(<span style="color:#0d904f">'script'</span>);
<span style="color:#d81b60">// This example uses a local copy of the GeoJSON stored at</span>
<span style="color:#d81b60">// http://earthquake.usgs.gov/earthquakes/feed/v1.0/summary/2.5_week.geojsonp</span>
script.src = <span style="color:#0d904f">'https://developers.google.com/maps/documentation/javascript/examples/json/earthquake_GeoJSONP.js'</span>;
document.getElementsByTagName(<span style="color:#0d904f">'head'</span>)[<span style="color:#c53929">0</span>].appendChild(script);
}
<span style="color:#d81b60">// Loop through the results array and place a marker for each</span>
<span style="color:#d81b60">// set of coordinates.</span>
window.eqfeed_callback = <span style="color:#3b78e7">function</span>(results) {
<span style="color:#3b78e7">for</span> (<span style="color:#3b78e7">var</span> i = <span style="color:#c53929">0</span>; i < results.features.length; i++) {
<span style="color:#3b78e7">var</span> coords = results.features[i].geometry.coordinates;
<span style="color:#3b78e7">var</span> latLng = <span style="color:#3b78e7">new</span> google.maps.<span style="color:#9c27b0">LatLng</span>(coords[<span style="color:#c53929">1</span>],coords[<span style="color:#c53929">0</span>]);
<span style="color:#3b78e7">var</span> marker = <span style="color:#3b78e7">new</span> google.maps.<span style="color:#9c27b0">Marker</span>({
position: latLng,
map: map
});
}
}
<span style="color:#3b78e7"></script></span>
<span style="color:#3b78e7"><script</span> <span style="color:#9c27b0">async</span> <span style="color:#9c27b0">defer</span>
<span style="color:#9c27b0">src</span>=<span style="color:#0d904f">"https://maps.googleapis.com/maps/api/js?key=</span>YOUR_API_KEY<span style="color:#0d904f">&callback=initMap"</span><span style="color:#3b78e7">></span>
<span style="color:#3b78e7"></script></span>
<span style="color:#3b78e7"></body></span>
<span style="color:#3b78e7"></html></span></span>
Loading data
This section describes how to load data from another domain or from Maps JavaScript API with the same application domain.
Load data from the same domain
The Google map data layers provide any geospatial data (including GeoJSON) containers. If your data with the Maps JavaScript API applications hosted on the same domain file, you can use the map.data.loadGeoJson()method to load the data. The file must be in the same domain, but you can be hosted on another subdomain. For example, you can from www.example.com to files.example.com request.
map.data.loadGeoJson('data.json');
Cross-domain data loading
If the domain is configured to allow such a request, you can also request data from a domain other than your own domain. This permission is called a standard Cross-Origin Resource Sharing (CORS). If the domain to allow cross-domain request, which response header should contain the following statements:
Access-Control-Allow-Origin: *
Use Chrome Developer Tools (DevTools) to determine the domain of CORS is enabled.
Dump failed to re-upload Cancel Uploading ...re-uploadCancel
dump failed to re-upload canceled
从此类域加载数据与从同一域加载JSON相同：
map.data.loadGeoJson('http://www.CORS-ENABLED-SITE.com/data.json');
请求JSONP
目标域必须支持对JSONP的请求才能使用此技术。
从您无法控制的域中请求JSONP很有风险。
由于浏览器会加载任何以脚本形式返回的代码，因此您只应从信任的域请求JSONP。通常，JSONP被CORS代替 ；后者要安全得多，如果两者都可用，则应该是您的首选。
要请求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()。目标域定义了回调脚本名称，这是在浏览器中加载目标URL时页面上的名字。
例如， 在浏览器窗口中加载 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数据放置在地图上。
样式化数据
您可以通过将GeoJSON数据添加到Map对象来更改数据的外观。阅读开发者指南以获取有关样式化数据的更多信息 。
