Question

我有一个谷歌地图，在多个点周围有多个圆圈，我已通过以下方式绘制：

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

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

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?，但它只涉及地图上绘制的一个圆圈。我如何实现这种情况？

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>

检查Google地图中的多个圈子中是否存在坐标

1 个答案: