GoogleMapsAPI查找詳情-有解無憂

我正在嘗試使用有關某個位置的 google 地圖詳細資訊從標記顯示在資訊視窗中。我正在創建一個標記并希望獲取該標記的地址，以便我可以將其存盤在資料庫中。我能夠獲得標記的標題，但我不知道如何獲得完整地址。這是我的代碼：

<script>

    let pos;
    let map;
    let bounds;
    let infoWindow;
    let currentInfoWindow;
    let service;
    let infoPane;
    function initMap() {

        bounds = new google.maps.LatLngBounds();
        infoWindow = new google.maps.InfoWindow;
        currentInfoWindow = infoWindow;

        if (navigator.geolocation) {
            navigator.geolocation.getCurrentPosition(position => {
                pos = {
                    lat: position.coords.latitude,
                    lng: position.coords.longitude
                };

                map = new google.maps.Map(document.getElementById('map'), {
                    center: pos,
                    zoom: 20
                });
                bounds.extend(pos);

                infoWindow.setPosition(pos);
                infoWindow.setContent('Location found.');
                infoWindow.open(map);
                map.setCenter(pos);


                getNearbyPlaces(pos);
            }, () => {

                handleLocationError(true, infoWindow);
            });
        } else {

            handleLocationError(false, infoWindow);
        }
    }


    function handleLocationError(browserHasGeolocation, infoWindow) {

        pos = { lat: -33.856, lng: 151.215 };
        map = new google.maps.Map(document.getElementById('map'), {
            center: pos,
            zoom: 20
        });


        infoWindow.setPosition(pos);
        infoWindow.setContent(browserHasGeolocation ?
            'Geolocation permissions denied. Using default location.' :
            'Error: Your browser doesn\'t support geolocation.');
        infoWindow.open(map);
        currentInfoWindow = infoWindow;

        getNearbyPlaces(pos);
    }

    function getNearbyPlaces(position) {
        let request = {
            location: position,
            rankBy: google.maps.places.RankBy.DISTANCE,
            keyword: 'basketball courts'
        };

        service = new google.maps.places.PlacesService(map);
        service.nearbySearch(request, nearbyCallback);
    }

    function nearbyCallback(results, status) {
        if (status === google.maps.places.PlacesServiceStatus.OK) {
            createMarkers(results);
        }
    }


    function createMarkers(places) {
        places.forEach(place => {
            let marker = new google.maps.Marker({
                position: place.geometry.location,
                map: map,
                title: place.name
            });

            marker.addListener("click", () => {
                map.setZoom(16);
                map.setCenter(marker.getPosition());
            });
            bounds.extend(place.geometry.location);
        });

        map.fitBounds(bounds);
    }


</script>

<script async defer src="https://maps.googleapis.com/maps/api/js?key=AIzaSyB4mivUi9qIAPD1PUxQwFfwA0ttCbNcATw&libraries=places&callback=initMap">
</script>

我不熟悉 javascript，所以我不確定如何準確地格式化它。如果它顯示在資訊視窗中，我可以從那里自己處理它，但如果有人對如何在那里顯示它有建議，我將不勝感激。

uj5u.com熱心網友回復：

公平地說，您已經完成了大部分作業，但如果只是從nearbyPlaces搜索中獲取結果并將其添加到資訊視窗的情況，那么您也許可以在以下內容中找到用途。作業是在createMarkers函式中完成的

