javascript - computeDistanceBetween 似乎计算不正确

标签 javascript google-maps google-maps-api-3 geometry distance

用户在 gmap 上绘制圆圈后，我将成为 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>

似乎添加标记的东西，即使它不在圆圈中(在包含它的正方形中很难)

知道我错过了什么吗？

最佳答案

您的代码始终执行 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);
}
  1. 更改代码以首先评估酒店是否在圆内(如果在圆内，则将在边界内，但不一定在相反的范围内)。
  2. 将 .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>

关于javascript - computeDistanceBetween 似乎计算不正确，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/32639822/

上一篇：javascript - 将一 block Canvas 转换为 blob 类型

下一篇：javascript - 在主干中启用 CORS

相关文章：

javascript - 谷歌地图 API 在函数之间传递信息

google-maps - ElasticSearch 地理数据库 : geo_distance filter returns geo pins in ellipse not in circle

ios - Google Map nearby API 在 ios 中不工作

google-maps - 谷歌地图显示状态线

javascript - 在 JavaScript 中使用递归获取范围数

javascript - 你能根据div的大小调用JavaScript方法吗？

iphone - MKAnnotationView 的不同字体

javascript - 从多个 JSON 文件中切换复选框选择标记

google-maps - 有没有一种简单的方法可以在 Google map 上突出显示某个区域？

javascript - 无法将表导出为 csv

©2024 IT工具网  联系我们