在 Google 地图中整合地理位置和地点搜索答案

【问题标题】：Putting together Geolocation and Places search in Google Maps在 Google 地图中整合地理位置和地点搜索
【发布时间】：2018-04-29 03:30:11
【问题描述】：

我一直在尝试整合 GoogleMaps API 为开发人员提供的两个功能（地点搜索和地理定位）

由于我对 javascript 不是很熟悉，因此我不确定自己可能会犯什么错误。到目前为止，Places Search 完全可用（具有预定位置），但 Geolocation 则不能（它应该用用户的位置覆盖预定位置）。

这里你可以看看我的代码。

<!DOCTYPE html>
<html>
<head>
    <title>Place searches</title>
    <meta name="viewport" content="initial-scale=1.0, user-scalable=no">
    <meta charset="utf-8">

    <style>
        #map {
            height: 580px;
            width: 680px;
            border: 10px solid darkred;
            padding: 5px;
            margin: 25px;
        }


        html, body {
            height: 100%;
            margin: 0;
            padding: 0;
        }

    </style>
    <script>
        // This example requires the Places library. Include the libraries=places
        // parameter when you first load the API. For example:
        // <script src="https://maps.googleapis.com/maps/api/js?key=YOUR_API_KEY&libraries=places">

        var map;
        var infowindow;

        function initMap() {
            var pyrmont = {lat:43.364490, lng:-8.407406};

            map = new google.maps.Map(document.getElementById('map'), {
                center: pyrmont,
                zoom: 15
            });

            infowindow = new google.maps.InfoWindow({map:map});
            var service = new google.maps.places.PlacesService(map);
            service.nearbySearch({
                location: pyrmont,
                radius: 2000,
                type: ['gym']
            }, callback);

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

                    infoWindow.setPosition(pos);
                    infoWindow.setContent('Location found.');
                    map.setCenter(pos);
                }, function() {
                    handleLocationError(true, infoWindow, map.getCenter());
                });
            } else {
                // Browser doesn't support Geolocation
                handleLocationError(false, infoWindow, map.getCenter());
            }
        }

        function handleLocationError(browserHasGeolocation, infoWindow, pos) {
            infoWindow.setPosition(pos);
            infoWindow.setContent(browserHasGeolocation ?
                'Error: The Geolocation service failed.' :
                'Error: Your browser doesn\'t support geolocation.');

        }

        function callback(results, status) {
            if (status === google.maps.places.PlacesServiceStatus.OK) {
                for (var i = 0; i < results.length; i++) {
                    createMarker(results[i]);
                }
            }
        }

        function createMarker(place) {
            var placeLoc = place.geometry.location;
            var marker = new google.maps.Marker({
                map: map,
                position: place.geometry.location
            });

            google.maps.event.addListener(marker, 'click', function() {
                infowindow.setContent(place.name);
                infowindow.open(map, this);
            });
        }
    </script>
</head>
<body>
<header>
    <h1>Encuentra tu gimnasio más próximo</h1>
</header>
<div id="map"></div>
<script src="https://maps.googleapis.com/maps/api/js?key=***MY_KEY***&libraries=places,geometry&callback=initMap" async defer></script>
</body>
</html>

非常感谢任何帮助。

【问题讨论】：

标签： javascript html google-maps google-geolocation

【解决方案1】：

infoWindow 变量的大小写似乎有误。

它是这样声明的：

var infowindow;

但在navigator.geolocation.getCurrentPosition 的回调中使用了不同的大小写：

infoWindow.setPosition(pos);
infoWindow.setContent('Location found.');

这个错误应该已经显示在浏览器的开发工具控制台中。

【讨论】：