如何查看圆形标记中是否带有标记？

Question

I need to check every 5 seconds if a marker(user) is now contained in a circleMarker(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;
                }           
            }
        }

Above is the current code I have, which is called by this:

var start = setInterval(updateLocation, 5000);

Thanks in advance, Ed.

Answer 1

It seems that you're trying to do geofencing , but in a weird way. Why rely on the drawn appearance of CircleMarker s when all you want is to know if the distance from the user to something is less than a threshold (the CircleMarker radius)?

Just use the distance method of 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);

Answer 2

If your loc variable is really an L.circleMarker , please realize that by definition a marker is a point / place, ie it does not have any area , hence no bounds . You probably meant to use an L.circle for loc in the first place.

In Leaflet 0.x (eg version 0.7.7), the L.circleMarker inherits from L.circle , therefore it does have a .getBounds() method, even though it is meaningless. Actually it returns a null area (southWest coordinates equal northEast coordinates equal the marker position).

Demo: https://jsfiddle.net/y63u5utf/2/

So your code would actually evaluate to true iif the user location is exactly the same as your loc .

In Leaflet 1.x (eg current version 1.0.1), this inconsistency has been corrected, and L.circleMarker no longer has the .getBounds() method.

Demo: https://jsfiddle.net/y63u5utf/1/

(zoom in and out to see the radius of the red circle marker adjusting to keep the same size in pixels, until at high zoom, the marker is out of it. Whereas the blue circle has a radius which scales according to the zoom, since it represents an actual length; therefore it always contains (or not) the marker)