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

我还有一个可拖动的标记。当可拖动标记接触圆圈标记的任何部分时，我想更改其fillColor。我正在努力解决的问题是如何检测可拖动标记是否触及圆圈标记的任何部分。

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对象来解决我的问题，但后来我发现它没有＆＃34; scale＆＃34;属性也似乎不允许我修改圆的大小，无论地图缩放级别如何。

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

Answer 1

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

代码段：

＆＃13;

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

＆＃13;

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

＆＃13;

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

＆＃13;

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

1 个答案: