computeDistanceBetween 似乎计算不正确

Question

用户在gmaps上画了一个圆之后，我lastShape对象：

var drawingManager;
  var lastShape;
  var map;
  var markers = [];
  var timeout;
  var timeoutwait = 500;
  function initialize() {
      map = new google.maps.Map(document.getElementById('gmap'), {
          zoom: 3,
          center: new google.maps.LatLng(40.463667, -3.749220),
          mapTypeId: google.maps.MapTypeId.ROADMAP,
          disableDefaultUI: true,
          zoomControl: true
      });
      var shapeOptions = {
          strokeWeight: 1,
          strokeOpacity: 1,
          fillOpacity: 0.2,
          editable: true,
          draggable: true,
          clickable: true,
          strokeColor: '#D60056',
          fillColor: '#D60056'
      };
      var shapeOptionsCircle = {
          strokeWeight: 1,
          strokeOpacity: 1,
          fillOpacity: 0.2,
          editable: true,
          draggable: true,
          clickable: false,
          strokeColor: '#D60056',
          fillColor: '#D60056'
      };
      drawingManager = new google.maps.drawing.DrawingManager({
          drawingMode: null,
          drawingControlOptions: {
              drawingModes: [google.maps.drawing.OverlayType.CIRCLE,    google.maps.drawing.OverlayType.RECTANGLE]
          },
          rectangleOptions: shapeOptions,
          circleOptions: shapeOptionsCircle,
          Options: shapeOptions,
          map: map
      });
      google.maps.event.addListener(drawingManager, 'overlaycomplete', function (e) {
          if (lastShape != undefined) {
              lastShape.setMap(null);
          }
          if (shift_draw == false) {
              drawingManager.setDrawingMode(null);
          }
          lastShape = e.overlay;
          lastShape.type = e.type;   
          lastBounds = lastShape.getBounds();
          clearTimeout(timeout);
          drawHotels();
          
          lastShape.addListener('bounds_changed', function () {
           lastBounds = lastShape.getBounds();
              clearTimeout(timeout);
              timeout = setTimeout(drawHotels, timeoutwait);
          });
          lastShape.addListener('radius_changed', function() {
            lastBounds = lastShape.getBounds();
            clearTimeout(timeout);
            timeout = setTimeout(drawHotels, timeoutwait);
          });
      });
      var shift_draw = false;       
  }
  google.maps.event.addDomListener(window, 'load', initialize);
  
  
  function drawHotels() {
   if ( markers != undefined) {
    for (var i = 0; i < markers.length; i++ ) {
        markers[i].setMap(null);
    }
    markers.length = 0;
   }
   var json = [
            {"id":8585885,"hotel":"Hotel name", "lat" : "1.3", "long" : "1.33"},
      {"id":8585886,"hotel":"Hotel name 1", "lat" : "-1.3", "long" : "1.33"},
      {"id":8585886,"hotel":"Hotel name 1", "lat" : "42.5000", "long" : "1.5000"},
      {"id":8585886,"hotel":"Hotel name 1", "lat" : "24.0000", "long" : "54.0000"},
      {"id":8585886,"hotel":"Hotel name 1", "lat" : "17.0500", "long" : "-61.8000"},
      {"id":8585886,"hotel":"Hotel name 1", "lat" : "18.2500", "long" : "-63.1667"},
      {"id":8585886,"hotel":"Hotel name 1", "lat" : "24.0000", "long" : "54.0000"},
      {"id":8585886,"hotel":"Hotel name 1", "lat" : "41.0000", "long" : "20.0000"},
      {"id":8585886,"hotel":"Hotel name 1", "lat" : "40.0000", "long" : "45.0000"},
      {"id":8585886,"hotel":"Hotel name 1", "lat" : "12.2500", "long" : "-68.7500"},
      {"id":8585886,"hotel":"Hotel name 1", "lat" : "-12.5000", "long" : "18.5000"},
      {"id":8585886,"hotel":"Hotel name 1", "lat" : "35.0000", "long" : "105.0000"},
      {"id":8585886,"hotel":"Hotel name 1", "lat" : "-90.0000", "long" : "0.0000"},
      {"id":8585886,"hotel":"Hotel name 1", "lat" : "34.0000", "long" : "-64.0000"},
      {"id":8585886,"hotel":"Hotel name 1", "lat" : "-14.3333", "long" : "-170.0000"},
      {"id":8585886,"hotel":"Hotel name 1", "lat" : "47.3333", "long" : "13.3333"},
      {"id":8585886,"hotel":"Hotel name 1", "lat" : "-27.0000", "long" : "133.0000"},
      {"id":8585886,"hotel":"Hotel name 1", "lat" : "12.5000", "long" : "-69.9667"}
        ];
   
   var hotels = eval(json);
   lastBounds = lastShape.getBounds();
   for ( var i = 0; i<hotels.length; i++ ) {
    var hotel = hotels[i];
    if ( lastBounds.contains(  new google.maps.LatLng(hotel.lat, hotel.long) ) ) {
      
     var m1 = new google.maps.Marker({
         position: new google.maps.LatLng(hotel.lat, hotel.long),
         map: map,
         title: hotel.name
     });
     markers.push(m1);
    } else if ( lastShape.type == 'circle') {
     google.maps.Circle.prototype.contains = function(latLng) {
       var condition = this.getBounds().contains(latLng) && google.maps.geometry.spherical.computeDistanceBetween(this.getCenter(), latLng) <= this.getRadius();
       if ( condition ) {
        var m1 = new google.maps.Marker({
            position: new google.maps.LatLng(hotel.lat, hotel.long),
            map: map,
            title: hotel.name
        });
        markers.push(m1);
       }
     }
    }
   }
  }

.google-maps {
  height:0;
  position:relative;
  padding-bottom: 50%;
}
#gmap {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height:100%
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
 <script type="text/javascript" src="http://maps.google.com/maps/api/js?sensor=false&libraries=drawing"></script>

<div class="">
     <div class="google-maps"><div id="gmap"></div></div>
    </div>

即使不在圆圈里也好像要加标记的东西（在包含它的正方形里很难）

知道我错过了什么吗？

Answer 1

您的代码始终执行 if 语句的第一条路径：

if ( lastBounds.contains(  new google.maps.LatLng(hotel.lat, hotel.long) ) ) {

  var m1 = new google.maps.Marker({
    position: new google.maps.LatLng(hotel.lat, hotel.long),
    map: map,
    title: hotel.name
  });
  markers.push(m1);
}

改代码先判断酒店是否在圈内（如果在圈内就在圈内，反之则不一定）。
将.contains函数添加到if语句外的google.maps.Circle中，并在测试中使用。

添加功能：

google.maps.Circle.prototype.contains = function (latLng) {
    var condition = this.getBounds().contains(latLng) && google.maps.geometry.spherical.computeDistanceBetween(this.getCenter(), latLng) <= this.getRadius();
    return condition;
}

然后在测试中使用：

lastBounds = lastShape.getBounds();
for (var i = 0; i < hotels.length; i++) {
    var hotel = hotels[i];
    if (lastShape.type == 'circle') {
        if (lastShape.contains(new google.maps.LatLng(hotel.lat, hotel.long))) {
            var m1 = new google.maps.Marker({
                position: new google.maps.LatLng(hotel.lat, hotel.long),
                map: map,
                title: hotel.name
            });
            markers.push(m1);
        }
    } else if (lastBounds.contains(new google.maps.LatLng(hotel.lat, hotel.long))) {

        var m1 = new google.maps.Marker({
            position: new google.maps.LatLng(hotel.lat, hotel.long),
            map: map,
            title: hotel.name
        });
        markers.push(m1);
    }
}

proof of concept fiddle

代码片段：

var drawingManager;
var lastShape;
var map;
var markers = [];
var timeout;
var timeoutwait = 500;

function initialize() {
  map = new google.maps.Map(document.getElementById('gmap'), {
    zoom: 3,
    center: new google.maps.LatLng(40.463667, -3.749220),
    mapTypeId: google.maps.MapTypeId.ROADMAP,
    disableDefaultUI: true,
    zoomControl: true
  });
  var shapeOptions = {
    strokeWeight: 1,
    strokeOpacity: 1,
    fillOpacity: 0.2,
    editable: true,
    draggable: true,
    clickable: true,
    strokeColor: '#D60056',
    fillColor: '#D60056'
  };
  var shapeOptionsCircle = {
    strokeWeight: 1,
    strokeOpacity: 1,
    fillOpacity: 0.2,
    editable: true,
    draggable: true,
    clickable: false,
    strokeColor: '#D60056',
    fillColor: '#D60056'
  };
  drawingManager = new google.maps.drawing.DrawingManager({
    drawingMode: null,
    drawingControlOptions: {
      drawingModes: [google.maps.drawing.OverlayType.CIRCLE, google.maps.drawing.OverlayType.RECTANGLE]
    },
    rectangleOptions: shapeOptions,
    circleOptions: shapeOptionsCircle,
    Options: shapeOptions,
    map: map
  });
  google.maps.event.addListener(drawingManager, 'overlaycomplete', function(e) {
    if (lastShape != undefined) {
      lastShape.setMap(null);
    }
    if (shift_draw == false) {
      drawingManager.setDrawingMode(null);
    }
    lastShape = e.overlay;
    lastShape.type = e.type;
    lastBounds = lastShape.getBounds();
    clearTimeout(timeout);
    drawHotels();

    lastShape.addListener('bounds_changed', function() {
      lastBounds = lastShape.getBounds();
      clearTimeout(timeout);
      timeout = setTimeout(drawHotels, timeoutwait);
    });
    lastShape.addListener('radius_changed', function() {
      lastBounds = lastShape.getBounds();
      clearTimeout(timeout);
      timeout = setTimeout(drawHotels, timeoutwait);
    });
  });
  var shift_draw = false;
}
google.maps.event.addDomListener(window, 'load', initialize);


