Marker im Kreis berechnen

Darauf aufbauenhttp://jsfiddle.net/kaiser/wzcst/light/ Beispiel, aber die Markierung im Kreis ist nicht genau, wenn die Markierung außerhalb des Kreises und in der Nähe des Kreises liegt, wird sie als innerhalb des Kreises betrachtet, der nicht gewünscht wird.

Gibt es eine andere Idee?

Code-Auszug (von verknüpfter Geige):

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>

Antworten auf die Frage(1)

Ihre Antwort auf die Frage