Question

如何像本例一样获得多边形的东北和西南位置。我们如何在多边形中做到这一点？

每当我拖动或编辑多边形时，坐标都应显示在控制台中。在此脚本中，我具有可以拖动和编辑的多边形，但未显示坐标。

尝试添加侦听事件，但它们不起作用。

我的脚本：

class Test extends Component{
    constructor(props){
        this.testFn= this.testFn.bind(this);
    }

    testFn(){
        console.log(this); //will output
    }
    testFn2(){
        console.log(this); // undefined
    }
    testFn3 = () =>{
        console.log(this); //will output
    }
}

Answer 1

对于可编辑和可拖动的多边形，您需要注册相应的事件（在多边形上进行拖动，在路径上进行编辑事件）。

然后，您需要一个LatLngBounds对象，并使用每个多边形路径坐标对其进行扩展。

var map, polygon;

function initialize() {

  var mapOptions = {
    zoom: 3,
    center: new google.maps.LatLng(40, 9),
    mapTypeId: google.maps.MapTypeId.ROADMAP
  };

  map = new google.maps.Map(document.getElementById("map-canvas"), mapOptions);

  polygon = new google.maps.Polygon({
    editable: true,
    draggable: true,
    strokeOpacity: 0,
    strokeWeight: 0,
    fillColor: '#00FF00',
    fillOpacity: .6,
    paths: [
      new google.maps.LatLng(39, 4),
      new google.maps.LatLng(34, 24),
      new google.maps.LatLng(43, 24),
      new google.maps.LatLng(39, 4)
    ],
    map: map
  });

  // Get Polygon path
  var path = polygon.getPath();

  // Add listeners
  google.maps.event.addListener(path, 'insert_at', getBounds);
  google.maps.event.addListener(path, 'remove_at', getBounds);
  google.maps.event.addListener(path, 'set_at', getBounds);
  google.maps.event.addListener(polygon, 'drag', getBounds);

  // Get the polygon bounds
  getBounds();
}

function getBounds() {

  // Create empty bounds object
  let bounds = new google.maps.LatLngBounds();
  let path = polygon.getPath();

  path.getArray().forEach(function(coord) {

    // Extend bounds with the polygon path coordinates
    bounds.extend(coord);
  });

  // Update display
  document.getElementById('ne-lat').innerHTML = bounds.getNorthEast().lat();
  document.getElementById('ne-lng').innerHTML = bounds.getNorthEast().lng();
  document.getElementById('sw-lat').innerHTML = bounds.getSouthWest().lat();
  document.getElementById('sw-lng').innerHTML = bounds.getSouthWest().lng();
}

initialize();

#map-canvas {
  height: 175px;
  width: 50%;
  display: inline-block;
}

.side {
  display: inline-block;
}

h4 {
  margin: 5px 0;
}

<div id="map-canvas"></div>
<div class="side">
  <h4>
    Polygon bounds
  </h4>
  North East: <span id="ne-lat"></span>, <span id="ne-lng"></span><br> South West: <span id="sw-lat"></span>, <span id="sw-lng"></span>
</div>

<script src="https://maps.googleapis.com/maps/api/js"></script>

请注意，如果您有一个具有多条路径的多边形，则需要使用getPaths()而不是getPath()并在每个路径上注册事件。

JSFiddle link。

如何获得多边形边界？

1 个答案: