预期行为
当我点击餐厅的卡片时，必须显示街景的div，并将相机设置在卡片中列出的位置附近
我已经拥有的关于该地点的数据
我有ID，名称，地址，但我没有lat-lng（至少我没有直接值）
代码
这是HTML
<!-- this section will appear only when you click on a card -->
<div class="columnsContainerTwo">
<div class="leftColumnTwo">
<img src="https://image.ibb.co/k4SSPK/Spinaci_Green_Dark_Blue.jpg" class="detailPhoto">
<div class="detailInfo">
<div class="leftInfoParagraph">
<p style="padding-bottom: 40px;" id="addressRestaurant">Address here Address here Address here Address here Address here </p>
</div>
<p class="leftInfoParagraph" style="padding-bottom: 40px;" id="phoneRestaurant">phone number</p>
<p class="leftInfoParagraph" style="padding-bottom: 30px;" id="ratingPlace">Rating here</p>
</div>
<div class="rightColumnTwo">
<div class="division"></div>
<h2 class="titleRestaurant">Titolo del ristorante qua</h2>
<hr>
<div class="division"></div>
<div class="reviewSlider">
<p>Lorem ipsum Lorem ipsumLorem ipsumLorem ipsumLorem ipsumLorem ipsumLorem ipsumLorem ipsumLorem ipsumLorem ipsumLorem ipsumLorem ipsumLorem ipsumLorem ipsumLorem ipsumLorem ipsumLorem ipsumLorem ipsumLorem ipsumLorem ipsumLorem ipsumLorem ipsumLorem ipsumLorem ipsumLorem ipsumLorem ipsumLorem ipsumLorem ipsumLorem ipsumLorem ipsumLorem ipsumLorem ipsumLorem ipsum</p>
</div>
<div class="streeTview">
<div id="map2"></div>
<div id="pano"></div>
</div>
</div>
</div>
</div>
在下面，您会找到有关Google Api地图和位置的js
function initAutocomplete() {
var map = new google.maps.Map(document.getElementById('map'), {
center: {lat: -33.8688, lng: 151.2195},
zoom: 13,
mapTypeId: 'roadmap'
});
// Create the search box and link it to the UI element.
var input = document.getElementById('pac-input');
var searchBox = new google.maps.places.SearchBox(input);
// Bias the SearchBox results towards current map's viewport.
map.addListener('bounds_changed', function() {
searchBox.setBounds(map.getBounds());
});
var markers = [];
// Listen for the event fired when the user selects a prediction and retrieve
// more details for that place.
searchBox.addListener('places_changed', function() {
//check if the first sectin is already Up
if(!sectionShow){
$(".columnsContainer").fadeIn();
sectionShow=true;
}
document.querySelector('#map').scrollIntoView({
behavior: 'smooth'
});
var places = searchBox.getPlaces();
if (places.length == 0) {
return;
}
//this jquery line delete the previous card if you start another research
$(".card-grid").parent().find('.card-wrap').remove();
// Clear out the old markers.
markers.forEach(function(marker) {
marker.setMap(null);
});
markers = [];
// For each place, get the icon, name and location.
var bounds = new google.maps.LatLngBounds();
places.forEach(function(place) {
if (!place.geometry) {
console.log("Returned place contains no geometry");
return;
}
containerPlace=places;
var photos = place.photos;
if (!photos) {
return;
}
var icon = {
url: place.icon,
size: new google.maps.Size(71, 71),
origin: new google.maps.Point(0, 0),
anchor: new google.maps.Point(17, 34),
scaledSize: new google.maps.Size(25, 25)
};
// photo is usefull to store the photo of every place you have to change all these variables in a single object
var photo = photos[0].getUrl({'maxWidth': 800, 'maxHeight': 900})
var title = place.name;
var rating = place.rating;
var address = place.formatted_address;
var idPlace = place.place_id;
var latlng = place.geometry.location;
console.log(places);
printCard(photo, title, rating, address, idPlace, latlng);
// Create a marker for each place.
markers.push(new google.maps.Marker({
map: map,
icon: icon,
title: place.name,
position: place.geometry.location
}));
if (place.geometry.viewport) {
// Only geocodes have viewport.
bounds.union(place.geometry.viewport);
} else {
bounds.extend(place.geometry.location);
}
});
map.fitBounds(bounds);
});
infoWindow = new google.maps.InfoWindow;
// GeoLocation from Here
if (navigator.geolocation) {
navigator.geolocation.getCurrentPosition(function(position) {
var pos = {
lat: position.coords.latitude,
lng: position.coords.longitude
};
infoWindow.setPosition(pos);
infoWindow.setContent('You are here');
infoWindow.open(map);
map.setCenter(pos);
}, function() {
handleLocationError(true, infoWindow, map.getCenter());
});
} else {
// Browser doesn't support Geolocation
handleLocationError(false, infoWindow, map.getCenter());
}
}
function handleLocationError(browserHasGeolocation, infoWindow, pos) {
infoWindow.setPosition(pos);
infoWindow.setContent(browserHasGeolocation ?
'Error: The Geolocation service failed.' :
'Error: Your browser doesn\'t support geolocation.');
infoWindow.open(map);
}
下面是我如何创建需要街道视图的部分
var detailSectionShow = false;
//store the information to print in the detailed section
$(document).on("click", ".card-wrap", function(){
console.log('sei qua');
//check if the section detailed (columnsContainerTwo) is already open
if(!detailSectionShow){
$(".columnsContainerTwo").fadeIn();
detailSectionShow=true;
}
//move the scroll on the right section
document.querySelector('.columnsContainerTwo').scrollIntoView({
behavior: 'smooth'
});
//save the variable to print
let restaurant = {
img: $(this).find("img").attr("src"),
name: $(this).find("h3").text(),
address: $(this).find(".restoAddress").text(),
rating: "Rating: " + $(this).find(".ratePlace").text(),
latlng: $(this).data('myData')
};
printDetailSection(restaurant);
});
function printDetailSection(InfoToPrint){
$(".detailPhoto").attr("src", InfoToPrint.img); $(".titleRestaurant").text(InfoToPrint.name);
$("#addressRestaurant").text(InfoToPrint.address);
$("#ratingPlace").text(InfoToPrint.rating);
console.log(InfoToPrint.latlng);
}
最后，在下面，您会发现我尝试使用街景视图，但是它没有用，所以我认为我比其他人更想念。
function initialize() {
var fenway = {lat: 42.345573, lng: -71.098326};
var panorama = new google.maps.StreetViewPanorama(
document.getElementById('pano'), {
position: fenway,
pov: {
heading: 34,
pitch: 10
}
});
map.setStreetView(panorama);
}
Codepen
这是整个小型项目的PEN，