我正在使用GoogleMaps API创建一个简单的HTML和JavaScript游戏。我现在的代码显示屏幕左侧的地图视图和屏幕右侧的街景视图。当您移动箭头键时，街景小人（这是在GoogleMaps中围绕街道移动的小家伙）会根据按下的键旋转并向前和向后移动（这是默认的GoogleMaps功能）。我正在尝试做的是添加一条不断更新的折线，显示Pegman访问过的所有地方。我一直在提到文档[这里] [1]和[这里] [2]。 HTML代码：
<!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代码：
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);
}
}
}
答案 0 :(得分：2)
addLatLng()＆＃34; pano_changed＆＃34>时需要调用panorama函数。事件被触发，具有新全景的位置：
google.maps.event.addListener(panorama, 'pano_changed', function(){
addLatLng({latLng:panorama.getPosition()});
}):
代码段
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',
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
});
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',
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
});
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);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"></script>
<h3>A to B</h3>
<div id="map"></div>
<div id="pano"></div>