google-maps-api-3 - 计算圆圈中的标记

Question

基于此http://jsfiddle.net/kaiser/wzcst/light/示例，但圆圈中的标记不准确，当标记在圆圈外且靠近圆圈时，考虑在圆圈内，这是不想要的。

还有其他想法吗？

代码片段（来自链接的小提琴）：

window.onload = function init() {
  var
    contentCenter = '<span class="infowin">Center Marker (draggable)</span>',
    contentA = '<span class="infowin">Marker A (draggable)</span>',
    contentB = '<span class="infowin">Marker B (draggable)</span>';
  var
    latLngCenter = new google.maps.LatLng(37.081476, -94.510574),
    latLngCMarker = new google.maps.LatLng(37.0814, -94.5105),
    latLngA = new google.maps.LatLng(37.2, -94.1),
    latLngB = new google.maps.LatLng(38, -93),
    map = new google.maps.Map(document.getElementById('map'), {
      zoom: 7,
      center: latLngCenter,
      mapTypeId: google.maps.MapTypeId.ROADMAP,
      mapTypeControl: false
    }),
    markerCenter = new google.maps.Marker({
      position: latLngCMarker,
      title: 'Location',
      map: map,
      draggable: true
    }),
    infoCenter = new google.maps.InfoWindow({
      content: contentCenter
    }),
    markerA = new google.maps.Marker({
      position: latLngA,
      title: 'Location',
      map: map,
      draggable: true
    }),
    infoA = new google.maps.InfoWindow({
      content: contentA
    }),
    markerB = new google.maps.Marker({
      position: latLngB,
      title: 'Location',
      map: map,
      draggable: true
    }),
    infoB = new google.maps.InfoWindow({
      content: contentB
    })
    // exemplary setup: 
    // Assumes that your map is signed to the var "map"
    // Also assumes that your marker is named "marker"
    ,
    circle = new google.maps.Circle({
      map: map,
      clickable: false,
      // metres
      radius: 100000,
      fillColor: '#fff',
      fillOpacity: .6,
      strokeColor: '#313131',
      strokeOpacity: .4,
      strokeWeight: .8
    });
  // attach circle to marker
  circle.bindTo('center', markerCenter, 'position');

  var
  // get the Bounds of the circle
    bounds = circle.getBounds()
    // Note spans
    ,
    noteA = jQuery('.bool#a'),
    noteB = jQuery('.bool#b');

  noteA.text(bounds.contains(latLngA));
  noteB.text(bounds.contains(latLngB));

  // get some latLng object and Question if it's contained in the circle:
  google.maps.event.addListener(markerCenter, 'dragend', function() {
    latLngCenter = new google.maps.LatLng(markerCenter.position.lat(), markerCenter.position.lng());
    bounds = circle.getBounds();
    noteA.text(bounds.contains(latLngA));
    noteB.text(bounds.contains(latLngB));
  });

  google.maps.event.addListener(markerA, 'dragend', function() {
    latLngA = new google.maps.LatLng(markerA.position.lat(), markerA.position.lng());
    noteA.text(bounds.contains(latLngA));
  });

  google.maps.event.addListener(markerB, 'dragend', function() {
    latLngB = new google.maps.LatLng(markerB.position.lat(), markerB.position.lng());
    noteB.text(bounds.contains(latLngB));
  });

  google.maps.event.addListener(markerCenter, 'click', function() {
    infoCenter.open(map, markerCenter);
  });

  google.maps.event.addListener(markerA, 'click', function() {
    infoA.open(map, markerA);
  });

  google.maps.event.addListener(markerB, 'click', function() {
    infoB.open(map, markerB);
  });

  google.maps.event.addListener(markerCenter, 'drag', function() {
    infoCenter.close();
    noteA.html("draggin&hellip;");
    noteB.html("draggin&hellip;");
  });

  google.maps.event.addListener(markerA, 'drag', function() {
    infoA.close();
    noteA.html("draggin&hellip;");
  });

  google.maps.event.addListener(markerB, 'drag', function() {
    infoB.close();
    noteB.html("draggin&hellip;");
  });
};

body {
  margin: 0;
  padding: 0
}
html,
body,
#map {
  height: 100%;
  font-family: Arial, sans-serif;
  font-size: .9em;
  color: #fff;
}
#note {
  text-align: center;
  padding: .3em;
  10px;
  background: #009ee0;
}
.bool {
  font-style: italic;
  color: #313131;
}
.info {
  display: inline-block;
  width: 40%;
  text-align: center;
}
.infowin {
  color: #313131;
}
#title,
.bool {
  font-weight: bold;
}

<script src="http://maps.googleapis.com/maps/api/js"></script>
<div id="note"><span id="title">&raquo;Inside the circle?&laquo;</span>
  <hr /><span class="info">Marker <strong>A</strong>: <span id="a" class="bool"></span></span>&larr;&diams;&rarr; <span class="info">Marker <strong>B</strong>: <span id="b" class="bool"></span></span>
</div>
<div id="map">test</div>

Answer 1

google.maps.LatLngBounds 是一个矩形。您需要一个多边形“包含”功能。对于一个圆，这可以简化为测试该点是否小于离中心的半径。

例子

代码片段：

window.onload = function init() {
  var
    contentCenter = '<span class="infowin">Center Marker (draggable)</span>',
    contentA = '<span class="infowin">Marker A (draggable)</span>',
    contentB = '<span class="infowin">Marker B (draggable)</span>';
  var
    latLngCenter = new google.maps.LatLng(37.081476, -94.510574),
    latLngCMarker = new google.maps.LatLng(37.0814, -94.5105),
    latLngA = new google.maps.LatLng(37.2, -94.1),
    latLngB = new google.maps.LatLng(38, -93),
    map = new google.maps.Map(document.getElementById('map'), {
      zoom: 7,
      center: latLngCenter,
      mapTypeId: google.maps.MapTypeId.ROADMAP,
      mapTypeControl: false
    }),
    markerCenter = new google.maps.Marker({
      position: latLngCMarker,
      title: 'Center of Circle',
      map: map,
      draggable: true
    }),
    infoCenter = new google.maps.InfoWindow({
      content: contentCenter
    }),
    markerA = new google.maps.Marker({
      position: latLngA,
      title: 'A',
      map: map,
      label: "A",
      draggable: true
    }),
    infoA = new google.maps.InfoWindow({
      content: contentA
    }),
    markerB = new google.maps.Marker({
      position: latLngB,
      title: 'B',
      map: map,
      label: "B",
      draggable: true
    }),
    infoB = new google.maps.InfoWindow({
      content: contentB
    })
    // exemplary setup: 
    // Assumes that your map is signed to the var "map"
    // Also assumes that your marker is named "marker"
    ,
    circle = new google.maps.Circle({
      map: map,
      clickable: false,
      // metres
      radius: 100000,
      fillColor: '#fff',
      fillOpacity: .6,
      strokeColor: '#313131',
      strokeOpacity: .4,
      strokeWeight: .8
    });
  // attach circle to marker
  circle.bindTo('center', markerCenter, 'position');

  var
  // get the Bounds of the circle
    bounds = circle.getBounds()
    // Note spans
    ,
    noteA = jQuery('.bool#a'),
    noteB = jQuery('.bool#b');

  noteA.text((100000 > google.maps.geometry.spherical.computeDistanceBetween(markerA.getPosition(), markerCenter.getPosition())));
  noteB.text((100000 > google.maps.geometry.spherical.computeDistanceBetween(markerB.getPosition(), markerCenter.getPosition())));

  // get some latLng object and Question if it's contained in the circle:
  google.maps.event.addListener(markerCenter, 'dragend', function() {
    latLngCenter = markerCenter.position;
    noteA.text((100000 > google.maps.geometry.spherical.computeDistanceBetween(markerA.getPosition(), markerCenter.getPosition())));
    noteB.text((100000 > google.maps.geometry.spherical.computeDistanceBetween(markerB.getPosition(), markerCenter.getPosition())));
  });

  google.maps.event.addListener(markerA, 'dragend', function() {
    latLngA = markerA.position;
    noteA.text((100000 > google.maps.geometry.spherical.computeDistanceBetween(markerA.getPosition(), markerCenter.getPosition())));
  });

  google.maps.event.addListener(markerB, 'dragend', function() {
    latLngB = markerB.position;
    noteB.text((100000 > google.maps.geometry.spherical.computeDistanceBetween(markerB.getPosition(), markerCenter.getPosition())));
  });

  google.maps.event.addListener(markerCenter, 'click', function() {
    infoCenter.open(map, markerCenter);
  });

  google.maps.event.addListener(markerA, 'click', function() {
    infoA.open(map, markerA);
  });

  google.maps.event.addListener(markerB, 'click', function() {
    infoB.open(map, markerB);
  });

  google.maps.event.addListener(markerCenter, 'drag', function() {
    infoCenter.close();
    noteA.html("draggin&hellip;");
    noteB.html("draggin&hellip;");
  });

  google.maps.event.addListener(markerA, 'drag', function() {
    infoA.close();
    noteA.html("draggin&hellip;");
  });

  google.maps.event.addListener(markerB, 'drag', function() {
    infoB.close();
    noteB.html("draggin&hellip;");
  });
};

body {
  margin: 0;
  padding: 0
}
html,
body,
#map {
  height: 100%;
  font-family: Arial, sans-serif;
  font-size: .9em;
  color: #fff;
}
#note {
  text-align: center;
  padding: .3em;
  10px;
  background: #009ee0;
}
.bool {
  font-style: italic;
  color: #313131;
}
.info {
  display: inline-block;
  width: 40%;
  text-align: center;
}
.infowin {
  color: #313131;
}
#title,
.bool {
  font-weight: bold;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="http://maps.googleapis.com/maps/api/js?libraries=geometry"></script>
<div id="note"><span id="title">&raquo;Inside the circle?&laquo;</span>
  <hr /><span class="info">Marker <strong>A</strong>: <span id="a" class="bool"></span></span>&larr;&diams;&rarr; <span class="info">Marker <strong>B</strong>: <span id="b" class="bool"></span></span>
</div>
<div id="map">test</div>