如何编写条件检测街景小人位置并在 GoogleMaps 中创建弹出框？

Question

我正在 HTML 和 JavaScript 使用 GoogleMaps API 开发一款简单的游戏。我现在拥有的代码在屏幕左侧显示地图视图，在屏幕右侧显示街景。当您四处移动箭头键时，街景小人（即在 Google 地图中在街道上移动的小家伙）会根据按下的键旋转并前后移动（这是 Google 地图的默认功能）。游戏的要点是，一旦街景小人到达 "Point B"，您就完成了关卡，并且会看到一个显示 "Success! Level # complete" 或类似内容的方框。我在编写代码来检测街景小人已到达特定位置时遇到问题。（我一直试图找到 latLng 等于或近似等于，但没有成功。）我的游戏如何检测玩家是否已大致到达指定目的地。下面的 HTML 和 JavaScript 代码运行程序而不检查街景小人是否已到达 B 点。

HTML:

<!DOCTYPE html>
<html lang="en">
<head>
  <title>A2B</title>
        <meta charset="utf-8">
        <meta name="viewport" content="width=device-width, initial-scale=1">
        <link rel="stylesheet" href="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
        <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
        <script src="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
        <link rel="stylesheet" href="A2B.css"></link>
        <script type="text/javascript" src="pegman_lines.js"></script>
</head>
<body>

<nav class="navbar navbar-default">
  <div class="container">
    <div class="navbar-header">
      <button type="button" class="navbar-toggle" data-toggle="collapse" data-target="#myNavbar">
        <span class="icon-bar"></span>
        <span class="icon-bar"></span>
        <span class="icon-bar"></span> 
      </button>
      <a class="navbar-brand" href="A2B.html">Home</a>
    </div>
    <div class="collapse navbar-collapse" id="myNavbar">
      <ul class="nav navbar-nav navbar-right">
        <li><a href="#">Game</a></li>
        <li><a href="about_game.html">About the game</a></li>
        <li><a href="about_us.html">Developers</a></li>
      </ul>
    </div>
  </div>


</nav>

<div id="map"></div>
<div id="pano"></div>
    <script async defer src="https://maps.googleapis.com/maps/api/js?key=YOURAPICODE&callback=initMap"> 
    </script>
    <script>
    $(document).ready(function () {
            $('#myModal').modal('show');
        });
    </script>
    <div class="container">

  <!-- Modal -->
  <div class="modal fade" id="myModal" role="dialog">
    <div class="modal-dialog">

      <!-- Modal content-->
      <div class="modal-content">
        <div class="modal-header">
          <button type="button" class="close" data-dismiss="modal">&times;</button>
          <h4 class="modal-title">A to B</h4>
        </div>
        <div class="modal-body">
          <p>
          <b>How to Play:</b><br>
          1. Click on the panorama view <br>
          2. Navigate with arrow keys <br>
          3. Find the fastest way from Point A to Point B!
          </p>
        </div>
        <div class="modal-footer">
          <button type="button" class="btn btn-default" data-dismiss="modal">Ready!</button>
        </div>
      </div>

    </div>
  </div>

</div>



</div>



<!--<footer class="container-fluid bg-4 text-center">
  <p>Bootstrap Theme Made By <a href="http://www.w3schools.com">www.w3schools.com</a></p> 
</footer>-->

</body>
</html>

JavaScript:

var poly;
var map;
var pointA;
var pointB;

