从初始位置绘制多边形

Question

My problem is: I need to draw with mode POLYGON with a initial point, like a marker or another element. For example - JSFiddle Example

With marker: var initialPosition = new google.maps.Marker({ position: { lat: -22.397542, lng: -46.884630 } });

This position is given without any user interaction. How can I do that? In my example, how can I draw a polygon starting from marker without click it, making marker position my first polygon point?

Answer 1

You could do the following: use addListenerOnce to detect a click on the map (only once). This will allow to create a Polygon that goes from your marker position, to where the user clicked, and back to the marker position.

By setting the editable property to true , you can then move each Polygon point separately, and add segments by dragging the existing segment(s) middle point(s).

Here is a working example:

 function initialize() { var myLatLng = new google.maps.LatLng(46.2, 6.17); var mapOptions = { zoom: 4, center: myLatLng, mapTypeId: google.maps.MapTypeId.ROADMAP }; var map = new google.maps.Map(document.getElementById("map-canvas"), mapOptions); var marker = new google.maps.Marker({ position: myLatLng, map: map }); google.maps.event.addListenerOnce(map, 'click', function(e) { var origin = marker.getPosition(); var coords = [ origin, e.latLng, origin, ]; var poly = new google.maps.Polygon({ map: map, paths: coords, editable: true, strokeColor: '#FF0000', strokeOpacity: 0.8, strokeWeight: 2, fillColor: '#FF0000', fillOpacity: 0.35 }); }); } initialize();

 #map-canvas { height: 150px; }

 <div id="map-canvas"></div> <script src="https://maps.googleapis.com/maps/api/js"></script>