Ich arbeite an einem einfachen Spiel in HTML und JavaScript mit der GoogleMaps API. Der Code, den ich momentan habe, zeigt die Kartenansicht auf der linken Seite des Bildschirms und die Straßenansicht auf der rechten Seite des Bildschirms an. Wenn Sie die Pfeiltasten bewegen, dreht sich der Pegman (das ist der kleine Kerl, der sich in GoogleMaps durch die Straßen bewegt) und bewegt sich vorwärts und zurück je nach gedrückter Taste (dies ist eine GoogleMaps-Standardfunktion). Der Kern des Spiels ist, dass sobald der Pegman "Punkt B" erreicht hat, Sie das Level abgeschlossen haben und eine Box sehen, die "Erfolg! Level # abgeschlossen" oder so ähnlich anzeigt. Ich habe Probleme, Code zu schreiben, um zu erkennen, dass der Pegman an einem bestimmten Ort angekommen ist. (Ich habe versucht, latLng gleich oder ungefähr gleich zu finden, ohne Erfolg.) Wie kann mein Spiel erkennen, ob ein Spieler ein bestimmtes Ziel ungefähr erreicht hat. Der HTML und JavaScript-Code unten läuft das Programm ohne prüft, ob der Pegman an Punkt B angekommen istWie schreibe ich eine Bedingung, um Pegman-Ort zu erkennen und Popup-Box in GoogleMaps zu erstellen?
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">×</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);