function initMap() {
    var mapDiv = document.getElementById('map');
    map = new google.maps.Map(mapDiv, {
      center: {
        lat: 30.565244,
        lng: -97.671010
      },
      zoom: 14
    });

    var txstate = {
      lat: 30.569858,
      lng: -97.655918
    };
    var panorama = new google.maps.StreetViewPanorama(
      document.getElementById('pano'), {
        position: txstate,
        pov: {
          heading: 34,
          pitch: 10
        }
      });
    google.maps.event.addListener(panorama, 'pano_changed', function() {
      addLatLng({
        latLng: panorama.getPosition()
      });
      if (!map.getBounds().contains(panorama.getPosition())) {
        map.setCenter(panorama.getPosition());
      }
    })
    map.setStreetView(panorama);

    poly = new google.maps.Polyline({
      strokeColor: '#000000',
      strokeOpacity: 1.0,
      strokeWeight: 3
    });
    poly.setMap(map);

    // Add a listener for the click event
    map.addListener('position_change', addLatLng);
  }
  // Handles click events on a map, and adds a new point to the Polyline.

function addLatLng(event) {
  var path = poly.getPath();

  // Because path is an MVCArray, we can simply append a new coordinate
  // and it will automatically appear.
  path.push(event.latLng);

  //point A
  //hard-coded as Texas State University right now
  var image = "https://upload.wikimedia.org/wikipedia/commons/7/73/Farm-Fresh_star.png"; //STAR
  if (!pointA) {
    pointA = new google.maps.Marker({
      position: {
        lat: 30.567989,
        lng: -97.655153
      },
      map: map,
      title: 'tx state',
      label: 'A',
     // animation: google.maps.Animation.DROP
    });
    var contentString_A = '<h5>texas state university at round rock</h5>';
    var infowindow_A = new google.maps.InfoWindow({
      content: contentString_A
    });
    pointA.addListener('click', info_A);

  }

  function info_A() {
    infowindow_A.open(map, pointA);
  }

  //point B
  //hard-coded as H-E-B right now
  if (!pointB) {
    var pointB = new google.maps.Marker({
      position: {
        lat: 30.560619,
        lng: -97.688338
      },
      map: map,
      title: 'heb',
      label: 'B',
      //animation: google.maps.Animation.DROP
    });
    var contentString_B = '<h5>h-e-b</h5>';
    var infowindow_B = new google.maps.InfoWindow({
      content: contentString_B
    });
    pointB.addListener('click', info_B);
  }

  function info_B() {
    infowindow_B.open(map, pointB);
  }

  function toggleBounce() {
    if (marker.getAnimation() !== null) {
      marker.setAnimation(null);
    } else {
      marker.setAnimation(google.maps.Animation.BOUNCE);
    }
  }

}
google.maps.event.addDomListener(window, "load", initMap);

Answer 1

最简单的方法是使用google.maps.geometry.spherical.computeDistanceBetween方法。设置任意距离（1米是我常用的，但你可能想增加容忍度（距离）以使其更容易成为"there"）。查看您现有的代码，pointA 距离 StreetView 全景图附近的任何地方都超过 100 米（120 米的阈值有效），而 pointB 似乎非常接近一个（看起来 15 米可以，但我没有测试那个） ).

proof of concept fiddle

代码片段：

var poly;
var map;
var pointA;
var pointB;
var infowindow_A;
var infowindow_B;

function initMap() {
    var mapDiv = document.getElementById('map');
    map = new google.maps.Map(mapDiv, {
      center: {
        lat: 30.565244,
        lng: -97.671010
      },
      zoom: 14
    });
    var svLayer = new google.maps.StreetViewCoverageLayer();
    svLayer.setMap(map);
    var txstate = {
      lat: 30.569858,
      lng: -97.655918
    };
    var panorama = new google.maps.StreetViewPanorama(
      document.getElementById('pano'), {
        position: txstate,
        pov: {
          heading: 34,
          pitch: 10
        }
      });
    google.maps.event.addListener(panorama, 'pano_changed', function() {
      addLatLng({
        latLng: panorama.getPosition()
      });
      if (!map.getBounds().contains(panorama.getPosition())) {
        map.setCenter(panorama.getPosition());
      }
    })
    map.setStreetView(panorama);

    poly = new google.maps.Polyline({
      strokeColor: '#000000',
      strokeOpacity: 1.0,
      strokeWeight: 3
    });
    poly.setMap(map);

    // Add a listener for the click event
    map.addListener('position_change', addLatLng);
  }
  // Handles click events on a map, and adds a new point to the Polyline.

