谷歌地图与本地教会，如何构建API调用

有没有办法使用API从谷歌检索地图，以便显示带有标记的教堂的当地教堂列表？

我有基本的语法，我有一个基本的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构建的地图。

如文件所述：

Places服务是一个独立的库，独立于主要的Maps API JavaScript代码。要使用此库中包含的功能，必须首先使用Maps API引导程序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);

观察：在本例中，handlePlaceResponse是用于处理响应和创建标记的回调。请参阅完整示例中的工作原理。

这将由距离悉尼点5公里半径内的教堂提出要求(lat:-33.8670522，lng:151.1957362)。

要覆盖标记，您需要处理响应。在这个例子中，我只使用了name作为InfoWindow的内容。您可以在此处查看有关响应的详细信息：放置详细信息响应

因此，创建标记的函数如下所示：

/**
* 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

这里有一个例子，使用您使用的点和radius:的5000米

<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>

相关内容

最新更新

热门标签：