在Google地图api中加载多边形

Question

I want to implement like user can draw a area in google map from our application. Then when he come back, then should load the data which is previously drew by him/her.

I've done two way of method. One is,

1. Using Drawing manager.

   Drawing Polygon in google map using javascript

   https://developers.google.com/maps/documentation/javascript/drawinglayer

2. Using Google map api data layer. http://jsfiddle.net/dg9e93qy/

From the first method, I can allow user to drag, and can restrict user from drawing multiple polygons. But I cannot load the polygons again to this drawing. But I found somewhere that we can load the polygons. https://developers.google.com/maps/documentation/javascript/examples/polygon-simple .

But this is using the polygon instance to show the polygons not the drawing.

Here I need any other two solutions.

• Whether I should load the polygon data to the map using drawing.

• Should enable drawing option using polygon https://developers.google.com/maps/documentation/javascript/examples/polygon-simple

From the Second method, I can get the coordinates, and can load the polygon again. But I cannot get the polygon area from that. (Actually I am getting the geoJson data)

Here I cannot get the Area for Drawn place. How to do that?

Any answer from the first method or the second methods is good.

Answer 1

I have done alternate that, created polygon instead of loading in the same drawing manager.

After drawing complete, removed drawing manager and then created the polygon. Then had a separate button to remove the polygon from the map.

If we remove the polygon, then removed the polygon from the map and recreated the drawing manger.

This solved my issue.

drawingManager.setMap(null);
                    bermudaTriangle = new google.maps.Polygon({
                        paths: polygonsArray,
                        strokeColor: '#FF0000',
                        strokeOpacity: 0.8,
                        strokeWeight: 2,
                        fillColor: '#FF0000',
                        fillOpacity: 0.35
                        //,editable: true
                    });
                    bermudaTriangle.setMap(map);