Polygon Arrays

by seano666

HTML

<div id="map"></div>
<!-- Replace the value of the key parameter with your own API key. -->
<script
src="https://api.map.baidu.com/api?ak=Qpq6Xqmwa8UOIm7skQTQTRrj&v=4&services=false">
</script>

CSS

/* Always set the map height explicitly to define the size of the div
 * element that contains the map. */
#map {
  height: 100%;
}
/* Optional: Makes the sample page fill the window. */
html, body {
  height: 100%;
  margin: 0;
  padding: 0;
}

JavaScript

// This example creates a simple polygon representing the Bermuda Triangle.
// When the user clicks on the polygon an info window opens, showing
// information about the polygon's coordinates.

var map;
var infoWindow;

function initMap() {
  map = new BMap.Map(document.getElementById('map'));
  map.setMapType(BMAP_HYBRID_MAP);

  // Define the LatLng coordinates for the polygon.
  var point1 = new Point(-80.190,25.774);
  var point2 = new Point(-66.16194,18.257460597);
  var point3 = new Point(-58.165203,29.2638514);
  var point4 = new Point(-71.72642,36.60243085);
  var triangleCoords = [
      point1, point2, point3, point4
  ];

 var opts = {strokeColor: '#FF0000'};

  // Construct the polygon.
  var bermudaTriangle = new Polygon(triangleCoords, opts);
  bermudaTriangle.setMap(map);

  // Add a listener for the click event.
  bermudaTriangle.addListener('click', showArrays);

  infoWindow = new google.maps.InfoWindow;
}

/** @this {google.maps.Polygon} */
function showArrays(event) {
  // Since this polygon has only one path, we can call getPath() to return the
  // MVCArray of LatLngs.
  var vertices = this.getPath();

  var contentString = '<b>Bermuda Triangle polygon</b><br>' +
      'Clicked location: <br>' + event.latLng.lat() + ',' + event.latLng.lng() +
      '<br>';

  // Iterate over the vertices.
  for (var i =0; i < vertices.getLength(); i++) {
    var xy = vertices.getAt(i);
    contentString += '<br>' + 'Coordinate ' + i + ':<br>' + xy.lat() + ',' +
        xy.lng();
  }

  // Replace the info window's content and position.
  infoWindow.setContent(contentString);
  infoWindow.setPosition(event.latLng);

  infoWindow.open(map);
}