реагировать на выборку координат с карты Google

Question

Я пытаюсь получить форму координат карты Google после редактирования моего многоугольника на карте

Мне нужно отредактировать многоугольник и перенести данные редактирования на задний план.

поэтому я показал данные JSON на карте, которые помогут мне нарисовать многоугольник.

это мой код.

export default class Map extends Component {
 constructor(){
super();
this.state={
  data:[]
}; 
this.state.SampleVar = 'This is Global Variable.';
}
 data = [];
componentDidUpdate() {
this.loadMap();  
}  
componentDidMount(){
this.add();
// this.loadMap();
}

add() {
var controller = this;
 var id=this.props.id;
fetch(`/mapdata/${id}`)
    // res =>{ return res.json() ;
    .then(res => res.json())
    .then(dat => {  

        this.setState({ dat })
        console.log(dat);
        for (var i = 0; i < dat.features.length; i++) {
            var coords = dat.features[i].geometry.coordinates[0];
            var latlons = coords.map(a => {
                this.setState.data = { lat: a[1], lng: a[0] };
                console.log([this.setState.data]);
                //   return { lat: a[0], lng: a[1] }
                return this.setState.data
            })
            this.data.push(latlons)
        }
    });
   }

loadMap() {
var info window;

if (this.props && this.props.google) { // checks to make sure that props have been passed
  const {google} = this.props; // sets props equal to google
  const maps = google.maps; // sets maps to google maps props

  const mapRef = this.refs.map; // looks for HTML div ref 'map'. Returned in render below.
  const node = ReactDOM.findDOMNode(mapRef); // finds the 'map' div in the React DOM, names it node

  const mapConfig = Object.assign({}, {
    center: {lat: 18.6716895369838, lng: 84.3602508679032}, // sets center of google map to NYC.
    zoom: 25, // sets zoom. Lower numbers are zoomed further out.
    mapTypeId: 'hybrid' // optional main map layer. Terrain, satellite, hybrid or roadmap--if unspecified, defaults to roadmap.
  })

  this.map = new maps.Map(node, mapConfig); // creates a new Google map on the specified node (ref='map') with the specified configuration set above.
  for (var i = 0; i < this.data.length ; i++) {
    var bermudaTriangle = new google.maps.Polygon({
    paths: this.data[i],
    strokeColor: '#FF0000',
    strokeOpacity: 0.8,
    strokeWeight: 2,
    fillColor: '#FF0000',
    fillOpacity: 0.35, 
    editable: true
  });
bermudaTriangle.setMap(this.map);
bermudaTriangle.addListener('click', showArrays);
infoWindow = new google.maps.InfoWindow();
}
 function showArrays(e)
{
    // console.log(1);
    var vertices = this.getPath();

    var contentString = '<b>Bermuda Triangle polygon</b><br>' +
        'Clicked location: <br>'  + e.latLng.lat() + ',' + e.latLng.lng() +
        '<br>';
        for (var i =0; i < vertices.getLength(); i++) {
          var xy = vertices.getAt(i);
          contentString += '<br>' + 'Coordinate ' + i + ':<br>' + xy.lat() + ',' +
              xy.lng();
        } 
        console.log(contentString);
        infoWindow.setContent(contentString);

        infoWindow.setPosition(e.latLng);

        infoWindow.open(this.map);

    }
   }  
 }  

  onEdit(e){
 //   var google=this.props.google;
 //   for (var i = 0; i < this.data.length ; i++) {
 //     var bermudaTriangle = new google.maps.Polygon({
 //     paths: this.data[i],
 //     strokeColor: '#FF0000',
 //     strokeOpacity: 0.8,
 //     strokeWeight: 2,
 //     fillColor: '#FF0000',
 //     fillOpacity: 0.35, 
 //     editable: true
 //   })
 // }
 //   var vtx = this.getPath();
 //       var constr
 //       for (var i =0; i < vtx.getLength(); i++) {
 //         var xy = vtx.getAt(i);
 //         constr += '<br>' + 'Coordinate ' + i + ':<br>' + xy.lat() + ',' 
        +
 //             xy.lng();
 //       }
  var constr=10;
    console.log(constr);

 }

render() 
{
 const style = { // MUST specify dimensions of the Google map or it will not work. Also works best when a style is specified inside the render function and created as an object
    width: '65%', // 90vw basically means take up 90% of the width screen. px also works.
    height: '75vh' // 75vh similarly will take up roughly 75% of the height of the screen. px also works.

   }

  return ( // in our return function you must return a div with ref='map' and style.
    <div  >
      <div id="map" ref="map" style={style}>
      loading map...
      {this.loadMap()} </div>
      <button onClick={this.onEdit} >Vry</button>
    </div>
   )
  }
}

Я пытаюсь получить форму координат карты Google после редактирования моего многоугольника на карте

Мне нужно отредактировать многоугольник и перенести данные редактирования на задний план.

поэтому я показал данные JSON на карте, которые помогут мне нарисовать многоугольник.

Answer 1

Этот код работает для меня. Где set_at запускается, когда мы изменяем область многоугольника из выделенной точки (ребер).

здесь можно отправлять данные на сервер.

 google.maps.event.addListener(bermudaTriangle.getPath(), 'set_at', function () {

  var vertices = bermudaTriangle.getPath();
  for ( i =0; i < vertices.getLength(); i++) {
  var  xy = vertices.getAt(i);
  var id =id + ',' + xy.lat() + ',' + xy.lng();
  } 
        this.setState=({Mapcord:id});
  console.log(this.setState.Mapcord);

  });