在信息窗口中创建动态街道全景（谷歌地图Javascript API）
我正在尝试创建一个全景街景到一个谷歌标记信息窗口，当前选中。到目前为止，我有一个信息窗口，显示位置标题。然而，我希望在它的正下方展示全景。我收到错误，例如“无法读取未定义样式等属性” 以下是迄今为止我拥有的功能：在信息窗口中创建动态街道全景（谷歌地图Javascript API）,javascript,api,google-maps,google-street-view,Javascript,Api,Google Maps,Google Street View,我正在尝试创建一个全景街景到一个谷歌标记信息窗口，当前选中。到目前为止，我有一个信息窗口，显示位置标题。然而，我希望在它的正下方展示全景。我收到错误，例如“无法读取未定义样式等属性” 以下是迄今为止我拥有的功能： var map; var markers = []; var ViewModel = function() { var self = this; //Pushes the array of location titles onto the DOM self.loca
var map;
var markers = [];
var ViewModel = function() {
var self = this;
//Pushes the array of location titles onto the DOM
self.locationsArray = ko.observableArray(locations);
//Zooms to location on the map of currently clicked location
//Place refers to the current location selected in the DOM
//Example place = locations[current # in array]
self.goToLocation = function(place,status) {
console.log('Lat='+place.location.lat+', Lng='+place.location.lng);
var coordinates = [place.location.lat,place.location.lng];
var latlng = new google.maps.LatLng(coordinates[0],coordinates[1]);
map.panTo(latlng);
map.setZoom(16);
};
self.zoomIn = function() {
map.setZoom(map.zoom+1)
if(map.zoom >= 20) {
alert('Whataya doin, lookin for ants?');
map.setZoom(map.zoom-6);
}
};
self.zoomOut = function() {
map.setZoom(map.zoom-1)
if(map.zoom <= 10) {
alert('Ay fugetaboutit.. you\'re way atta Brooklyn! Zoom in to see the gabagool.')
map.setZoom(map.zoom+4);
}
};
// http://knockoutjs.com/documentation/click-binding.html#note-1-passing-a-current-item-as-a-parameter-to-your-handler-function
// click binding's callback method
// write a string to the console (first goal)
// filter funcionality
};
function initMap() {
var self=this;
var styles = [
{
featureType: 'water',
stylers: [
{color: '#000000'}
]
},{
featureType: 'administrative',
elementType: 'labels.text.stroke',
stylers: [
{color: '#ffffff'},
{weight: 6}
]
}];
//Below stores the map
map = new google.maps.Map(document.getElementById('map'),{
//Below sets the initial location of the map on the screen
center: new google.maps.LatLng(40.6251388,-74.0282899),
//{lat: 40.6301388,lng:-74.0282899},
//Below sets the level of zoom (1 = farthest away possible)
zoom: 14,
styles: styles
});
//Storing the infoWindow constructor to recall dynamically
//for each location array
var infoWindow = new google.maps.InfoWindow();
//var panorama = new google.maps.StreetViewPanorama();
//map.setStreetView(panorama);
//For every location, create a marker(with specified properties)
for (var i = 0; i < locations.length; i++) {
marker = new google.maps.Marker({
position : new google.maps.LatLng(locations[i].location),
map : map,
title : locations[i].title,
animation : google.maps.Animation.DROP,
icon : 'forkknife.png'
});
//Attach a click event to each marker displaying the infoWindow
//It will zoom to level 16, set the content to the appropriate location
//then open it
google.maps.event.addListener(marker, 'click', (function(marker, i) {
return function() {
map.setZoom(16);
infoWindow.setContent(locations[i].title+'<br>'/*+Pano to go here*/);
infoWindow.open(map, marker);
}
})(marker, i));
}
// create markers objects, for example, here
// viewModel.locations()[index].marker = marker
}
ko.applyBindings(new ViewModel());
<!DOCTYPE html>
<!--All code written by Thomas Grimes with the help of Udacity.com-->
<html>
<head>
<meta charset="utf-8">
<title>Map Project - Thomas Grimes</title>
<link href="styles.css" rel="stylesheet">
<link href="bootstrap/css/bootstrap-grid.min.css" rel="stylesheet">
<link href="https://fonts.googleapis.com/css?family=Asap+Condensed" rel="stylesheet">
</head>
<body style="font-family: 'Asap Condensed', sans-serif; background-color:black;">
<div class='container'>
<div class="row">
<div class="col-sm-12" id="topBar" style="text-align:center;margin: 10px 0px 10px 0px;border-bottom:solid white 1px;padding:5px">
<span style="color:white;">Where to eat in . . .
<span style="font-size: 300%">
Bay Ridge
</span>
</span>
</div>
<hr>
</div>
<div class='row'>
<div class='col-md-3' style="text-align:center;background-color:#1D2120;border: solid white 2px;" id="sideBar">
<span>
<br>
<button type="button" style="background-color:black;color:white;width:50px;" data-bind="click:zoomIn">+</button>
<button type="button" style="background-color:black;color:white;width:50px;" data-bind="click:zoomOut">-</button>
</span>
<ul style="padding:0;" data-bind="foreach:locationsArray">
<li class="sideBarElements">
<span id="place" data-bind="text:title,click:$parent.goToLocation"></span>
</li>
</ul>
<img src="bridge.png">
<input type="text" id="title">
<input type="text" id="lat">
<input type="text" id="lng">
<button type="button" name="button">Add location</button>
</div>
<div class="col-md-9">
<div id="map"></div>
</div>
</div>
</div>
<script src="http://knockoutjs.com/downloads/knockout-3.4.2.js"></script>
<script src="model.js"></script>
<script src="viewModel.js"></script>
<script async defer src="https://maps.googleapis.com/maps/api/js?libraries=places,geometry&key=AIzaSyDnuPkFW6XLlwH-L6RXzlpEMyLsQFZghXE&v=3&callback=initMap">
</script>
</body>
</html>
地图项目-托马斯·格里姆斯
在哪里吃饭。
湾脊
+
-
-
添加位置
document.getElementById（'pano'）发布的代码中存在语法错误。请发表一篇文章来说明你的问题。可能重复的错误现在应该修复。我只添加了一个片段，没有添加全部功能。现在应该没事了。你是想做些什么吗？请提供一个展示问题的例子。您发布的代码不是最小的（哪里定义了
ko<!DOCTYPE html>
<!--All code written by Thomas Grimes with the help of Udacity.com-->
<html>
<head>
<meta charset="utf-8">
<title>Map Project - Thomas Grimes</title>
<link href="styles.css" rel="stylesheet">
<link href="bootstrap/css/bootstrap-grid.min.css" rel="stylesheet">
<link href="https://fonts.googleapis.com/css?family=Asap+Condensed" rel="stylesheet">
</head>
<body style="font-family: 'Asap Condensed', sans-serif; background-color:black;">
<div class='container'>
<div class="row">
<div class="col-sm-12" id="topBar" style="text-align:center;margin: 10px 0px 10px 0px;border-bottom:solid white 1px;padding:5px">
<span style="color:white;">Where to eat in . . .
<span style="font-size: 300%">
Bay Ridge
</span>
</span>
</div>
<hr>
</div>
<div class='row'>
<div class='col-md-3' style="text-align:center;background-color:#1D2120;border: solid white 2px;" id="sideBar">
<span>
<br>
<button type="button" style="background-color:black;color:white;width:50px;" data-bind="click:zoomIn">+</button>
<button type="button" style="background-color:black;color:white;width:50px;" data-bind="click:zoomOut">-</button>
</span>
<ul style="padding:0;" data-bind="foreach:locationsArray">
<li class="sideBarElements">
<span id="place" data-bind="text:title,click:$parent.goToLocation"></span>
</li>
</ul>
<img src="bridge.png">
<input type="text" id="title">
<input type="text" id="lat">
<input type="text" id="lng">
<button type="button" name="button">Add location</button>
</div>
<div class="col-md-9">
<div id="map"></div>
</div>
</div>
</div>
<script src="http://knockoutjs.com/downloads/knockout-3.4.2.js"></script>
<script src="model.js"></script>
<script src="viewModel.js"></script>
<script async defer src="https://maps.googleapis.com/maps/api/js?libraries=places,geometry&key=AIzaSyDnuPkFW6XLlwH-L6RXzlpEMyLsQFZghXE&v=3&callback=initMap">
</script>
</body>
</html>