有没有办法使用 API 从 Google 检索 map ，以便显示带有标记的本地教堂列表？
我有基本的语法，我有一个基本的 API 帐户设置，但我不知道如何/如果我可以使用类型字段。
var mapOptions = {
center: new google.maps.LatLng("-33.8670522", "151.1957362"),
zoom: 11,
scrollwheel: false,
streetViewControl: false,
mapTypeId: google.maps.MapTypeId.ROADMAP
};
var map = new google.maps.Map(document.getElementById("googlemaps"), mapOptions);
最佳答案
是的，你可以做到这一点，使用Google Places API .
我将使用 JavaScript API ，因为您似乎正在使用此类 API 构建 map 。
如 documentation 中所述:
The Places service is a self-contained library, separate from the main Maps API JavaScript code. To use the functionality contained within this library, you must first load it using the libraries parameter in the Maps API bootstrap URL:
<script src="https://maps.googleapis.com/maps/api/js?libraries=places"></script>
在此之后，您可以使用 JavaScript Places API 按类型和半径(以米为单位)请求地点。允许的最大半径为 50.000 米。
这里有一段代码可以证明这一点:
var request = {
location: sydney,
radius: 5000,
types: ['church']
};
var service = new gm.places.PlacesService(map);
service.nearbySearch(request, handlePlaceResponse);
Obs.:在此示例中，handlePlaceResponse 是一个回调，用于处理响应并创建标记。在完整示例中查看它是如何工作的。
这将由距离悉尼点(lat: -33.8670522, lng: 151.1957362)5 公里半径内的教堂提出请求。
要覆盖标记，您需要处理响应。在示例中，我只使用了 name 作为 InfoWindow 的内容.您可以在此处查看有关响应的详细信息:Place Details Responses
因此，创建标记的函数如下所示:
/**
* Creates marker with place information from response
*/
function createMarker(place) {
var marker = new google.maps.Marker({
map: map,
position: place.geometry.location
});
var infowindow = new google.maps.InfoWindow();
google.maps.event.addListener(marker, 'click', function() {
infowindow.setContent(place.name);
infowindow.open(map, this);
});
}
此外，如果您需要，对于地点搜索中支持的类型，请参阅此链接:Place Type
这里是一个示例，使用您使用的点和 5000 米作为 radius:
<html>
<head>
<title>Google Maps - Places Sample</title>
<style>
body {
margin: 0;
}
#map {
height: 600px;
width: 100%;
}
</style>
<script src="https://maps.googleapis.com/maps/api/js?libraries=places"></script>
<script>
var gm = google.maps;
var map;
var bounds;
var service;
var infowindow;
var sydney = new gm.LatLng(-33.8670522, 151.1957362);
function initialize() {
var options = {
zoom: 15,
center: sydney,
mapTypeId: gm.MapTypeId.ROADMAP,
streetViewControl: false,
scrollwheel: false
};
map = new gm.Map(document.getElementById("map"), options);
var request = {
location: sydney,
radius: 5000,
types: ['church']
};
bounds = new gm.LatLngBounds();
infowindow = new gm.InfoWindow();
service = new gm.places.PlacesService(map);
service.nearbySearch(request, handlePlaceResponse);
}
/**
* Handle place response and call #createMarker to creat marker for every place returned
*/
function handlePlaceResponse(results, status) {
if (status == gm.places.PlacesServiceStatus.OK) {
for (var i = 0; i < results.length; i++) {
createMarker(results[i]);
}
}
map.fitBounds(bounds);
map.setCenter(bounds.getCenter());
}
/**
* Creates marker with place information from response
*/
function createMarker(place) {
var location = place.geometry.location;
var marker = new gm.Marker({
map: map,
position: location
});
bounds.extend(location);
gm.event.addListener(marker, 'click', function() {
infowindow.setContent(place.name);
infowindow.open(map, this);
});
}
gm.event.addDomListener(window, 'load', initialize);
</script>
</head>
<body>
<div id="map"></div>
</body>
</html>关于javascript - Google Map with Local Churches，如何构建API调用？，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/29973426/