0
私は、GoogleMaps APIを使用してHTMLとJavaScriptで簡単なゲームを作成しています。現在のコードでは、画面の左側にマップビューが表示され、画面の右側にストリートビューが表示されます。矢印キーを動かすと、ペグマン（GoogleMapsで通りを移動する小さな人物）が回転し、押されたキーに従って前後に移動します（これはデフォルトのGoogleマップ機能です）。私がしようとしていることは、Pegmanが訪れたどこにいても常に更新しているポリラインを追加することです。私は文書[ここ] [1]と[ここ] [2]を参照してきました。 HTMLコード：ペグマンのパスに沿ってGoogleマップにポリラインを描くにはどうすればいいですか？
<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" type="text/css" href="map_with_markers.css">
<script type="text/javascript" src="pegman_lines.js"></script>
</head>
<body>
<h3>A to B</h3>
<div id="map"></div>
<div id="pano"></div>
<script async defer
src="https://maps.googleapis.com/maps/api/js?key=YOURAPIKEY&callback=initMap">
</script>
</body>
</html>
[1]: https://developers.google.com/maps/documentation/javascript/streetview?hl=nl#StreetViewEvents
[2]:
https://developers.google.com/maps/documentation/javascript/reference#PolylineOptions
JavaScriptコード：あなたがpanoramaイベントがトリガされた "pano_changed" ときに、新しいパノラマの位置で、addLatLng()関数を呼び出す必要があり
var poly;
var map;
function initMap() {
var mapDiv = document.getElementById('map');
var 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
}
});
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
var pointA = new google.maps.Marker({
position: {lat: 30.567989, lng: -97.655153},
map: map,
title: 'tx state',
icon: image,
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
});
function info_A(){
infowindow_A.open(map, pointA);
}
//point B
//hard-coded as H-E-B right now
var pointB = new google.maps.Marker({
position: {lat: 30.560619, lng: -97.688338},
map: map,
title: 'heb',
icon: image,
animation: google.maps.Animation.DROP
});
var contentString_B = '<h5>h-e-b</h5>';
var infowindow_B = new google.maps.InfoWindow({
content: contentString_B
});
function info_B(){
infowindow_B.open(map, pointB);
}
pointA.addListener('click', info_A);
pointB.addListener('click', info_B);
function toggleBounce() {
if (marker.getAnimation() !== null) {
marker.setAnimation(null);
} else {
marker.setAnimation(google.maps.Animation.BOUNCE);
}
}
}