谷歌地图 JS API v3:使用 containsLocation() 获取圆圈标记不起作用 - 为什么
Google maps JS API v3: get markers in circle with containsLocation() doesn't work - why?
我试图按照此处的建议使用google.maps.geometry.poly.containsLocation
来获取给定半径(google.maps.Circle
)内的所有标记,但是我得到一个错误:TypeError: e is undefined
。
片段:
// ...
if (google.maps.geometry.poly.containsLocation(randomMarkers[i].marker.getPosition(), searchArea)) {
console.log('=> is in searchArea');
} else {
console.log('=> is NOT in searchArea');
}
// ...
完整代码:
<!DOCTYPE html>
<html>
<head>
<title>Simple Map</title>
<meta name="viewport" content="initial-scale=1.0, user-scalable=no">
<meta charset="utf-8">
<style>
html, body, #map-canvas {
height: 100%;
margin: 0px;
padding: 0px
}
</style>
<script src="https://maps.googleapis.com/maps/api/js?v=3.exp&signed_in=true"></script>
<script>
var map,
searchArea,
searchAreaMarker,
searchAreaRadius = 1000, // metres
startLat = 40.782827,
startLng = -73.966167
;
function init() {
var startLatLng = new google.maps.LatLng(startLat, startLng);
map = new google.maps.Map(document.getElementById('map-canvas'), {
center: startLatLng,
zoom: 12
});
searchArea = new google.maps.Circle({
strokeColor: '#FF0000',
strokeOpacity: 0.5,
strokeWeight: 2,
fillColor: '#FF0000',
fillOpacity: 0.2,
map: map,
center: startLatLng,
radius: searchAreaRadius
});
searchAreaMarker = new google.maps.Marker({
position: startLatLng,
map: map,
draggable: true,
animation: google.maps.Animation.DROP,
title: 'searchAreaMarker'
});
var randomMarkers = [
{ title: 'Marker 1', latLng: new google.maps.LatLng(40.770088, -73.971146) },
{ title: 'Marker 2', latLng: new google.maps.LatLng(40.782048, -73.972691) },
{ title: 'Marker 3', latLng: new google.maps.LatLng(40.769048, -73.987797) },
{ title: 'Marker 4', latLng: new google.maps.LatLng(40.773858, -73.956211) },
{ title: 'Marker 5', latLng: new google.maps.LatLng(40.800372, -73.952091) },
{ title: 'Marker 6', latLng: new google.maps.LatLng(40.804661, -73.939388) }
];
for (var i = 0; i < randomMarkers.length; i++) {
randomMarkers[i].marker = new google.maps.Marker({
position: randomMarkers[i].latLng,
map: map,
title: randomMarkers[i].title
});
}
google.maps.event.addListener(searchAreaMarker, 'dragend', function(e) {
startLatLng = e.latLng;
searchArea.setOptions({
center: startLatLng
});
map.panTo(searchAreaMarker.getPosition());
// find markers in area
for (var i = 0; i < randomMarkers.length; i++) {
console.log('Marker: ' + randomMarkers[i].marker.title + ', position: ' + randomMarkers[i].marker.getPosition());
// ---------- Here comes the error:
// TypeError: e is undefined
if (google.maps.geometry.poly.containsLocation(randomMarkers[i].marker.getPosition(), searchArea)) {
console.log('=> is in searchArea');
} else {
console.log('=> is NOT in searchArea');
}
}
});
}
google.maps.event.addDomListener(window, 'load', init);
</script>
containsLocation
是google.maps.Polygon对象而不是google.maps.Circle对象上的一种方法
要确定标记是否在圆圈内,请使用google.maps.geometry.spherical.computeDistanceBetween
if (google.maps.geometry.spherical.computeDistanceBetween(randomMarkers[i].marker.getPosition(), searchArea.getCenter()) <= searchArea.getRadius()) {
console.log('=> is in searchArea');
} else {
console.log('=> is NOT in searchArea');
}
工作小提琴
工作代码片段:
var map,
searchArea,
searchAreaMarker,
searchAreaRadius = 1000, // metres
startLat = 40.782827,
startLng = -73.966167;
function init() {
var startLatLng = new google.maps.LatLng(startLat, startLng);
map = new google.maps.Map(document.getElementById('map-canvas'), {
center: startLatLng,
zoom: 12
});
searchArea = new google.maps.Circle({
strokeColor: '#FF0000',
strokeOpacity: 0.5,
strokeWeight: 2,
fillColor: '#FF0000',
fillOpacity: 0.2,
map: map,
center: startLatLng,
radius: searchAreaRadius
});
searchAreaMarker = new google.maps.Marker({
position: startLatLng,
map: map,
draggable: true,
animation: google.maps.Animation.DROP,
title: 'searchAreaMarker'
});
var randomMarkers = [{
title: 'Marker 1',
latLng: new google.maps.LatLng(40.770088, -73.971146)
}, {
title: 'Marker 2',
latLng: new google.maps.LatLng(40.782048, -73.972691)
}, {
title: 'Marker 3',
latLng: new google.maps.LatLng(40.769048, -73.987797)
}, {
title: 'Marker 4',
latLng: new google.maps.LatLng(40.773858, -73.956211)
}, {
title: 'Marker 5',
latLng: new google.maps.LatLng(40.800372, -73.952091)
}, {
title: 'Marker 6',
latLng: new google.maps.LatLng(40.804661, -73.939388)
}];
for (var i = 0; i < randomMarkers.length; i++) {
randomMarkers[i].marker = new google.maps.Marker({
position: randomMarkers[i].latLng,
map: map,
title: randomMarkers[i].title
});
}
google.maps.event.addListener(searchAreaMarker, 'dragend', function(e) {
startLatLng = e.latLng;
searchArea.setOptions({
center: startLatLng
});
map.panTo(searchAreaMarker.getPosition());
findMarkersInArea();
});
var iwArray = [];
function findMarkersInArea() {
// close open infowindows
for (var i=0; i<iwArray.length; i++) {
iwArray[i].close();
}
iwArray = [];
// find markers in area
for (var i = 0; i < randomMarkers.length; i++) {
console.log('Marker: ' + randomMarkers[i].marker.title + ', position: ' + randomMarkers[i].marker.getPosition());
console.log("marker["+i+"] posn="+randomMarkers[i].marker.getPosition().toUrlValue(6));
if (google.maps.geometry.spherical.computeDistanceBetween(randomMarkers[i].marker.getPosition(), searchArea.getCenter()) <= searchArea.getRadius()) {
console.log('=> is in searchArea');
var iw = new google.maps.InfoWindow();
iw.setContent("is in searchArea");
iw.open(map, randomMarkers[i].marker);
iwArray.push(iw);
} else {
console.log('=> is NOT in searchArea');
var iw = new google.maps.InfoWindow();
iw.setContent("outside searchArea");
iw.open(map, randomMarkers[i].marker);
iwArray.push(iw);
}
}
}
// initial config
findMarkersInArea();
}
google.maps.event.addDomListener(window, 'load', init);
html,
body,
#map-canvas {
height: 100%;
width: 100%;
margin: 0px;
padding: 0px
}
<script src="https://maps.googleapis.com/maps/api/js?libraries=geometry&key=AIzaSyCkUOdZ5y7hMm0yrcCQoCvLwzdM6M8s5qk"></script>
<div id="map-canvas" style="border: 2px solid #3872ac;"></div>
@Sumuray建议的解决方案也将在圆之外创建点,但仍在圆的边界(正方形/矩形)内。
使用他建议的方法:
// if HTML DOM Element that contains the map is found...
if (document.getElementById('map-canvas')) {
// Coordinates to center the map
var myLatlng = new google.maps.LatLng(52.525595, 13.393085);
// Other options for the map, pretty much selfexplanatory
var mapOptions = {
zoom: 14,
center: myLatlng,
mapTypeId: google.maps.MapTypeId.ROADMAP
};
// Attach a map to the DOM Element, with the defined settings
var map = new google.maps.Map(document.getElementById("map-canvas"), mapOptions);
var marker = new google.maps.Marker({
map: map,
position: myLatlng
});
var circle = new google.maps.Circle({
map: map,
radius: 1000,
fillColor: '#AA0000',
fillOpacity: 0.15,
strokeWeight: 0.9,
position: myLatlng
});
circle.bindTo('center', marker, 'position');
var circleBounds = circle.getBounds();
for (var i = 0; i < 50; i++) {
var marker = generateMarkerInBoundries(circleBounds);
marker.setMap(map);
}
function generateMarkerInBoundries(boundries) {
var marker = new google.maps.Marker();
marker.setPosition(new google.maps.LatLng(0, 0));
while (!boundries.contains(marker.position)) {
var
ne = boundries.getNorthEast(),
sw = boundries.getSouthWest(),
lat = randomFloat(ne.lat(), sw.lat()),
lng = randomFloat(ne.lng(), sw.lng());
marker.setPosition(new google.maps.LatLng(lat, lng))
}
return marker;
}
function randomFloat(min, max) {
return Math.random() * (max - min) + min;
}
}
#map-canvas {
height: 500px;
width: 500px;
border: 3px solid black;
}
<div id="map-canvas"></div>
<script src="https://maps.googleapis.com/maps/api/js?v=3.exp&sensor=false" type="text/javascript"></script>
您可以清楚地看到一些标记在圆圈之外,但在圆的边界框内。
要解决此问题,您可以使用几何库并添加一个方法来检查点是否在圆的半径内
// if HTML DOM Element that contains the map is found...
if (document.getElementById('map-canvas')) {
// Coordinates to center the map
var myLatlng = new google.maps.LatLng(52.525595, 13.393085);
// Other options for the map, pretty much selfexplanatory
var mapOptions = {
zoom: 14,
center: myLatlng,
mapTypeId: google.maps.MapTypeId.ROADMAP
};
// Attach a map to the DOM Element, with the defined settings
var map = new google.maps.Map(document.getElementById("map-canvas"), mapOptions);
var marker = new google.maps.Marker({
map: map,
position: myLatlng
});
var circle = new google.maps.Circle({
map: map,
radius: 1000,
fillColor: '#AA0000',
fillOpacity: 0.15,
strokeWeight: 0.9,
position: myLatlng
});
circle.bindTo('center', marker, 'position');
var circleBounds = circle.getBounds();
for (var i = 0; i < 50; i++) {
var marker = generateMarkerInCircleRadius(circleBounds);
marker.setMap(map);
}
function generateMarkerInCircleRadius(boundries) {
var marker = new google.maps.Marker();
marker.setPosition(new google.maps.LatLng(0, 0));
while (!isMarkerInRadius(marker, circle)) {
var
ne = boundries.getNorthEast(),
sw = boundries.getSouthWest(),
lat = randomFloat(ne.lat(), sw.lat()),
lng = randomFloat(ne.lng(), sw.lng());
marker.setPosition(new google.maps.LatLng(lat, lng))
}
return marker;
}
function randomFloat(min, max) {
return Math.random() * (max - min) + min;
}
function isMarkerInRadius(marker, circle) {
return google.maps.geometry.spherical.computeDistanceBetween(marker.getPosition(), circle.getCenter()) <= circle.getRadius();
}
}
#map-canvas {
height: 500px;
width: 500px;
border: 3px solid black;
}
<div id="map-canvas"></div>
<script src="https://maps.googleapis.com/maps/api/js?v=3.exp&libraries=geometry&sensor=false" type="text/javascript"></script>
相关文章:
- Js.erb VS按钮标记-不'不起作用.为什么?
- 我的jquery代码不起作用.为什么?
- 代码在firefox中运行良好,但在chrome中不起作用.为什么?
- 谷歌地图 JS API v3:使用 containsLocation() 获取圆圈标记不起作用 - 为什么
- 为函数中的现有数组(全局变量)分配新值不起作用.为什么
- Firefox Addon Builder首选项-服务对我不起作用--为什么
- 将D3函数封装在对象内部;不起作用.为什么?
- 敲除绑定处理程序不起作用:为什么
- I'我试图让jquery在我的chrome扩展的background.js中工作,结果成功了;不起作用.为什么?
- blueimp 文件上传插件中的 max文件大小和接受文件类型不起作用.为什么
- 我有两个具有相同代码的不同域,但其中一个不起作用.为什么
- 简单的HTML/CSS选项卡导航在Safari 9中不起作用.为什么
- Jquery focus()和blur()对我的href不起作用.为什么
- 承诺链不起作用.为什么
- 返回页首滚动jquery在chrome中不起作用.为什么?它在firefox中运行良好
- 为什么是宽度100%的html代码全栏不工作,当我写.忘了那个吧,连复制粘贴都不起作用.为什么
- 使用for循环在数组中查找字符串是有效的,但是这里的forEach()不起作用.为什么以及如何纠正
- 附加html上的preventDefault()不起作用.为什么?
- jQuery元素上的加号或减号不起作用.为什么?
- jquery的正则表达式选择器不起作用.为什么