function drawHotels() {
  if (markers != undefined) {
    for (var i = 0; i < markers.length; i++) {
      markers[i].setMap(null);
    }
    markers.length = 0;
  }
  var json = [{
    "id": 8585885,
    "hotel": "Hotel name",
    "lat": "1.3",
    "long": "1.33"
  }, {
    "id": 8585886,
    "hotel": "Hotel name 1",
    "lat": "-1.3",
    "long": "1.33"
  }, {
    "id": 8585886,
    "hotel": "Hotel name 1",
    "lat": "42.5000",
    "long": "1.5000"
  }, {
    "id": 8585886,
    "hotel": "Hotel name 1",
    "lat": "24.0000",
    "long": "54.0000"
  }, {
    "id": 8585886,
    "hotel": "Hotel name 1",
    "lat": "17.0500",
    "long": "-61.8000"
  }, {
    "id": 8585886,
    "hotel": "Hotel name 1",
    "lat": "18.2500",
    "long": "-63.1667"
  }, {
    "id": 8585886,
    "hotel": "Hotel name 1",
    "lat": "24.0000",
    "long": "54.0000"
  }, {
    "id": 8585886,
    "hotel": "Hotel name 1",
    "lat": "41.0000",
    "long": "20.0000"
  }, {
    "id": 8585886,
    "hotel": "Hotel name 1",
    "lat": "40.0000",
    "long": "45.0000"
  }, {
    "id": 8585886,
    "hotel": "Hotel name 1",
    "lat": "12.2500",
    "long": "-68.7500"
  }, {
    "id": 8585886,
    "hotel": "Hotel name 1",
    "lat": "-12.5000",
    "long": "18.5000"
  }, {
    "id": 8585886,
    "hotel": "Hotel name 1",
    "lat": "35.0000",
    "long": "105.0000"
  }, {
    "id": 8585886,
    "hotel": "Hotel name 1",
    "lat": "-90.0000",
    "long": "0.0000"
  }, {
    "id": 8585886,
    "hotel": "Hotel name 1",
    "lat": "34.0000",
    "long": "-64.0000"
  }, {
    "id": 8585886,
    "hotel": "Hotel name 1",
    "lat": "-14.3333",
    "long": "-170.0000"
  }, {
    "id": 8585886,
    "hotel": "Hotel name 1",
    "lat": "47.3333",
    "long": "13.3333"
  }, {
    "id": 8585886,
    "hotel": "Hotel name 1",
    "lat": "-27.0000",
    "long": "133.0000"
  }, {
    "id": 8585886,
    "hotel": "Hotel name 1",
    "lat": "12.5000",
    "long": "-69.9667"
  }];

  var hotels = eval(json);
  lastBounds = lastShape.getBounds();
  for (var i = 0; i < hotels.length; i++) {
    var hotel = hotels[i];
    if (lastShape.type == 'circle') {
      if (lastShape.contains(new google.maps.LatLng(hotel.lat, hotel.long))) {
        var m1 = new google.maps.Marker({
          position: new google.maps.LatLng(hotel.lat, hotel.long),
          map: map,
          title: hotel.name
        });
        markers.push(m1);
      }
    } else if (lastBounds.contains(new google.maps.LatLng(hotel.lat, hotel.long))) {

      var m1 = new google.maps.Marker({
        position: new google.maps.LatLng(hotel.lat, hotel.long),
        map: map,
        title: hotel.name
      });
      markers.push(m1);
    }
  }
}
google.maps.Circle.prototype.contains = function(latLng) {
  var condition = this.getBounds().contains(latLng) && google.maps.geometry.spherical.computeDistanceBetween(this.getCenter(), latLng) <= this.getRadius();
  return condition;
}

.google-maps {
  height: 0;
  position: relative;
  padding-bottom: 50%;
}
#gmap {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%
}

<script src="https://maps.google.com/maps/api/js?sensor=false&libraries=drawing"></script>
<div class="">
  <div class="google-maps">
    <div id="gmap"></div>
  </div>
</div>

computeDistanceBetween 似乎计算不正确

computeDistanceBetween seems not to calculate right

javascript

geometry

google-maps

distance

google-maps-api-3