web-dev-qa-db-ja.com

Google Map API v3を使用したポリゴンの描画と座標の取得

Google Maps API v3を使用してアプリケーションを開発しようとしています。私がやろうとしているのは最初に、ユーザーがGoogleマップにポリゴンを描画し、自分のポリゴンの座標を取得してデータベースに保存できるようにします。次に、ユーザーが保存した座標を表示します。

ユーザーがAPI v3を使用してGoogleマップにポリゴンを描画し、座標を取得できるようにする方法がわかりません。それらの座標を取得できれば、データベースに保存するのは簡単です。

http://gmaps-samples.googlecode.com/svn/trunk/poly/mymapstoolbar.html はほぼ正確な例ですが、API v2を使用し、座標を提供しません。 API v3を使用して、すべての座標を取得できるようにします。

API v3でポリゴンを描画し、その座標を取得する例はありますか？

google-mapspolygon
28
Burak Erdem

ここに、API V3を使用した上記の例があります

http://nettique.free.fr/gmap/toolbar.html

13
Royce

ここで必要なのは、使用したい描画ツールだけです-ポリゴンを移動するか、形状を変更すると、座標がマップのすぐ下に表示されます： jsFiddle here .

また、これは Codepen です

[〜＃〜] js [〜＃〜]

var bermudaTriangle;
function initialize() {
    var myLatLng = new google.maps.LatLng(33.5190755, -111.9253654);
    var mapOptions = {
        zoom: 12,
        center: myLatLng,
        mapTypeId: google.maps.MapTypeId.RoadMap
    };

    var map = new google.maps.Map(document.getElementById('map-canvas'),
                                  mapOptions);


    var triangleCoords = [
        new google.maps.LatLng(33.5362475, -111.9267386),
        new google.maps.LatLng(33.5104882, -111.9627875),
        new google.maps.LatLng(33.5004686, -111.9027061)

    ];

    // Construct the polygon
    bermudaTriangle = new google.maps.Polygon({
        paths: triangleCoords,
        draggable: true,
        editable: true,
        strokeColor: '#FF0000',
        strokeOpacity: 0.8,
        strokeWeight: 2,
        fillColor: '#FF0000',
        fillOpacity: 0.35
    });

    bermudaTriangle.setMap(map);
    google.maps.event.addListener(bermudaTriangle, "dragend", getPolygonCoords);
    google.maps.event.addListener(bermudaTriangle.getPath(), "insert_at", getPolygonCoords);
    google.maps.event.addListener(bermudaTriangle.getPath(), "remove_at", getPolygonCoords);
    google.maps.event.addListener(bermudaTriangle.getPath(), "set_at", getPolygonCoords);
}

function getPolygonCoords() {
    var len = bermudaTriangle.getPath().getLength();
    var htmlStr = "";
    for (var i = 0; i < len; i++) {
        htmlStr += bermudaTriangle.getPath().getAt(i).toUrlValue(5) + "<br>";
    }
    document.getElementById('info').innerHTML = htmlStr;
}

[〜＃〜] html [〜＃〜]

<body onload="initialize()">
    <h3>Drag or re-shape for coordinates to display below</h3>
    <div id="map-canvas">
    </div>
    <div id="info">
    </div>
</body>

[〜＃〜] css [〜＃〜]

#map-canvas {
    width: auto;
    height: 350px;
}
#info {
    position: absolute;
    font-family: arial, sans-serif;
    font-size: 18px;
    font-weight: bold;
}
13
jhawes

いくつかのようにプロパティにアクセスする代わりに、グーグルが提供するゲッターを使用する方がクリーン/安全です

google.maps.event.addListener(drawingManager, 'overlaycomplete', function(polygon) {
    var coordinatesArray = polygon.overlay.getPath().getArray();
});
10
ylos

