在信息 window 中创建动态街道全景图（Google 地图 Javascript API）
Creating a dynamic street panorama in info window (Google Maps Javascript API)
我正在尝试为当前选择的 google 标记信息 window 创建全景街景。到目前为止，我有与位置标题一起出现的信息 window。但是，我希望在其正下方显示全景图。我收到诸如 'cannot read properties such as style of undefined' 之类的错误。
以下是我目前拥有的功能：
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());
以下是数据：
var locations = [
{
title: 'Nino\'s Pizza',
location: {
lat: 40.620057,
lng: -74.032894
}
},
{
title: 'Shore Road Bike Path',
location: {
lat: 40.623089,
lng: -74.040596
}
},
{
title: 'Paneantico Bakery',
location: {
lat: 40.619418,
lng: -74.0322818
}
}]
最后是视图
<!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>
在标记点击处理程序中，您需要自己创建一些 DOM 元素，然后传递给 infoWindow 内容槽，而不是 html.
通过这样做，您将能够将 div 元素的引用传递给 google.maps.StreetViewPanorama 构造函数，
以此处为例，将 document.getElementById('pano') 替换为在您的点击处理程序中创建的某些 div 元素，并在其他元素中传递给 infoWindow.content。
https://developers.google.com/maps/documentation/javascript/streetview
我正在尝试为当前选择的 google 标记信息 window 创建全景街景。到目前为止，我有与位置标题一起出现的信息 window。但是，我希望在其正下方显示全景图。我收到诸如 'cannot read properties such as style of undefined' 之类的错误。
以下是我目前拥有的功能：
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());
以下是数据：
var locations = [
{
title: 'Nino\'s Pizza',
location: {
lat: 40.620057,
lng: -74.032894
}
},
{
title: 'Shore Road Bike Path',
location: {
lat: 40.623089,
lng: -74.040596
}
},
{
title: 'Paneantico Bakery',
location: {
lat: 40.619418,
lng: -74.0322818
}
}]
最后是视图
<!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>
在标记点击处理程序中，您需要自己创建一些 DOM 元素，然后传递给 infoWindow 内容槽，而不是 html.
通过这样做，您将能够将 div 元素的引用传递给 google.maps.StreetViewPanorama 构造函数，
以此处为例，将 document.getElementById('pano') 替换为在您的点击处理程序中创建的某些 div 元素，并在其他元素中传递给 infoWindow.content。
https://developers.google.com/maps/documentation/javascript/streetview