堆栈内存溢出
  繁体   English   中英

Google Maps API 查找详情

[英]Google Maps API Finding Details

 原文  2021-10-30 18:22:24  3   1    javascript/ api/ google-maps

问题描述

我正在尝试使用有关某个位置的 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，所以我不确定如何准确地格式化它。 如果它显示在信息窗口中，我可以从那里自己处理它，但如果有人对如何在那里显示它有建议，我将不胜感激。

1 个解决方案

解决方案1
 0  2021-10-31 08:37:35

公平地说，您已经完成了大部分工作，但如果只是从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

暂无
暂无

声明:本站的技术帖子网页，遵循CC BY-SA 4.0协议，如果您需要转载，请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.

相关问题 Google Maps Api获取详细信息请求不起作用 谷歌地图 API - 获取标记详细信息 Google Maps JavaScript API，寻找欧拉之旅 使用Google Maps JavaScript API V3的问题 <details> -标签 Google Maps Place Details API 不返回电话号码 Google Maps API地理位置文本搜索位置详细信息 Google Maps API反向查找地址详细信息准确性 使用Google Maps JavaScript API V3查找行车路线 寻找一种通过Google Maps API通过回调传递信息的好方法 Google Maps：Google Places JS API：getDetails（）不会返回整个地点的详细信息
相关标签
 
粤ICP备18138465号  © 2020-2024 STACKOOM.COM