web-dev-qa-db-ja.com

Googleマップで都市またはエリアのアウトラインを表示する方法

以下のサイトのように、場所またはエリアアウトラインを表示する方法：[エリアを入力すると、そのエリアの境界線が明確に表示されます。]

enter image description here

リンク

私は公式の地図ドキュメントで何時間も検索しましたが、これらのWebサイトがどのように地域の境界線を示しているのか、手がかりがありませんでした。また、いくつかの古い質問を見て、その不可能を読んでください。

google-mapsgoogle-maps-api-3
45
Chanakya Vadla

私が検索したものから、現時点ではMaps API v3にはGoogleからのオプションはなく、 2008年に遡るGoogle Maps APIの問題 古い質問がいくつかあります- Googleマップの結果に「検索エリア」アウトラインを追加 、 Googleはピンク色で検索エリアの強調表示を開始しました。この機能はGoogle Maps API 3で利用できますか？ 更新された情報がありますが、これは機能ではありません。

あなたができることは、地図上に図形を描くことです -しかし、このためには、あなたの地域の境界の座標が必要です。

ここで、管理エリアの境界を取得するには、少し作業を行う必要があります。 http://www.gadm.org/country （幸運で十分な詳細レベルがある場合あります）。

このWebサイトでは、.kmz拡張子を持つファイル（多くの形式が利用可能）をローカルにダウンロードできます。解凍すると、ほとんどの管理エリア（都市、村）を含む.kmlファイルが作成されます。

  <?xml version="1.0" encoding="utf-8" ?>
<kml xmlns="http://www.opengis.net/kml/2.2">
<Document id="root_doc">
<Schema name="x" id="x">
    <SimpleField name="ID_0" type="int"></SimpleField>
    <SimpleField name="ISO" type="string"></SimpleField>
    <SimpleField name="NAME_0" type="string"></SimpleField>
    <SimpleField name="ID_1" type="string"></SimpleField>
    <SimpleField name="NAME_1" type="string"></SimpleField>
    <SimpleField name="ID_2" type="string"></SimpleField>
    <SimpleField name="NAME_2" type="string"></SimpleField>
    <SimpleField name="TYPE_2" type="string"></SimpleField>
    <SimpleField name="ENGTYPE_2" type="string"></SimpleField>
    <SimpleField name="NL_NAME_2" type="string"></SimpleField>
    <SimpleField name="VARNAME_2" type="string"></SimpleField>
    <SimpleField name="Shape_Length" type="float"></SimpleField>
    <SimpleField name="Shape_Area" type="float"></SimpleField>
