Google地图JS API v3：使用containsLocation（）获取标记不起作用 - 为什么？ [英] Google maps JS API v3: get markers in circle with containsLocation() doesn't work - why?

查看：155
本文介绍了Google地图JS API v3：使用containsLocation（）获取标记不起作用 - 为什么？的处理方法，对大家解决问题具有一定的参考价值，需要的朋友们下面随着小编来一起学习吧！

问题描述

我试图通过使用 google.maps.geometry.poly获取给定半径内的所有标记（ google.maps.Circle ） .containsLocation 建议 here ，但是我得到一个错误： 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：//


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 fiddle

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屋！

查看全文
相关文章
前端开发最新文章
热门教程
热门工具
登录 关闭
扫码关注1秒登录
发送“验证码”获取 | 15天全站免登陆