Как я могу увидеть, есть ли маркер с в маркере круга?

#javascript #html #cordova #leaflet

#javascript #HTML #кордова #брошюра

Вопрос:

Мне нужно проверять каждые 5 секунд, содержится ли маркер (пользователь) в маркере круга (loc)

 function updateLocation(){
            if(!isSet){clearInterval(start)}else{
                user.setLatLng(new L.LatLng(lat, lng));
                if(loc.getBounds().contains(new L.LatLng(lat, lng))){
                    document.getElementById('setButton').style.background = 'purple'
                    soundAlarm();
                    isSet = false;
                }           
            }
        }

Выше приведен текущий код, который у меня есть, который вызывается этим:

var start = setInterval(updateLocation, 5000);

Заранее спасибо, Эд.

1. И что происходит вместо этого?

2. К сожалению, ничего. Он просто действует так, как будто он не видит маркер в circleMarker .

3. loc.getBounds().contains(new L.LatLng(lat, lng)) Вычисляется как false .

4. var start = setInterval(UpdateLocation(), 5000); может быть лучше [примечание добавлено в скобки]

5. Это вызовет функцию только один раз, в отличие от выполнения ее несколько раз.

Ответ №1:

Кажется, вы пытаетесь сделать геозонирование, но странным образом. Зачем полагаться на нарисованный вид CircleMarker s, когда все, что вам нужно, это знать, меньше ли расстояние от пользователя до чего-либо порогового значения ( CircleMarker радиуса)?

Просто используйте distance метод L.Map :

 var guardedLocation = L.latLng(...);
var thresholdDistance = 100;    // In meters
var start;

function updateLocation(){
    var userPosition = L.latLng(lat, lng);
    user.setLatLng(userPosition);

    if(map.distance(userPosition, guardedLocation) <= thresholdDistance) {
        document.getElementById('setButton').style.background = 'purple'
        soundAlarm();
        isSet = false;
        clearInterval(start);
    }
}

start = setInterval(updateLocation, 5000);

1. Извините, я не отметил ваш ответ как правильный раньше, я был очень занят в последнее время и только что вернулся к проекту. Спасибо, это решение было идеальным. metresPerPixel = 40075016.686 * Math.abs(Math.cos(map.getCenter().lat * 180/Math.PI)) / Math.pow(2, map.getZoom() 8); Кстати, я обнаружил, что этот код полезен для преобразования между пикселями и метрами, если у кого-то еще есть эта проблема.

Ответ №2:

Если ваша loc переменная действительно an L.circleMarker , пожалуйста, поймите, что по определению маркер — это точка / место, т. Е. У него нет области, следовательно, нет границ. Вероятно, вы изначально хотели использовать L.circle for loc .

В листовке 0.x (например, версии 0.7.7) L.circleMarker наследуется от L.circle , поэтому у него есть .getBounds() метод, хотя он бессмыслен. На самом деле он возвращает нулевую область (юго-западные координаты равны северо-восточным координатам, равным положению маркера).

Демонстрация: https://jsfiddle.net/y63u5utf/2 /

Таким образом, ваш код будет фактически оцениваться, true если местоположение пользователя точно такое же, как у вас loc .

В листовке 1.x (например, текущая версия 1.0.1) это несоответствие было исправлено, и L.circleMarker .getBounds() метод больше не используется.

Демонстрация: https://jsfiddle.net/y63u5utf/1 /

(увеличивайте и уменьшайте масштаб, чтобы увидеть, как радиус красного маркера круга корректируется, чтобы сохранить тот же размер в пикселях, пока при большом увеличении маркер не выйдет из него. В то время как синий круг имеет радиус, который масштабируется в соответствии с масштабированием, поскольку он представляет фактическую длину; поэтому он всегда содержит (или нет) маркер)