</Schema>
<Folder><name>x</name>
  <Placemark>
    <Style><LineStyle><color>ff0000ff</color></LineStyle><PolyStyle><fill>0</fill></PolyStyle></Style>
    <ExtendedData><SchemaData schemaUrl="#x">
        <SimpleData name="ID_0">186</SimpleData>
        <SimpleData name="ISO">ROU</SimpleData>
        <SimpleData name="NAME_0">Romania</SimpleData>
        <SimpleData name="ID_1">1</SimpleData>
        <SimpleData name="NAME_1">Alba</SimpleData>
        <SimpleData name="ID_2">1</SimpleData>
        <SimpleData name="NAME_2">Abrud</SimpleData>
        <SimpleData name="TYPE_2">Comune</SimpleData>
        <SimpleData name="ENGTYPE_2">Commune</SimpleData>
        <SimpleData name="VARNAME_2">Oras Abrud</SimpleData>
        <SimpleData name="Shape_Length">0.2792904164402</SimpleData>
        <SimpleData name="Shape_Area">0.00302673357146115</SimpleData>
    </SchemaData></ExtendedData>
      <MultiGeometry><Polygon><outerBoundaryIs><LinearRing><coordinates>23.117561340332031,46.269237518310547 23.108898162841797,46.265365600585937 23.107486724853629,46.264305114746207 23.104681015014762,46.260105133056641 23.101633071899471,46.250000000000114 23.100803375244254,46.249053955078239 23.097520828247184,46.246582031250114 23.0965576171875,46.245487213134822 23.095674514770508,46.244930267334098 23.092174530029354,46.243438720703182 23.088010787963924,46.240383148193473 23.083366394043082,46.238204956054801 23.075212478637809,46.234935760498047 23.071325302123967,46.239696502685547 23.070602416992131,46.241668701171875 23.069700241088924,46.242824554443416 23.068435668945369,46.243541717529354 23.066627502441406,46.244037628173771 23.064964294433651,46.246234893798885 23.062850952148437,46.247486114501953 23.0626220703125,46.248153686523438 23.062761306762752,46.250873565673942 23.061862945556697,46.255172729492301 23.061449050903434,46.256267547607422 23.05998420715332,46.258060455322322 23.057676315307674,46.259838104248161 23.055141448974666,46.262714385986442 23.053401947021484,46.264244079589901 23.049621582031193,46.266674041748161 23.043565750122013,46.268516540527457 23.041521072387695,46.269458770751953 23.034791946411076,46.270542144775334 23.027051925659293,46.27105712890625 23.025453567504826,46.271255493164063 23.022710800170898,46.272083282470703 23.020351409912053,46.271331787109432 23.018688201904297,46.270687103271598 23.015596389770508,46.270793914794922 23.014116287231502,46.271579742431697 23.009817123413143,46.275333404541016 23.006668090820426,46.277061462402401 23.004106521606445,46.279254913330135 23.001775741577205,46.282882690429688 23.005559921264648,46.283077239990348 23.009967803955135,46.28415679931652 23.014947891235465,46.286224365234489 23.019996643066463,46.28900146484375 23.024263381958121,46.292709350586051 23.027633666992301,46.295299530029411 23.028041839599609,46.295692443847656 23.032444000244197,46.294342041015625 23.03491401672369,46.293315887451229 23.044847488403434,46.290401458740234 23.047790527343807,46.28928375244152 23.053009033203239,46.288627624511719 23.057231903076229,46.288341522216797 23.064565658569393,46.287548065185547 23.070388793945426,46.286254882812614 23.075139999389592,46.284847259521428 23.075983047485465,46.284801483154411 23.085800170898494,46.28253173828125 23.098115921020451,46.280982971191406 23.099718093872127,46.280590057373104 23.105833053588981,46.278388977050838 23.112155914306641,46.274082183837947 23.116207122802791,46.270610809326172 23.117561340332031,46.269237518310547</coordinates></LinearRing></outerBoundaryIs></Polygon></MultiGeometry>
  </Placemark>
</Folder>
</Document></kml>

この時点から、ユーザーが都市/村を検索するとき、単に境界を取得し、マップ上のそれらの座標を描きます- https://developers.google.com/maps/documentation/javascript/overlays #Polygons

これがお役に立てば幸いです！幸運を！

border on Google Map using the above coordinates UPDATE：上記の座標を使用してこの都市の境界線を作成しました

                   var ctaLayer = new google.maps.KmlLayer({
                       url: 'https://www.dropbox.com/s/0grhlim3q4572jp/ROU_adm2%20-%20Copy.kml?dl=1'
  });
  ctaLayer.setMap(map);

（単一の都市の境界線を含む小さなkmlファイルをDropboxに配置しました）

これは、Googleに組み込まれたKMLシステムを使用することに注意してください。サーバーはファイルを取得し、ビューを計算してそれを送り返します。使用方法は限られており、境界線の外観を示すために使用しました。アプリケーションでは、kmlファイルから座標を解析し、それらを配列に入れることができるはずです（ポリゴンのドキュメントにあるように、- https://developers.google.com/maps/documentation/javascript/examples/polygon-arrays ）そしてそれらを表示します。

Googleが設定する境界 http://www.google.com/maps と、このデータで取得する境界には違いがあることに注意してください。

幸運を！ enter image description here

更新： http://Pastebin.com/x2V1aarJ 、 http://Pastebin.com/Gh55EDW5 これらはjavascriptファイルです（これらは縮小されたので、オンラインで使用しましたウェブサイトから読み取り可能にするツール）。あなたがこの私の解決策に完全に満足していない場合、それらを自由に研究してください。

幸運を祈ります！

66
radu-matei

私は同じものを探していて、答えを見つけました、

解決策は、スタイル付きマップを使用することです。以下のリンクで、ウィザードを使用してカスタムスタイルを作成し、同時にテストを実行できます google map style wizard

利用可能なすべてのオプションを確認できます： here

