データマッピング
概要
ソースローカルまたはリモートからインポートする方法を学ぶにGeoJSONデータと地図上に表示し、それを。データのインポートをマップするために様々な技術を説明するために、次のチュートリアルマップを使用してください。
次のセクションでは、このチュートリアルで必要なマップを作成するために、すべてのコードを示しています。
それを自分を試してみてください
あなたはクリックすることができ<>、コードウィンドウの右上隅にJSFiddleでこのコードを試してみます。
<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>
データのロード
このセクションでは、同じアプリケーションドメインに別のドメインからか、地図のJavaScript APIからデータをロードする方法について説明します。
同じドメインからのデータのロード
Googleの地図データ層は、 コンテナ（にGeoJSONを含む）すべての地理空間データを提供します。地図のJavaScript APIアプリケーションとデータが同じドメインファイルでホストされている場合は、使用できるmap.data.loadGeoJson()データをロードする方法を。ファイルには、同じドメイン内に存在する必要がありますが、別のサブドメイン上でホストすることができます。たとえば、あなたがからでき www.example.comへfiles.example.com要求。
map.data.loadGeoJson('data.json');
クロスドメインのデータのロード
ドメインは、そのような要求を許可するように設定されている場合は、独自のドメイン以外のドメインからのデータをも要求することができます。この許可は、標準と呼ばれる クロスオリジンリソースの共有 （CORS）。ドメインは、クロスドメイン要求を許可するようにした場合、ヘッダは、次のステートメントを含むべき応答：
Access-Control-Allow-Origin: *
使用 Chromeデベロッパーツール（デベロッパーツール）が CORSのドメインが有効になっているかを決定します。
失敗したダンプを再アップロードするには、キャンセルのアップロードを...再アップロードキャンセル
ダンプが失敗した再アップロードをキャンセル
从此类域加载数据与从同一域加载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对象来更改数据的外观。阅读开发者指南以获取有关样式化数据的更多信息 。
