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

Question

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

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]);
}
}

#mapid { 
height: 380px; 
width: 550px 
}
.form{ height: 60px; }

<script src="https://api.mapbox.com/mapbox.js/plugins/leaflet-pip/v0.0.2/leaflet-pip.js"></script>
<script src="https://code.jquery.com/jquery-1.11.0.min.js"></script>
<link href="https://api.mapbox.com/mapbox.js/v3.1.1/mapbox.css" rel="stylesheet"/>
<script src="https://api.mapbox.com/mapbox.js/v3.1.1/mapbox.js"></script>
<form class="form">
	<label for="latitude">Latitude:</label>
<input id="latitude" type="text" />
<label for="longitude">Longitude:</label>
<input id="longitude" type="text" />
</form>
<div id="map" style="width: 800px; height: 500px; "></div>

Answer 1

您可以使用光线投射算法，并从Src1和Src2

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;
}

<script src="https://api.mapbox.com/mapbox.js/plugins/leaflet-pip/v0.0.2/leaflet-pip.js"></script>
<script src="https://code.jquery.com/jquery-1.11.0.min.js"></script>
<link href="https://api.mapbox.com/mapbox.js/v3.1.1/mapbox.css" rel="stylesheet" />
<script src="https://api.mapbox.com/mapbox.js/v3.1.1/mapbox.js"></script>
<form class="form">
<label for="latitude">Latitude:</label>
<input id="latitude" type="text" />
<label for="longitude">Longitude:</label>
<input id="longitude" type="text" />
</form>
<div id="map" style="width: 800px; height: 500px; "></div>