标记从多边形中拖出时发出警报

Question

我使用Mapbox。我有一个可拖动的标记，地图也是可单击的，通过单击标记，标记会移动到那里，但是当标记从多边形中拖出时，我要发出警报。并在form标签中显示该消息。

| date       | errors | alerts |
| ---------- | ------ | ------ |
| 2018-01-01 | 5      | 0      |
| 2018-02-01 | 13     | 2      |
| 2018-03-01 | 31     | 17     |

android:scrollbars="vertical"
            android:scrollbarAlwaysDrawVerticalTrack="true"
            android:fadeScrollbars="false"
            android:scrollbarThumbVertical="@drawable/scroll"

L.mapbox.accessToken = "pk.eyJ1IjoibWlzaGFhIiwiYSI6ImNqb2U0MTA0ZDJ2NnQzdnBhNjduNzB5MTUifQ.ls9YKwPwRI5hkfAa2ZRY5A";

var map = L.mapbox.map("map", "mapbox.streets")
    .setView([35.70383346016101,51.39451503753663],15);

var rememberLat = document.getElementById('latitude').value;
var rememberLong = document.getElementById('longitude').value;

if(!rememberLat || !rememberLong ) { rememberLat = 35.70383346016101; rememberLong = 51.39451503753663;}	
     var p1 = new L.LatLng(35.70720316839909, 51.400566101074226),
         p2 = new L.LatLng(35.70723647148794,51.392656730651855),
         p3 = new L.LatLng(35.70257888022394,51.37417316436768),
	 p4 = new L.LatLng(35.700348467145695,51.39266967773438),
         polygonPoints = [p1, p2, p3,p4];     

      var polygon = new L.Polygon(polygonPoints);
      map.addLayer(polygon);   

      var marker = L.marker([rememberLat, rememberLong],{
          draggable: true
      }).addTo(map);

      marker.on('dragend', function (e) {
          updateLatLng(marker.getLatLng().lat, marker.getLatLng().lng);
      });

      map.on('click', function (e) {
          marker.setLatLng(e.latlng);
          updateLatLng(marker.getLatLng().lat, marker.getLatLng().lng);
      });

function updateLatLng(lat,lng,reverse) {
    if(reverse) {
        marker.setLatLng([lat,lng]);
        map.panTo([lat,lng]);
     } else {
        document.getElementById('latitude').value = marker.getLatLng().lat;
        document.getElementById('longitude').value = marker.getLatLng().lng;
        map.panTo([lat,lng]);
     }
}

Answer 1

您可以在 Src1 和 Src2

inline

marker.on('dragend', function(e) {
  updateLatLng(marker.getLatLng().lat, marker.getLatLng().lng);

  alert("Marker is inside the polygon: " + isMarkerInsidePolygon(marker, polygon));

});

L.mapbox.accessToken = "pk.eyJ1IjoibWlzaGFhIiwiYSI6ImNqb2U0MTA0ZDJ2NnQzdnBhNjduNzB5MTUifQ.ls9YKwPwRI5hkfAa2ZRY5A";
var map = L.mapbox.map("map", "mapbox.streets")
  .setView([35.70383346016101, 51.39451503753663], 15);
var rememberLat = document.getElementById('latitude').value;
var rememberLong = document.getElementById('longitude').value;
if (!rememberLat || !rememberLong) {
  rememberLat = 35.70383346016101;
  rememberLong = 51.39451503753663;
}
var p1 = new L.LatLng(35.70720316839909, 51.400566101074226),
  p2 = new L.LatLng(35.70723647148794, 51.392656730651855),
  p3 = new L.LatLng(35.70257888022394, 51.37417316436768),
  p4 = new L.LatLng(35.700348467145695, 51.39266967773438),
  polygonPoints = [p1, p2, p3, p4];
var polygon = new L.Polygon(polygonPoints);
map.addLayer(polygon);
var marker = L.marker([rememberLat, rememberLong], {
  draggable: true
}).addTo(map);
marker.on('dragend', function(e) {
  updateLatLng(marker.getLatLng().lat, marker.getLatLng().lng);

  alert("Marker is inside the polygon: " + isMarkerInsidePolygon(marker, polygon));

});
map.on('click', function(e) {
  marker.setLatLng(e.latlng);
  updateLatLng(marker.getLatLng().lat, marker.getLatLng().lng);
});

function updateLatLng(lat, lng, reverse) {
  if (reverse) {
    marker.setLatLng([lat, lng]);
    map.panTo([lat, lng]);
  } else {
    document.getElementById('latitude').value = marker.getLatLng().lat;
    document.getElementById('longitude').value = marker.getLatLng().lng;
    map.panTo([lat, lng]);
  }
}

function isMarkerInsidePolygon(marker, poly) {
  var inside = false;
  var x = marker.getLatLng().lat,
    y = marker.getLatLng().lng;
  for (var ii = 0; ii < poly.getLatLngs().length; ii++) {
    var polyPoints = poly.getLatLngs()[ii];
    for (var i = 0, j = polyPoints.length - 1; i < polyPoints.length; j = i++) {
      var xi = polyPoints[i].lat,
        yi = polyPoints[i].lng;
      var xj = polyPoints[j].lat,
        yj = polyPoints[j].lng;

      var intersect = ((yi > y) != (yj > y)) &&
        (x < (xj - xi) * (y - yi) / (yj - yi) + xi);
      if (intersect) inside = !inside;
    }
  }
  console.log(inside);
  return inside;
};

#mapid {
  height: 380px;
  width: 550px
}

.form {
  height: 60px;
}