ここに州の境界を作成し、すべての道路とそこのラベルを非表示にするサンプルコードがあります。

    var styles = [
  {
    "featureType": "administrative.province",
    "elementType": "geometry.stroke",
    "stylers": [
      { "visibility": "on" },
      { "weight": 2.5 },
      { "color": "#24b0e2" }
    ]
  },{
    "featureType": "road",
    "elementType": "geometry",
    "stylers": [
      { "visibility": "off" }
    ]
  },{
    "featureType": "administrative.locality",
    "stylers": [
      { "visibility": "off" }
    ]
  },{
    "featureType": "road",
    "elementType": "labels",
    "stylers": [
      { "visibility": "off" }
    ]
  }
];

  var  geocoder = new google.maps.Geocoder();
   geocoder.geocode({
       'address': "rajasthan"
   }, (results, status)=> {
     var mapOpts = {
       mapTypeId: google.maps.MapTypeId.ROADMAP,
       scaleControl: true,
       scrollwheel: false,
       styles:styles,
       center: results[0].geometry.location,
       zoom:6
     }
     map = new google.maps.Map(document.getElementById("map"), mapOpts);
   });
4
abhirathore2006

だから完璧ではない解決策がありますが、私にとってはうまくいきました。 Googleのポリゴンの例を使用し、Googleマップのピンポイントを使用して緯度と経度の位置を取得します。

カルガリーピンポイント

私はあなたがスクリーンを見て、そしてあなたが望む数字で書く「眼のコピー＆ペースト」と呼ぶものを使用しました;-)

<style>
  #map {
    height: 500px;
  }
</style>
<script>

// This example creates a simple polygon representing the Host city of the 
// Greatest Outdoor Show On Earth.

 function initMap() {
   var map = new google.maps.Map(document.getElementById('map'), {
      zoom: 9,
      center: {lat: 51.039, lng: -114.204},
      mapTypeId: 'terrain'
    });

    // Define the LatLng coordinates for the polygon's path.
    var triangleCoords = [
      {lat: 51.183, lng: -114.234},
      {lat: 51.154, lng: -114.235},
      {lat: 51.156, lng: -114.261},
      {lat: 51.104, lng: -114.259},
      {lat: 51.106, lng: -114.261},
      {lat: 51.102, lng: -114.272},
      {lat: 51.081, lng: -114.271},
      {lat: 51.081, lng: -114.234},
      {lat: 51.009, lng: -114.236},
      {lat: 51.008, lng: -114.141},
      {lat: 50.995, lng: -114.142},
      {lat: 50.998, lng: -114.160},
      {lat: 50.984, lng: -114.163},
      {lat: 50.987, lng: -114.141},
      {lat: 50.979, lng: -114.141},
      {lat: 50.921, lng: -114.141},
      {lat: 50.921, lng: -114.210},
      {lat: 50.893, lng: -114.210},
      {lat: 50.892, lng: -114.140},
      {lat: 50.888, lng: -114.139},
      {lat: 50.878, lng: -114.094},
      {lat: 50.878, lng: -113.994},
      {lat: 50.840, lng: -113.954},
      {lat: 50.854, lng: -113.905},
      {lat: 50.922, lng: -113.906},
      {lat: 50.935, lng: -113.877},
      {lat: 50.943, lng: -113.877},
      {lat: 50.955, lng: -113.912},
      {lat: 51.183, lng: -113.910}
    ];

    // Construct the polygon.
    var bermudaTriangle = new google.maps.Polygon({
      paths: triangleCoords,
      strokeColor: '#FF0000',
      strokeOpacity: 0.8,
      strokeWeight: 2,
      fillColor: '#FF0000',
      fillOpacity: 0.35
    });
    bermudaTriangle.setMap(map);
  }
</script>


<div id="map"></div>
<script async defer src="https://maps.googleapis.com/maps/api/jskey=YOUR_API_KEY&callback=initMap">
</script>

これにより、カルガリーの概要がわかります。 ここに画像を添付しました。

1
Jeremy

私は失敗したTwitterジオAPIを試してみました。

GoogleマップAPIは失敗しましたが、これまでのところ、どのAPIでも都市の制限を取得することはできません。

Twitter APIジオエンドポイントは、都市の境界を提供しません。

彼らがあなたに提供するのは、5ポイント（緯度、長さ）のバウンディングボックスだけです

これは私がサンフランシスコのTwitter API geoから取得したものです enter image description here

0
hoogw