Google地图JS API v3:使用containsLocation()获取标记不起作用 - 为什么? [英] Google maps JS API v3: get markers in circle with containsLocation() doesn't work - why?
问题描述
我试图通过使用 google.maps.geometry.poly获取给定半径内的所有标记(
建议 here ,但是我得到一个错误: google.maps.Circle
) .containsLocation TypeError:e是undefined
。
Snippet :
// ...
if(google.maps.geometry.poly .containsLocation(randomMarkers [i] .marker.getPosition(),searchArea)){
console.log('=> in searchArea');
} else {
console.log('=>不在searchArea中');
...
完整代码 strong>:
<!DOCTYPE html>
< html>
< head>
< title>简易地图< /标题>
< meta name =viewportcontent =initial-scale = 1.0,user-scalable = no>
< meta charset =utf-8>
< style>
html,body,#map-canvas {
height:100%;
margin:0px;
填充: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,//米
startLat = 40.782827,
startLng = -73.966167
;
函数init(){
var startLatLng = new google.maps.LatLng(startLat,startLng);
$ b $ 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 =新的google.maps.Marker({
位置:startLatLng,
地图:地图,
可拖动:true,
动画: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',函数(e){
startLatLng = e.latLng;
searchArea.setOptions({
center:startLatLng
});
map.panTo(searchAreaMarker.getPosition());
//找到标记在区域
中(var i = 0; i< randomMarkers.length; i ++){
console.log('Marker:'+ randomMarkers [i] .marker.title +',position:' + randomMarkers [i] .marker.getPosition());
// ----------出现这个错误:
// TypeError:e is undefined
if(google.maps.geometry.poly.containsLocation(randomMarkers [i] .marker.getPosition(),searchArea)){
console.log('=>位于searchArea'中);
$}其他{
console.log('=>不在searchArea'中);
}
}
});
}
google.maps.event.addDomListener(window,'load',init);
< / script>
p>
预先感谢!
B。
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('=>在searchArea' );
} else {
console.log('=>不在searchArea中');
}
工作代码片段:
$ b
var map, searchArea,searchAreaMarker,searchAreaRadius = 1000,// meter 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)}];对于(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()); //在(var i = 0; i< randomMarkers.length; i ++){console.log('Marker:'+ randomMarkers [i] .marker.title +',position:'+ randomMarkers [i])的区域中找到标记。 marker.getPosition()); // ----------这里出现错误:// TypeError:e is undefined if(google.maps.geometry.spherical.computeDistanceBetween(randomMarkers [i] .marker。 getPosition(),searchArea.getCenter())< = searchArea.getRadius()){console.log('=> in searchArea');} else {console.log('=> not in searchArea' );}}});} google.maps.event.addDomListener(window,'load',init);
html,body,#map-canvas {height:100%;宽度:100%; margin:0px; < script src =https:// //maps.googleapis.com/maps/api/js?libraries=geometry\"> ;</script><div id =map-canvasstyle =border:2px solid#3872ac;>< / div>
I'm trying to get all markers within a given radius (google.maps.Circle
) by using google.maps.geometry.poly.containsLocation
as recommended here, but I get an error: TypeError: e is undefined
.
Snippet:
// ...
if (google.maps.geometry.poly.containsLocation(randomMarkers[i].marker.getPosition(), searchArea)) {
console.log('=> is in searchArea');
} else {
console.log('=> is NOT in searchArea');
}
// ...
Full code:
<!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>
Thanks in advance!
B.
containsLocation
is a method on google.maps.Polygon objects not google.maps.Circle objects
To determine if a marker is within a circle use 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');
}
working code snippet:
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.spherical.computeDistanceBetween(randomMarkers[i].marker.getPosition(), searchArea.getCenter()) <= searchArea.getRadius()) {
console.log('=> is in searchArea');
} else {
console.log('=> is NOT in searchArea');
}
}
});
}
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"></script>
<div id="map-canvas" style="border: 2px solid #3872ac;"></div>
这篇关于Google地图JS API v3:使用containsLocation()获取标记不起作用 - 为什么?的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持IT屋!