残念ながら、匿名/ログインしていない場合は、カスタムマーカーを配置して、maps.google.comから直接描画（および座標を取得）することはできません（数年前に正しく思い出せば可能です）。それでも、ここでの回答のおかげで、Googleプレイス検索を備えたサンプルの組み合わせを作成し、描画ライブラリを介して描画を許可し、任意のタイプの形状（ポリゴンの座標を含む）を選択すると座標をダンプしましたコピー＆ペーストできます。コードは次のとおりです。

これはどのように見えるかです：

test.png

（場所マーカーは個別に処理され、検索入力フォーム要素によってDEL「ボタン」を使用して削除できます。「curpos」は、マップビューポートの現在の中心[位置]とズームレベルを示します）。

9
sdaau

目的を達成するには、ポリゴンからgetPathsを取得する必要があります。パスはLatLngポイントの配列になります。配列の要素を取得し、以下の関数のメソッド.latおよび.lngでLatLngペアを分割すると、ポリゴンの周囲をマークするポリラインに対応する冗長配列があります。

節約は別の話です。その後、多くの方法を選択できます。ポイントのリストをcsv形式の文字列として保存し、それをファイルにエクスポートできます（最も簡単なソリューションです）。私はGPS TXT GPSトラックメーカー（素晴らしい無料版ソフトウェア）で読める形式（2つあります）のような形式を強くお勧めします。データベースに保存する能力があれば素晴らしいソリューション（冗長性のために両方を行います）。

function areaPerimeterParse(areaPerimeterPath) {
    var flag1stLoop = true;
    var areaPerimeterPathArray = areaPerimeterPath.getPath();
    var markerListParsedTXT = "Datum,WGS84,WGS84,0,0,0,0,0\r\n";

    var counter01 = 0;
    var jSpy = "";
    for (var j = 0;j<areaPerimeterPathArray.length;j++) {
        counter01++;
        jSpy += j+"  ";
        if (flag1stLoop) {
            markerListParsedTXT += 'TP,D,'+[ areaPerimeterPathArray.getAt(j).lat(), areaPerimeterPathArray.getAt(j).lng()].join(',')+',00/00/00,00:00:00,1'+'\r\n';
            flag1stLoop = false;
        } else {
            markerListParsedTXT += 'TP,D,'+[ areaPerimeterPathArray.getAt(j).lat(), areaPerimeterPathArray.getAt(j).lng()].join(',')+',00/00/00,00:00:00,0'+'\r\n';
        }

    }
    // last point repeats first point
    markerListParsedTXT += 'TP,D,'+[ areaPerimeterPathArray.getAt(0).lat(), areaPerimeterPathArray.getAt(0).lng()].join(',')+',00/00/00,00:00:00,0'+'\r\n';
    return markerListParsedTXT;
}

注意、「、1」（「、0」ではなく）で終わる行は、新しいポリゴンを開始します（この形式では、同じファイルに複数のポリゴンを保存できます）。私はTXT XMLベースのフォーマットGPXとKMLより人間が読めるものを見つけます。

3
tony gil

他の答えは、ポリゴンを作成することを示していますが、座標を取得する方法は示していません...

最善の方法はわかりませんが、ここに1つの方法があります。ポリゴンからパスを取得する方法があるはずですが、それを見つけることができず、getPath（）が表示されません私のために働きます。だからここに私のために働いた手動のアプローチがあります..

ポリゴンの描画が完了し、ポリゴンをオーバーレイ完了関数に渡すと、polygon.overlay.latLngs.b [0] .bで座標を見つけることができます。

google.maps.event.addListener(drawingManager, 'overlaycomplete', function(polygon) {
        $.each(polygon.overlay.latLngs.b[0].b, function(key, latlng){
            var lat = latlng.d;
            var lon = latlng.e;
            console.log(lat, lon); //do something with the coordinates
        });
});

注意してください、私はjqueryを使用して座標のリストをループしていますが、ループを行うことはできます。

2
Gisheri

Googleは時々固定オブジェクトプロパティの名前を更新するため、ベストプラクティスはGMaps V3メソッドを使用して座標を取得することですevent.overlay.getPath（）。getArray（）およびlatを取得するlatlng .lat（）およびlng latlng.lng（）.

