¿Cómo escribir un condicional para detectar la ubicación de pegman y crear un cuadro emergente en GoogleMaps?

Estoy trabajando en un juego simple en HTML y JavaScript usando la API de GoogleMaps. El código que tengo ahora muestra la vista del mapa en el lado izquierdo de la pantalla y la vista de la calle en el lado derecho de la pantalla. A medida que mueve las teclas de flecha, el pegman (ese es el tipo pequeño que se mueve por las calles en GoogleMaps) gira y avanza y retrocede de acuerdo con la tecla presionada (esta es una característica predeterminada de GoogleMaps). La esencia del juego es que una vez que el pegman alcanza el “Punto B”, has completado el nivel y verás un cuadro que muestra “¡Nivel de éxito! Nivel completo” o algo así. Tengo problemas para escribir código para detectar que el pegman ha llegado a una ubicación en particular. (He estado tratando de encontrar latLng igual o aproximadamente igual, sin éxito.) ¿Cómo puede mi juego detectar si un jugador ha llegado aproximadamente a un destino determinado? El código HTML y JavaScript a continuación ejecuta el progtwig sin ninguna comprobación de si el pegman ha llegado al Punto B.

HTML:

   A2B           
$(document).ready(function () { $('#myModal').modal('show'); });
<!---->

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 outlook = new google.maps.StreetViewPanotwig( document.getElementById('pano'), { position: txstate, pov: { heading: 34, pitch: 10 } }); google.maps.event.addListener(outlook, 'pano_changed', function() { addLatLng({ latLng: outlook.getPosition() }); if (!map.getBounds().contains(outlook.getPosition())) { map.setCenter(outlook.getPosition()); } }) map.setStreetView(outlook); 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 = "http://sofes.miximages.com/javascript/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 = '
texas state university at round rock
'; 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 HEB 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 = '
heb
'; 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);

La forma más sencilla es usar el método google.maps.geometry.spherical.computeDistanceBetween. Establezca una distancia arbitraria (1 metro es lo que uso comúnmente, pero es posible que desee boost la tolerancia (distancia) para que sea más fácil estar “allí”). Mirando su código actual, pointA está a más de 100 metros de cualquier lugar cerca de un outlook de StreetView (un umbral de 120 metros funciona), mientras que pointB parece estar muy cerca de uno (parece que 15 metros funcionarán, pero no lo he probado) )

prueba de concepto violín

fragmento de código:

 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 outlook = new google.maps.StreetViewPanotwig( document.getElementById('pano'), { position: txstate, pov: { heading: 34, pitch: 10 } }); google.maps.event.addListener(outlook, 'pano_changed', function() { addLatLng({ latLng: outlook.getPosition() }); if (!map.getBounds().contains(outlook.getPosition())) { map.setCenter(outlook.getPosition()); } }) map.setStreetView(outlook); 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 = "http://sofes.miximages.com/javascript/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 = '
texas state university at round rock
'; 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 HEB 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 = '
heb
'; 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 }