javascript - 检查 Google map 中的多个圆圈中是否存在坐标

Question

我有一个 Google map ，它在多个点周围有多个圆圈，我按照以下方式绘制了这些圆圈:

for (i = 0; i < markers.length; i++) {
    var circle = new google.maps.Circle({
        map: map,
        radius: parseInt(radius_entry[markers[i][0]]),
        fillColor: '#2c3e50',
        strokeColor: '#2c3e50',
        strokeOpacity: 0
    });

    var position = new google.maps.LatLng(markers[i][1], markers[i][2]);
    pinIcon = new google.maps.MarkerImage(
        "assets/images/station_maker.png",
        null, /* size is determined at runtime */
        null, /* origin is 0,0 */
        null, /* anchor is bottom center of the scaled image */
        new google.maps.Size(21, 34)
    );
    marker = new google.maps.Marker({
        position: position,
        map: map,
        title: markers[i][0],
    });
    marker.setIcon(pinIcon)
    circle.bindTo('center', marker, 'position');
    google.maps.event.addListener(circle, 'click', function(ev) { //Placing marker only on clicks inside a circle
        placeMarker(ev.latLng);
    });
    bounds.extend(position);
    map.fitBounds(bounds);
}

我还为用户提供了一种使用同一 map 上的地点库搜索位置的方法，这是一个非常简单的实现。

var input = document.getElementById('search-places');
var searchBox = new google.maps.places.SearchBox(input);
google.maps.event.addListener(searchBox, 'places_changed', function() {
    var places = searchBox.getPlaces();
    if (places.length == 0) {
        return;
    }
    var bounds = new google.maps.LatLngBounds();
    for (var i = 0, place; place = places[i]; i++) {
        bounds.extend(place.geometry.location);
    }
    map.fitBounds(bounds);
});

但是，我想添加一种机制来检查搜索的位置是否落在之前绘制的任何圆圈内。我找到了这个方法:

polygon.containsLocation()

https://developers.google.com/maps/documentation/javascript/examples/poly-containsLocation

但这对圆圈不起作用。

我还发现了这个问题How to detect if a point is in a Circle?但它只处理 map 上绘制的一个圆圈。我如何实现这个场景？

Answer 1

您可以使用以下函数来确定点是否位于圆内:

function circleContainsLocation(point, circle)
{
    var radius = circle.getRadius();
    var center = circle.getCenter();
    return (google.maps.geometry.spherical.computeDistanceBetween(point, center) <= radius)
}

然后引入circles数组来存储所有渲染的圆。

然后添加以下代码来判断地点是否位于圆圈内:

for (var i = 0, place; place = places[i]; i++) {

     var result = circles.filter(function(c){
         if(circleContainsLocation(place.geometry.location,c))
               return c;
     });
     var placeFound = (result.length > 0);
     if(placeFound){
            console.log('Place is found');
     }

}

完整示例

var circles = [];
function initMap() {

    var map = new google.maps.Map(document.getElementById('map'), {
        center: { lat: -33.8688, lng: 151.2195 },
        zoom: 13,
        mapTypeId: google.maps.MapTypeId.ROADMAP
    });


    var input = document.getElementById('pac-input');
    var searchBox = new google.maps.places.SearchBox(input);
    map.controls[google.maps.ControlPosition.TOP_LEFT].push(input);


    var markers = [
      ['Sydney',-33.867080, 151.209450,50000],
      ['Newcastle NSW',-32.927896, 151.768989,10000]
    ];

    var bounds = new google.maps.LatLngBounds();
    for (var i = 0; i < markers.length; i++) {
        var circle = new google.maps.Circle({
            map: map,
            radius: markers[i][3],
            fillColor: '#2c3e50',
            strokeColor: '#2c3e50',
            strokeOpacity: 0
        });
        circles.push(circle);

        var position = new google.maps.LatLng(markers[i][1], markers[i][2]);
        var marker = new google.maps.Marker({
            position: position,
            map: map,
            title: markers[i][0],
        });   
        circle.bindTo('center', marker, 'position');             
        bounds.extend(position);
    }
    map.fitBounds(bounds);


    google.maps.event.addListener(searchBox, 'places_changed', function () {
        var places = searchBox.getPlaces();
        if (places.length == 0) {
            return;
        }
        var bounds = new google.maps.LatLngBounds();
        for (var i = 0, place; place = places[i]; i++) {

            var result = circles.filter(function(c){
                if(circleContainsLocation(place.geometry.location,c))
                   return c;
            })
            var placeFound = (result.length > 0);
            if(placeFound){
                document.getElementById('output').innerHTML = 'Place is found';
            }

            bounds.extend(place.geometry.location);
        }
        map.fitBounds(bounds);
    });

}



function circleContainsLocation(point, circle)
{
    var radius = circle.getRadius();
    var center = circle.getCenter();
    return (google.maps.geometry.spherical.computeDistanceBetween(point, center) <= radius)
}

html, body {
            height: 200px;
            margin: 0;
            padding: 0;
        }

        #map {
            height: 100%;
        }

        .controls {
            margin-top: 10px;
            border: 1px solid transparent;
            border-radius: 2px 0 0 2px;
            box-sizing: border-box;
            -moz-box-sizing: border-box;
            height: 32px;
            outline: none;
            box-shadow: 0 2px 6px rgba(0, 0, 0, 0.3);
        }

        #pac-input {
            background-color: #fff;
            font-family: Roboto;
            font-size: 15px;
            font-weight: 300;
            margin-left: 12px;
            padding: 0 11px 0 13px;
            text-overflow: ellipsis;
            width: 300px;
        }

        #pac-input:focus {
                border-color: #4d90fe;
        }

        .pac-container {
            font-family: Roboto;
        }

 <input id="pac-input" class="controls" type="text" placeholder="Search Box">
 <div id="map"></div>
 <div id="output"/>
 <script src="https://maps.googleapis.com/maps/api/js?libraries=places&callback=initMap"
           async defer></script>