Google 与地方教会的映射，如何构造API呼召？

Question

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

我有基本的语法，我有基本的API帐户设置，但我不会how/if我可以使用类型字段。

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

Answer 1

是的，你可以这样做，使用 Google Places API。

我将使用 JavaScript API，因为您似乎正在使用 API.

构建地图

如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 是处理响应和创建标记的回调。在完整示例中查看它是如何工作的。

这将由教堂在距悉尼点 5 公里半径内提出请求（lat: -33.8670522，lng: 151.1957362）。

要覆盖标记，您需要处理响应。在示例中，我仅使用 name 作为 InfoWindow. You can see details about the response here: 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);
    });
}

此外，如果您需要，对于地点搜索中支持的类型，请参阅此 link：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>

Google 与地方教会的映射，如何构造API呼召？

Google Map with Local Churches, how to construct API call?

javascript

google-maps

google-places-api