function addLatLng(event) {
  var path = poly.getPath();

  // Because path is an MVCArray, we can simply append a new coordinate
  // and it will automatically appear.
  path.push(event.latLng);

  //point A
  //hard-coded as Texas State University right now
  var image = "https://upload.wikimedia.org/wikipedia/commons/7/73/Farm-Fresh_star.png"; //STAR
  if (!pointA) {
    pointA = new google.maps.Marker({
      position: {
        lat: 30.567989,
        lng: -97.655153
      },
      map: map,
      title: 'tx state',
      label: 'A',
      // animation: google.maps.Animation.DROP
    });
    var circle = new google.maps.Circle({
      map: map,
      radius: 120,
      center: pointA.getPosition()
    });
    var contentString_A = '<h5>texas state university at round rock</h5>';
    infowindow_A = new google.maps.InfoWindow({
      content: contentString_A
    });
    pointA.addListener('click', info_A);

  }

  function info_A() {
    infowindow_A.open(map, pointA);
  }

  //point B
  //hard-coded as H-E-B right now
  if (!pointB) {
    var pointB = new google.maps.Marker({
      position: {
        lat: 30.560619,
        lng: -97.688338
      },
      map: map,
      title: 'heb',
      label: 'B',
      //animation: google.maps.Animation.DROP
    });
    var circleB = new google.maps.Circle({
      map: map,
      radius: 15,
      center: pointB.getPosition()
    });

    var contentString_B = '<h5>h-e-b</h5>';
    infowindow_B = new google.maps.InfoWindow({
      content: contentString_B
    });
    pointB.addListener('click', info_B);
  }
  if (google.maps.geometry.spherical.computeDistanceBetween(pointB.getPosition(), event.latLng) < 15) {
    infowindow_B.open(map, pointB);
  } else if (google.maps.geometry.spherical.computeDistanceBetween(pointA.getPosition(), event.latLng) < 120) {
    infowindow_A.open(map, pointA);
  }


  function info_B() {
    infowindow_B.open(map, pointB);
  }

  function toggleBounce() {
    if (marker.getAnimation() !== null) {
      marker.setAnimation(null);
    } else {
      marker.setAnimation(google.maps.Animation.BOUNCE);
    }
  }

}
google.maps.event.addDomListener(window, "load", initMap);

html,
body {
  height: 100%;
  width: 100%;
  margin: 0px;
  padding: 0px
}
#map {
  height: 100%;
  width: 45%;
  float: left;
  margin: 0px;
  padding: 0px
}
#pano {
  height: 100%;
  width: 45%;
  margin: 0px;
  padding: 0px
}

<script src="https://maps.googleapis.com/maps/api/js?libraries=geometry"></script>
<nav class="navbar navbar-default">
  <div class="container">
    <div class="navbar-header">
      <button type="button" class="navbar-toggle" data-toggle="collapse" data-target="#myNavbar">
        <span class="icon-bar"></span>
        <span class="icon-bar"></span>
        <span class="icon-bar"></span>
      </button>
      <a class="navbar-brand" href="A2B.html">Home</a>
    </div>
    <div class="collapse navbar-collapse" id="myNavbar">
      <ul class="nav navbar-nav navbar-right">
        <li><a href="#">Game</a>
        </li>
        <li><a href="about_game.html">About the game</a>
        </li>
        <li><a href="about_us.html">Developers</a>
        </li>
      </ul>
    </div>
  </div>


</nav>

<div id="map"></div>
<div id="pano"></div>

如何编写条件检测街景小人位置并在 GoogleMaps 中创建弹出框？

How to write a conditional to detect pegman location and create popup box in GoogleMaps?

html

javascript

google-maps

google-maps-api-3

google-maps-markers