web-dev-qa-db-fra.com

Dessin de polygones et coordonnées avec Google Map API v3

J'essaie de développer une application à l'aide de Google Maps API v3. Ce que j'essaie de faire, c'est; laissez tout d’abord laisser l’utilisateur dessiner un polygone sur une carte Google, obtenir ses coordonnées et les enregistrer dans une base de données. Je montrerai ensuite les coordonnées sauvegardées à l'utilisateur.

Je ne sais pas comment laisser les utilisateurs dessiner un polygone sur une carte Google Map avec API v3, puis obtenir les coordonnées. Si je peux obtenir ces coordonnées, il est facile de les enregistrer dans une base de données.

http://gmaps-samples.googlecode.com/svn/trunk/poly/mymapstoolbar.html est presque l'exemple exact, mais il utilise API v2 et ne donne pas de coordonnées. Je veux utiliser API v3 et pouvoir obtenir toutes les coordonnées.

Existe-t-il des exemples de dessin de polygone et d'obtention de ses coordonnées avec API v3?

google-mapspolygon
27
Burak Erdem

ici, vous avez l'exemple ci-dessus en utilisant API V3

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

13
Royce

Si tout ce dont vous avez besoin, c’est des coordonnées, c’est un outil de dessin que j’aime utiliser - déplacer le polygone ou le remodeler et les coordonnées s’afficheront sous la carte: jsFiddle ici .

Aussi, voici un 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

Malheureusement, il semble impossible de placer des marqueurs personnalisés et de dessiner (et d’obtenir les coordonnées) directement à partir de maps.google.com si l’on est anonyme/non connecté (comme cela était possible il ya quelques années, si je me souviens bien). Malgré tout, grâce aux réponses fournies, j’ai réussi à combiner des exemples comportant à la fois la recherche dans Google Places, le dessin dans la bibliothèque de dessins et le dump des coordonnées lors de la sélection de tout type de forme (y compris les coordonnées du polygone). qui peut être copypasté; le code est ici:

C'est à ça que ça ressemble:

test.png

(Les marqueurs de lieux sont gérés séparément et peuvent être supprimés à l'aide du bouton "Supprimer" de l'élément de formulaire de recherche; "curpos" indique le centre actuel [la position] et le niveau de zoom de la fenêtre d'affichage de la carte).

8
sdaau

Il est plus propre et plus sûr d’utiliser les accesseurs fournis par Google au lieu d’accéder aux propriétés comme certains l’ont fait.

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

pour accomplir ce que vous voulez, vous devez obtenir des chemins du polygone. Les chemins seront un tableau de points LatLng. vous obtenez les éléments du tableau et divisez les paires LatLng avec les méthodes .lat et .lng dans la fonction ci-dessous, j'ai un tableau redondant correspondant à une polyligne qui marque le périmètre du polygone.

sauver est une autre histoire. vous pouvez alors opter pour de nombreuses méthodes. vous pouvez enregistrer votre liste de points sous forme de chaîne au format csv et l'exporter dans un fichier (la solution la plus simple, de loin). Je recommande fortement les formats GPS TXT, comme ceux (il y en a 2), lisibles par GPS TRACKMAKER (excellent logiciel en version gratuite). si vous êtes compétent pour les enregistrer dans une base de données, c'est une excellente solution (je fais les deux, pour la redondance). 

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;
}

attention, la ligne qui se termine par ", 1" (par opposition à ", 0") commence un nouveau polygone (ce format vous permet d'enregistrer plusieurs polygones dans le même fichier). Je trouve TXT plus lisible que les formats XML GPX et KML.

3
tony gil

Les autres réponses vous montrent comment créer les polygones, mais pas comment obtenir les coordonnées ...

Je ne suis pas sûr de la meilleure façon de le faire, mais en fait, d'une manière. Il semble qu'il devrait exister une méthode pour extraire les chemins du polygone, mais je ne parviens pas à en trouver une et getPath () ne semble travailler pour moi. Alors, voici une approche manuelle qui a fonctionné pour moi ..

Une fois que vous avez fini de dessiner votre polygone et de le transmettre à la fonction de superposition complète, vous pouvez trouver les coordonnées dans le polygone.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
        });
});

remarque, j'utilise jquery pour boucler la liste des coordonnées, mais vous pouvez le faire en boucle.

2
Gisheri

Étant donné que Google met parfois à jour le nom des propriétés d'objet fixes, il est recommandé d'utiliser les méthodes GMaps V3 pour obtenir les coordonnées event.overlay.getPath (). GetArray () et pour obtenir lat latlng.lat () et lng latlng.lng () . 

Donc, je voulais juste améliorer un peu cette réponse en donnant un exemple avec le scénario de cas d’insertion de polygones et 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

Ajout à la réponse de Gisheri 

Le code suivant a fonctionné pour moi 

 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

essaye ça 

Dans votre contrôleur utiliser 

> $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

Nettoyé ce que chuycepeda a et mis dans une zone de texte pour le renvoyer dans un formulaire.

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