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

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 对象来解决我的问题，但后来我意识到它没有 "scale" 属性，而且它似乎也不允许我在不考虑地图缩放级别的情况下修复圆的大小.

任何 help/suggestion 将不胜感激。

Answer 1

一种方案：使用geometry librarycomputeDistanceBetween函数检测marker何时在圆内（如果圆心到marker的距离小于等于圆的半径）。

代码片段：

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>

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

How to detect if a marker is dropped into a fixed-size circle

javascript

google-maps

google-maps-api-3