Я кодирую приложение, чтобы узнать, находится ли адрес в области или вне ее (или, точнее, в 3 областях), я использую для этого javascript и mapbox.
В этом мне удается не печатать карту иЯ имею в виду, что я хотел бы изменить стиль этого, так что можно поместить геокод в текстовое поле для примера будет идеально.но для этого я не совсем понимаю, что делает:
geocoder.onAdd(map)
Вот мой код для этого (должно быть достаточно, чтобы иметь возможность проверить):
<!DOCTYPE html>
<html>
<head>
<meta charset='utf-8' />
<title>addressIn without map</title>
<meta name='viewport' content='initial-scale=1,maximum-scale=1,user-scalable=no' />
<script src='https://api.tiles.mapbox.com/mapbox-gl-js/v1.3.1/mapbox-gl.js'></script>
<link href='https://api.tiles.mapbox.com/mapbox-gl-js/v1.3.1/mapbox-gl.css' rel='stylesheet' />
<style>
body { margin:0; padding:0; }
#map { position:absolute; top:0; bottom:0; width:100%; }
</style>
</head>
<body>
<script src='https://api.mapbox.com/mapbox-gl-js/plugins/mapbox-gl-geocoder/v4.4.1/mapbox-gl-geocoder.min.js'></script>
<link rel='stylesheet' href='https://api.mapbox.com/mapbox-gl-js/plugins/mapbox-gl-geocoder/v4.4.1/mapbox-gl-geocoder.css' type='text/css' />
<style>
.geocoder {
position:absolute;
z-index:1;
width:50%;
left:50%;
margin-left:-25%;
top:20px;
}
.mapboxgl-ctrl-geocoder { min-width:100%; }
</style>
<div id='map'></div>
<div id='geocoder' class='geocoder'></div>
<script>
let areaCoord_1= [
[-73.9346845,40.7284786],
[-73.9382465,40.7281208 ],
[-73.9457138,40.7274053],
[-73.9517648,40.725454],
[-73.9560993,40.721486],
[-73.9564855,40.710394],
[-73.9406068,40.7118904],
[-73.9330966,40.713582],
[-73.9347274,40.7172251],
[-73.933955,40.7202501],
[-73.9351995,40.722722],
[-73.9282472,40.7243482],
[-73.9298351,40.727633],
[-73.9346845,40.7284786]
];
let areaCoord_2= [
[-73.9431817,40.7329176],
[-73.9481599,40.7309989],
[-73.9581163,40.7300884],
[-73.9579875,40.72508],
[-73.9647682,40.7183148],
[-73.9667852,40.716233],
[-73.968373,40.7134681],
[-73.9690597,40.7109308],
[-73.9517219,40.7060185],
[-73.927346,40.710085],
[-73.9185483,40.7144114],
[-73.9162738,40.7251775],
[-73.924814,40.7290802],
[-73.9331825,40.7299908],
[-73.9395339,40.7348037],
[-73.9431817,40.7329176]
];
let areaCoord_3= [
[-73.9565713,40.739031],
[-73.9622362,40.7340883],
[-73.9617212,40.7248523],
[-73.9696176,40.7131428],
[-73.9703042,40.7083283],
[-73.9689309,40.704034],
[-73.9605195,40.6973968],
[-73.9294488,40.7010409],
[-73.9150293,40.7114513],
[-73.8985498,40.72173],
[-73.8935716,40.7242018],
[-73.9069612,40.7256328],
[-73.9114244,40.7286249],
[-73.9193208,40.7307063],
[-73.9234407,40.7320071],
[-73.9255006,40.7348688],
[-73.9419801,40.7379905],
[-73.9498765,40.7408519],
[-73.9565713,40.739031]
];
function pointInPolygon(point, area) {
let x = parseFloat(point[0]), y = parseFloat(point[1]);
let windingNumber = 0;
for (let i = 0, j = area.length - 1; i < area.length; j = i++) {
let xi = parseFloat(area[i][0]), yi = parseFloat(area[i][1]);
let xj = parseFloat(area[j][0]), yj = parseFloat(area[j][1]);
if (yj <= y) {
if (yi > y) {
if (isLeft([xj, yj], [xi, yi], [x,y]) > 0) {
windingNumber++;
}
}
} else {
if (yi <= y) {
if (isLeft([xj, yj], [xi, yi], [x, y]) < 0) {
windingNumber--;
}
}
}
}
return windingNumber != 0;
};
function isLeft(P0, P1, P2)
{
var res = ( (P1[0] - P0[0]) * (P2[1] - P0[1])
- (P2[0] - P0[0]) * (P1[1] - P0[1]) );
return res;
};
mapboxgl.accessToken = 'here_your_token';
var map = new mapboxgl.Map({
container: 'map'
/*style: 'mapbox://styles/mapbox/streets-v11',
center: [-79.4512, 43.6568],
zoom: 13*/
});
var geocoder = new MapboxGeocoder({
accessToken: mapboxgl.accessToken
//mapboxgl: mapboxgl
});
document.getElementById('geocoder').appendChild(geocoder.onAdd(map));
geocoder.on('result', function(result) {
let inarea1=pointInPolygon(result.result.geometry.coordinates, areaCoord_1)
let inarea2=pointInPolygon(result.result.geometry.coordinates, areaCoord_2)
let inarea3=pointInPolygon(result.result.geometry.coordinates, areaCoord_3)
if (inarea1) {
alert("the adress is in the area 1");
} else if (inarea2) {
alert("the adress is in the area 2");
} else if (inarea3) {
alert("the adress is in the area 3");
} else {
alert("the adress is out the area");
}
});
</script>
</body>
</html>
Если у кого-то естьИдея, как поместить геокодер в текстовое поле, в котором я могу писать по своему вкусу, была бы очень рада.
здесь вы можете найти полный код при необходимости https://github.com/SylwekFr/adress-in-out
PS: в случае минуса, пожалуйста, дайте мне знать, почемутак что я могу обновить свой пост