説明
GeoJSONデータのポリゴンの線の不透明度を指定するには、mapオブジェクトのdataオブジェクトに用意されたsetStyle()メソッドを使います。setStyle()メソッドのパラメーターにオブジェクトリテラル形式を使って指定します。線の不透明度はstrokeOpacityプロパティで指定することができます。指定できる色はカラー名やカラーコードなどスタイルシートで指定可能なカラー値になります。
Google API Expertが解説する Google Maps APIプログラミングガイド。Google Maps API Expertが最新のGoogle Maps API等について解説しています。
【
アマゾンで購入する】
<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="utf-8">
<title>Google Maps API ver 3 Sample/グーグルマップAPIサンプル/Google Maps API样品</title>
<link rel="stylesheet" href="css/main.css" type="text/css" media="all">
<script src="http://maps.google.com/maps/api/js?sensor=false" type="text/javascript"></script>
</head>
<body>
<div id="gmap"></div>
<script type="text/javascript">
var map = new google.maps.Map(
document.getElementById("gmap"),{
zoom : 11,
center : new google.maps.LatLng(36.050764426908515, 138.0823516845703),
mapTypeId : google.maps.MapTypeId.ROADMAP
}
);
map.data.loadGeoJson('./geodata.json');
map.data.setStyle({ strokeOpacity: 0.8, strokeColor: "red", strokeWeight: 20 });
</script>
</body>
</html>
●geodata.jsonファイルの内容
{
"type": "FeatureCollection",
"features": [
{
"type": "Feature",
"properties": {},
"geometry": {
"type": "Polygon",
"coordinates": [
[
[
138.09642791748047,
36.06769468295312
],
[
138.0929946899414,
36.064364428590025
],
[
138.08612823486328,
36.064364428590025
],
[
138.07857513427734,
36.06283801489308
],
[
138.07960510253906,
36.05978509865871
],
[
138.0758285522461,
36.059368782721876
],
[
138.07497024536133,
36.060201412392914
],
[
138.06879043579102,
36.060478953658716
],
[
138.06449890136716,
36.057287169999256
],
[
138.06123733520505,
36.05631573188472
],
[
138.05557250976562,
36.05520550221327
],
[
138.05076599121094,
36.05423403840295
],
[
138.05557250976562,
36.04743345598549
],
[
138.06192398071286,
36.045351527583854
],
[
138.06346893310547,
36.04326954412626
],
[
138.06638717651367,
36.03952183516581
],
[
138.06690216064453,
36.03813374954442
],
[
138.07085037231445,
36.035079875053015
],
[
138.07205200195312,
36.032997620005055
],
[
138.07514190673828,
36.032025882143856
],
[
138.07754516601562,
36.029110596631874
],
[
138.07977676391602,
36.02758349925773
],
[
138.08612823486328,
36.033691711137564
],
[
138.08835983276367,
36.0338305286301
],
[
138.0926513671875,
36.03813374954442
],
[
138.09436798095703,
36.03966064238223
],
[
138.10123443603516,
36.0382725592076
],
[
138.10277938842773,
36.04160391772081
],
[
138.10569763183594,
36.04354714510159
],
[
138.10895919799805,
36.047017074709686
],
[
138.11325073242188,
36.04896016848816
],
[
138.11342239379883,
36.05326256260144
],
[
138.1084442138672,
36.06228294802469
],
[
138.10449600219727,
36.0624217151089
],
[
138.10157775878906,
36.06658461382945
],
[
138.09642791748047,
36.06769468295312
]
]
]
}
}
]
}