したがって、ポリゴンとPOSTGIS挿入ケースのシナリオでこの答えを少し例示したいだけです。

google.maps.event.addListener(drawingManager, 'overlaycomplete', function(event) {
    var str_input ='POLYGON((';
    if (event.type == google.maps.drawing.OverlayType.POLYGON) {
      console.log('polygon path array', event.overlay.getPath().getArray());
      $.each(event.overlay.getPath().getArray(), function(key, latlng){
        var lat = latlng.lat();
        var lon = latlng.lng();
        console.log(lat, lon); 
        str_input += lat +' '+ lon +',';
      });
    }
    str_input = str_input.substr(0,str_input.length-1) + '))';
    console.log('the str_input will be:', str_input);

    // YOU CAN THEN USE THE str_inputs AS IN THIS EXAMPLE OF POSTGIS POLYGON INSERT
    // INSERT INTO your_table (the_geom, name) VALUES (ST_GeomFromText(str_input, 4326), 'Test')

  });
1
chuycepeda

ギシェリの答えに追加する

次のコードは私のために働いた

 var drawingManager = new google.maps.drawing.DrawingManager({
    drawingMode: google.maps.drawing.OverlayType.MARKER,
    drawingControl: true,
    drawingControlOptions: {
      position: google.maps.ControlPosition.TOP_CENTER,
      drawingModes: [
        google.maps.drawing.OverlayType.POLYGON
      ]
    },
    markerOptions: {
      icon: 'images/beachflag.png'
    },
    circleOptions: {
      fillColor: '#ffff00',
      fillOpacity: 1,
      strokeWeight: 5,
      clickable: false,
      editable: true,
      zIndex: 1
    }

  });

  google.maps.event.addListener(drawingManager, 'overlaycomplete', function(polygon) {
      //console.log(polygon.overlay.latLngs.j[0].j);return false;
        $.each(polygon.overlay.latLngs.j[0].j, function(key, LatLongsObject){
            var LatLongs    =   LatLongsObject;

            var lat = LatLongs.k;
            var lon = LatLongs.B;
           console.log("Lat is: "+lat+" Long is: "+lon); //do something with the coordinates

        });
1
Irfan Younus

これを試して

コントローラーで使用

> $scope.onMapOverlayCompleted = onMapOverlayCompleted;
> 
>  function onMapOverlayCompleted(e) {
> 
>                 e.overlay.getPath().getArray().forEach(function (position) {
>                     console.log('lat', position.lat());
>                     console.log('lng', position.lng());
>                 });
> 
>  }

**In Your html page , include drawning manaer** 


    <ng-map id="geofence-map" zoom="8" center="current" default-style="true" class="map-layout map-area"
                        tilt="45"
                        heading="90">

                    <drawing-manager
                            on-overlaycomplete="onMapOverlayCompleted()"
                            drawing-control-options="{position: 'TOP_CENTER',drawingModes:['polygon','circle']}"
                            drawingControl="true"
                            drawingMode="null"
                            markerOptions="{icon:'www.example.com/icon'}"
                            rectangleOptions="{fillColor:'#B43115'}"
                            circleOptions="{fillColor: '#F05635',fillOpacity: 0.50,strokeWeight: 5,clickable: false,zIndex: 1,editable: true}">
                    </drawing-manager>
    </ng-map>
0
Om Sharma

Chuycepedaが持っているものを整理し、それをテキストエリアに入れてフォームに送り返します。

google.maps.event.addListener(drawingManager, 'overlaycomplete', function (event) {
    var str_input = '{';
    if (event.type == google.maps.drawing.OverlayType.POLYGON) {
        $.each(event.overlay.getPath().getArray(), function (key, latlng) {
            var lat = latlng.lat();
            var lon = latlng.lng();
            str_input += lat + ', ' + lon + ',';
        });
    }
    str_input = str_input.substr(0, str_input.length - 1) + '}';

    $('textarea#Geofence').val(str_input);
});
0
WebLuke