<!doctype html>
<html lang='en'>
    <head>
        <meta charset='utf-8' />
        <title>Google Maps: </title>
        <style>
            #map{
                width:800px;
                height:600px;
                float:none;
                margin:auto;
            }
        </style>
    </head>
    <body>
        <div id='map'></div>
        <script>

            let pos;
            let map;
            let bounds;
            let infoWindow;
            let currentInfoWindow;
            let service;
            let infoPane;
            
            
            
            function initMap() {

                bounds = new google.maps.LatLngBounds();
                infoWindow = new google.maps.InfoWindow;
                currentInfoWindow = infoWindow;

                if (navigator.geolocation) {
                    navigator.geolocation.getCurrentPosition(position => {
                        pos = {
                            lat: position.coords.latitude,
                            lng: position.coords.longitude
                        };

                        map = new google.maps.Map(document.getElementById('map'), {
                            center: pos,
                            zoom: 20
                        });
                        bounds.extend(pos);

                        infoWindow.setPosition(pos);
                        infoWindow.setContent('Location found.');
                        infoWindow.open(map);
                        map.setCenter(pos);


                        getNearbyPlaces( pos );
                    }, () => {

                        handleLocationError(true, infoWindow);
                    });
                } else {

                    handleLocationError(false, infoWindow);
                }
            }


            function handleLocationError(browserHasGeolocation, infoWindow) {
                pos = { lat: -33.856, lng: 151.215 };
                map = new google.maps.Map(document.getElementById('map'), {
                    center: pos,
                    zoom: 20
                });
                infoWindow.setPosition(pos);
                infoWindow.setContent(browserHasGeolocation ?
                    'Geolocation permissions denied. Using default location.' :
                    'Error: Your browser doesn\'t support geolocation.');
                infoWindow.open(map);
                currentInfoWindow = infoWindow;
                getNearbyPlaces(pos);
            }

            function getNearbyPlaces(position) {
                let request = {
                    location: position,
                    rankBy: google.maps.places.RankBy.DISTANCE,
                    keyword: 'basketball courts'
                };
                service = new google.maps.places.PlacesService(map);
                service.nearbySearch(request, nearbyCallback);
            }

            function nearbyCallback(results, status) {
                if (status === google.maps.places.PlacesServiceStatus.OK) {
                    createMarkers(results);
                }
            }


            function createMarkers(places) {
                places.forEach(place => {
                    
                    console.log(place)
                    
                    let marker = new google.maps.Marker({
                        position: place.geometry.location,
                        map: map,
                        title:place.name,
                        /* assign the response data as a property of the marker */
                        content:place
                    });
                    
                    /* 
                        for convenience a regular anonymous function is better here 
                        as it allws us to use `this` to refer to the marker itself
                        within the body of the function.
                    */
                    marker.addListener("click", function(e){
                        map.setZoom(16);
                        map.setCenter( marker.getPosition() );
                        
                        /* 
                            Iterate through ALL properties ( or just some ) of the `this.contents` 
                            property and set as the content for the infowindow
                        */
                        infoWindow.setContent( Object.keys(this.content).map(k=>{
                            return [k,this.content[k] ].join('=')
                        }).join( String.fromCharCode(10) ) );
                        /* open the infowindow */
                        infoWindow.setPosition(e.latLng)
                        infoWindow.open(map,this);
                    });
                    bounds.extend(place.geometry.location);
                });

                map.fitBounds(bounds);
            }


        </script>

        <script async defer src="//maps.googleapis.com/maps/api/js?key=<APIKEY>&libraries=places&callback=initMap">
        </script>
    </body>
</html>

回傳的資料是 JSON，對于每個單獨的結果都有這樣的結構。其中包含的位置資料與其他運行此相同腳本但顯示足夠的位置資料沒有相似之處。

  {
     "business_status" : "OPERATIONAL",
     "geometry" : {
        "location" : {
           "lat" : 52.7525688,
           "lng" : 0.4036446
        },
        "viewport" : {
           "northeast" : {
              "lat" : 52.75354047989272,
              "lng" : 0.4048724298927222
           },
           "southwest" : {
              "lat" : 52.75084082010728,
              "lng" : 0.4021727701072778
           }
        }
     },
     "icon" : "https://maps.gstatic.com/mapfiles/place_api/icons/v1/png_71/generic_business-71.png",
     "icon_background_color" : "#7B9EB0",
     "icon_mask_base_uri" : "https://maps.gstatic.com/mapfiles/place_api/icons/v2/generic_pinlet",
     "name" : "Multi-Use Games Area",
     "place_id" : "ChIJX2Y4mjyL10cRQ0885NSSeTE",
     "plus_code" : {
        "compound_code" : "QC33 2F King's Lynn",
        "global_code" : "9F42QC33 2F"
     },
     "rating" : 0,
     "reference" : "ChIJX2Y4mjyL10cRQ0885NSSeTE",
     "scope" : "GOOGLE",
     "types" : [ "point_of_interest", "establishment" ],
     "user_ratings_total" : 0,
     "vicinity" : "The Walks, nr, South St, King's Lynn"
  }

在標記點擊回呼函式中，以前有這個：

infoWindow.setContent( Object.keys(this.content).map(k=>{
    return [k,this.content[k] ].join('=')
}).join( String.fromCharCode(10) ) );

我們可以建立一個你想使用的任何專案的字串：

infoWindow.setContent( this.content.name ); // simply display the name

或者

infoWindow.setContent(
    `<h1>${this.content.name}</h1>
    <p>${this.content.vicinity}</p>
    <ul>
        <li>Lat: ${this.content.geometry.location.lat()}</li>
        <li>Lng: ${this.content.geometry.location.lng()}</li>
    </ul>
    <img src="${this.content.icon}" />`
); // show some HTML content

轉載請註明出處，本文鏈接：https://www.uj5u.com/ruanti/358051.html

標籤：javascript 接口谷歌地图

上一篇：我可以使用自定義樣式在@react-google-maps/api上加載訊息嗎

下一篇：錯誤：更新或洗掉表“courses”違反表“teacher_courses”上的外鍵約束“fk998yb1badftsiklfh13bcw3ol”