通过连接最外面的标记以编程方式在地图上绘制多边形

Question

我在this fiddle中有一个示例地图图层，其中使用融合表绘制地图图层，

var Layer = new google.maps.FusionTablesLayer({
    query: {
       select: 'lat',
       from: '1BLPDF4n0sW0i0BfD9Yo0DqbshyTH1s5Iuu_1IeU'
    },
    map: map,
    suppressInfoWindows: true
});

如何通过连接地图中最外面的标记以编程方式绘制多边形，这样如果有人添加新标记，并且如果它落在绘制的多边形之外，则自动重绘多边形以包括新添加的标记。

Answer 1

你想要点Convex Hull。

Example using the Google Maps API v3 on a random set of points

jsfiddle

代码段

＆＃13;

＆＃13;

var gmarkers = [];
var points = [];
var hullPoints = [];
var map = null;
var polyline;

var infowindow = new google.maps.InfoWindow({
  size: new google.maps.Size(150, 50)
});

function initialize() {
  var myOptions = {
    zoom: 13,
    center: new google.maps.LatLng(37.4419, -122.1419),
    mapTypeControl: true,
    mapTypeControlOptions: {
      style: google.maps.MapTypeControlStyle.DROPDOWN_MENU
    },
    navigationControl: true,
    mapTypeId: google.maps.MapTypeId.ROADMAP
  }
  map = new google.maps.Map(document.getElementById("map_canvas"),
    myOptions);

  google.maps.event.addListener(map, 'click', function() {
    infowindow.close();
  });

  google.maps.event.addListenerOnce(map, 'bounds_changed', function() {
    // Add 10 markers to the map at random locations
    var bounds = map.getBounds();
    var southWest = bounds.getSouthWest();
    var northEast = bounds.getNorthEast();
    var lngSpan = northEast.lng() - southWest.lng();
    var latSpan = northEast.lat() - southWest.lat();
    map.setCenter(map.getCenter());
    map.setZoom(map.getZoom() - 1);
    for (var i = 0; i < 10; i++) {
      var point = new google.maps.LatLng(southWest.lat() + latSpan * Math.random(),
        southWest.lng() + lngSpan * Math.random());
      points.push(point);
      var marker = createMarker(point, i);
      gmarkers.push(marker);
    }
    for (var i = 0; i < points.length; i++) {
      document.getElementById("input_points").innerHTML += i + ": " + points[i].toUrlValue() + "<br>";
    }
    calculateConvexHull();
  });
  google.maps.event.addListener(map, "click", function(evt) {
    if (evt.latLng) {
      var latlng = evt.latLng;
      var marker = createMarker(latlng, gmarkers.length - 1);
      points.push(latlng);
      gmarkers.push(marker);
      calculateConvexHull();
    }
  });
}

function removeMarker(latlng) {
  for (var i = 0; i < gmarkers.length; i++) {
    if (google.maps.geometry.spherical.computeDistanceBetween(
        latlng, gmarkers[i].getPosition()) < 0.1) {
      gmarkers[i].setMap(null);
      gmarkers.splice(i, 1);
    }
  }
  calculateConvexHull();
}

function createMarker(latlng, marker_number) {
  var html = "marker " + marker_number;
  var marker = new google.maps.Marker({
    position: latlng,
    map: map,
    zIndex: Math.round(latlng.lat() * -100000) << 5
  });

  google.maps.event.addListener(marker, 'click', function() {
    var contentString = html + "<br>" + marker.getPosition().toUrlValue() + "<br><a href='javascript:removeMarker(new google.maps.LatLng(" + marker.getPosition().toUrlValue() + "));'>Remove Marker</a>";
    infowindow.setContent(contentString);
    infowindow.open(map, marker);
  });
  return marker;
}

function calculateConvexHull() {
  if (polyline) polyline.setMap(null);
  document.getElementById("hull_points").innerHTML = "";
  points = [];
  for (var i = 0; i < gmarkers.length; i++) {
    points.push(gmarkers[i].getPosition());
  }
  points.sort(sortPointY);
  points.sort(sortPointX);
  DrawHull();
}

function sortPointX(a, b) {
  return a.lng() - b.lng();
}

function sortPointY(a, b) {
  return a.lat() - b.lat();
}

function DrawHull() {
  hullPoints = [];
  chainHull_2D(points, points.length, hullPoints);
  polyline = new google.maps.Polygon({
    map: map,
    paths: hullPoints,
    fillColor: "#FF0000",
    strokeWidth: 2,
    fillOpacity: 0.5,
    strokeColor: "#0000FF",
    strokeOpacity: 0.5
  });
  displayHullPts();
}

function displayHullPts() {
  document.getElementById("hull_points").innerHTML = "";
  for (var i = 0; i < hullPoints.length; i++) {
    document.getElementById("hull_points").innerHTML += hullPoints[i].toUrlValue() + "<br>";
  }
}

google.maps.event.addDomListener(window, "load", initialize);

＆＃13;

html,
body,
#map_canvas {
  height: 100%;
  width: 100%;
  margin: 0px;
  padding: 0px
}

＆＃13;

<script src="https://maps.googleapis.com/maps/api/js?libraries=geometry"></script>
<script src="http://www.geocodezip.com/scripts/convex_hull.js"></script>
<h2>Convex Hull of random set of points</h2>
<table border="0">
  <tr>
    <td>
      <button onclick="polyline.setMap(null);">hide polygon</button>
      <button onclick="calculateConvexHull();">calculate Convex Hull</button>
      <button onclick="displayHullPts();">display Hull Points</button>
    </td>
  </tr>

  <tr>
    <td valign="top">
      <div id="map_canvas" style="width: 500px; height: 300px"></div>
      <table border="1" width="100%">
        <tr>
          <th>random pts</th>
          <th>hull points</th>
        </tr>
        <tr>
          <td valign="top">
            <div id="input_points"></div>
          </td>
          <td valign="top">
            <div id="hull_points"></div>
          </td>
        </tr>
      </table>
    </td>
    <td>
    </td>
  </tr>
  <tr>
    <td></td>
  </tr>
</table>
<div id="info"></div>

＆＃13;

＆＃13;

＆＃13;