检索地点 api 的 json
Retrieve json of place api
我搜索了整个上午如何从 google api 中检索我的 json 数据,但是在我看到很多问题之后我仍然无法弄清楚我是什么'必须要做。我想我对这一点感到困惑,所以如果你愿意投反对票,请至少给我一个评论或一些真正能帮助我的东西吗?
预期行为
我希望控制台日志或访问类似这样的东西
[
{
"restaurantName":"Bronco",
"address":"39 Rue des Petites Écuries, 75010 Paris",
"lat":48.8737815,
"long":2.3501649,
"ratings":[
{
"stars":4,
"comment":"Great! But not many veggie options."
},
{
"stars":5,
"comment":"My favorite restaurant!"
}
]
},
{
"restaurantName":"Babalou",
"address":"4 Rue Lamarck, 75018 Paris",
"lat":48.8865035,
"long":2.3442197,
"ratings":[
{
"stars":5,
"comment":"Tiny pizzeria next to Sacre Coeur!"
},
{
"stars":3,
"comment":"Meh, it was fine."
}
]
}
]
代码
这是我关于 gmap、自动完成和输入搜索的 javascript。
function initAutocomplete() {
var map = new google.maps.Map(document.getElementById('map'), {
center: {lat: -33.8688, lng: 151.2195},
zoom: 13,
mapTypeId: 'roadmap'
});
initialize();
google.maps.event.addListener(map, 'rightclick', function(event) {
placeMarker(event.latLng);
console.log(event.latLng);
});
function placeMarker(location) {
var marker = new google.maps.Marker({
position: location,
map: map
});
}
// 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;
}
//automatic movements of the scroll
document.querySelector('#map').scrollIntoView({
behavior: 'smooth'
});
var places = searchBox.getPlaces();
if (places.length == 0) {
return;
}
review = [];
//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) {
//hai aggiunto bounds, ricorda che stai cercando di passare le coordinate posto per posto.
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)
};
// remember to make an object instead of these variables
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;
console.log(idPlace);
printCard(photo, title, rating, address, idPlace);
initMap(idPlace, map);
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
};
$(".columnsContainer").fadeIn();
document.querySelector('#map').scrollIntoView({
behavior: 'smooth'
});
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());
}
}
我的尝试
我尝试添加这行代码,但它不起作用
$.getJSON("https://maps.googleapis.com/maps/api/place/nearbysearch/json?location=36.950030,14.537220&radius=500&type=restaurant&key=AIzaSyDWb4mliJPGjwsAhNvdDEveAd0dTe9KXxE&callback=?", function(data){
console.log("Data: " + data);
});
我有这个控制台日志,上面有@markymark 的回答:
Access to XMLHttpRequest at from origin 'null' has been blocked by
CORS policy: No 'Access-Control-Allow-Origin' header is present on the
requested resource
对我有帮助的问题
- How to capture and parse JSON returned from Google Maps v3 API?(这真的很有趣)
- https://developers.google.com/places/web-service/search
codepen
所以我在 this question
中了解了 CORS
这是您的 URL 修复,您的回调仍然来自 javascript API。您可以使用简单的 URL 获取那些。您可以将其粘贴到浏览器中并查看结果。
SF 附近图书馆的示例
请记得删除您的 API 密钥。这些是你的钥匙。
我搜索了整个上午如何从 google api 中检索我的 json 数据,但是在我看到很多问题之后我仍然无法弄清楚我是什么'必须要做。我想我对这一点感到困惑,所以如果你愿意投反对票,请至少给我一个评论或一些真正能帮助我的东西吗?
预期行为
我希望控制台日志或访问类似这样的东西
[
{
"restaurantName":"Bronco",
"address":"39 Rue des Petites Écuries, 75010 Paris",
"lat":48.8737815,
"long":2.3501649,
"ratings":[
{
"stars":4,
"comment":"Great! But not many veggie options."
},
{
"stars":5,
"comment":"My favorite restaurant!"
}
]
},
{
"restaurantName":"Babalou",
"address":"4 Rue Lamarck, 75018 Paris",
"lat":48.8865035,
"long":2.3442197,
"ratings":[
{
"stars":5,
"comment":"Tiny pizzeria next to Sacre Coeur!"
},
{
"stars":3,
"comment":"Meh, it was fine."
}
]
}
]
代码
这是我关于 gmap、自动完成和输入搜索的 javascript。
function initAutocomplete() {
var map = new google.maps.Map(document.getElementById('map'), {
center: {lat: -33.8688, lng: 151.2195},
zoom: 13,
mapTypeId: 'roadmap'
});
initialize();
google.maps.event.addListener(map, 'rightclick', function(event) {
placeMarker(event.latLng);
console.log(event.latLng);
});
function placeMarker(location) {
var marker = new google.maps.Marker({
position: location,
map: map
});
}
// 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;
}
//automatic movements of the scroll
document.querySelector('#map').scrollIntoView({
behavior: 'smooth'
});
var places = searchBox.getPlaces();
if (places.length == 0) {
return;
}
review = [];
//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) {
//hai aggiunto bounds, ricorda che stai cercando di passare le coordinate posto per posto.
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)
};
// remember to make an object instead of these variables
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;
console.log(idPlace);
printCard(photo, title, rating, address, idPlace);
initMap(idPlace, map);
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
};
$(".columnsContainer").fadeIn();
document.querySelector('#map').scrollIntoView({
behavior: 'smooth'
});
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());
}
}
我的尝试
我尝试添加这行代码,但它不起作用
$.getJSON("https://maps.googleapis.com/maps/api/place/nearbysearch/json?location=36.950030,14.537220&radius=500&type=restaurant&key=AIzaSyDWb4mliJPGjwsAhNvdDEveAd0dTe9KXxE&callback=?", function(data){
console.log("Data: " + data);
});
我有这个控制台日志,上面有@markymark 的回答:
Access to XMLHttpRequest at from origin 'null' has been blocked by CORS policy: No 'Access-Control-Allow-Origin' header is present on the requested resource
对我有帮助的问题
- How to capture and parse JSON returned from Google Maps v3 API?(这真的很有趣)
- https://developers.google.com/places/web-service/search
codepen
所以我在 this question
中了解了 CORS这是您的 URL 修复,您的回调仍然来自 javascript API。您可以使用简单的 URL 获取那些。您可以将其粘贴到浏览器中并查看结果。
SF 附近图书馆的示例
请记得删除您的 API 密钥。这些是你的钥匙。