如何检测标记是否落入固定大小的圆圈

Question

这是我迄今为止尝试过的......

我有一个这样定义的圆形标记：

var marker = new google.maps.Marker({
  position: new google.maps.LatLng(-34.397, 150.644),
  map: map,
  icon: {
    path: google.maps.SymbolPath.CIRCLE,
    fillOpacity: 0.5,
    fillColor: 'yellow',
    strokeOpacity: 1.0,
    strokeColor: 'red',
    strokeWeight: 3.0, 
    scale: 20 
  }
});

我还有一个可拖动的标记。当可拖动标记触及圆形标记的任何部分时，我想更改它的填充颜色。我正在努力的是如何检测可拖动标记是否触及圆形标记的任何部分。

google.maps.event.addListener(dragable_marker, 'drag', function(e) {
  //somehow need to check if e.latLng touched the circle
}

圆圈标记甚至不需要是标记。它可以是一个普通的 Circle 对象。

var circle = new google.maps.Circle({
    center : new google.maps.LatLng(-34.397, 150.644),
    radius : 500,
    fillOpacity : 0,
    strokeOpacity : 0,
    map : map
});

然后，我可以像这样轻松完成我的目标。

google.maps.event.addListener( dragable_marker, 'dragend', function(e) {    
    alert(circle.getBounds().contains(e.latLng)); 
});

我最初尝试使用 Circle 对象来解决我的问题，但后来我意识到它没有“比例”属性，而且无论地图缩放级别如何，它似乎都不允许我固定圆的大小。

任何帮助/建议将不胜感激。

Answer 1

一个选项：使用geometry librarycomputeDistanceBetween 函数来检测标记何时在圆内（如果圆心到标记的距离小于或等于圆的半径，则它在圆内）圆）。

代码sn-p：

function initialize() {
    var map = new google.maps.Map(
    document.getElementById("map_canvas"), {
        center: new google.maps.LatLng(37.4419, -122.1419),
        zoom: 13,
        mapTypeId: google.maps.MapTypeId.ROADMAP
    });

    var circle = new google.maps.Circle({
        center: new google.maps.LatLng(-34.397, 150.644),
        radius: 1000,
        fillOpacity: 0,
        strokeOpacity: 0.5,
        map: map
    });
    map.fitBounds(circle.getBounds());

    google.maps.event.addListenerOnce(map, 'bounds_changed', function () {
        var dragable_marker = new google.maps.Marker({
            position: map.getCenter(),
            map: map,
            draggable: true
        });

        google.maps.event.addListener(dragable_marker, 'dragend', function (e) {
            if (google.maps.geometry.spherical.computeDistanceBetween(circle.getCenter(),this.getPosition()) <= circle.getRadius()) {
                circle.setOptions({fillOpacity:0.5,fillColor:"#FF0000"});
            } else  {
              circle.setOptions({fillOpacity:0,fillColor:"#000000"});
            }   
        });
    });
}
google.maps.event.addDomListener(window, "load", initialize);

html, body, #map_canvas {
    height: 100%;
    width: 100%;
    margin: 0px;
    padding: 0px
}

<script src="https://maps.googleapis.com/maps/api/js?libraries=geometry"></script>
<div id="map_canvas" style="border: 2px solid #3872ac;"></div>