为什么我不能将 Google 地图 getCurrentPosition 与地点搜索 API 结合使用答案

【问题标题】：Why can't I combine Google maps getCurrentPosition with place search API为什么我不能将 Google 地图 getCurrentPosition 与地点搜索 API 结合使用
【发布时间】：2016-05-02 21:53:13
【问题描述】：

我正在尝试建立一个网站，使用户能够按下按钮或链接，它会向他们展示他们所在位置附近的商店。我使用了getCurrentPosition 并放置了搜索服务，它们单独运行良好，但是当我将两者结合起来时没有任何反应。我认为有一种我不知道如何组合它们的方法。

下面是我结合的代码。

<head>
    <title>Churchtraker final</title>
    <meta name="viewport" content = "initial-scale=1.0, user-scalable=no">
    <meta charset="utf-8">
    <style>
        html, body {
            height: 100%;
            margin: 0;
            padding: 0;
        }
        #map {
            height:100%;        
        }   
    </style>
    <script>
        if(navigator.geolocation) {
            navigator.geolocation.getCurrentPosition(initMap);
        } else {
            error('Sorry , Geolocation is not supported in your device');
        }
        var map;
        var infowindow;

        function initMap() {
            var latitude = new google.maps.LatLng(position.coords.latitude);
            var longitude = new google.maps.LatLng(position.coords.longitude);
            var coords = { lat: latitude, lng: longitude };
            map = new google.maps.Map(document.getElementById('map'), {
                      center: coords,
                      zoom:15
                  });
            infowindow = new google.maps.InfoWindow();
            var service = new google.maps.places.PlacesService(map);
            service.nearbySearch({
                location: coords,
                radius:7000,
                type: ['store']
            }, callback);
        }

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

        function createMarker() {
            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>
    <div id="map"></div>
    <script src="https://maps.googleapis.com/maps/api/js?key=My_API_KEY&libraries=places&callback=initMap" async defer></script>
</body>

【问题讨论】：

标签： javascript google-maps google-maps-api-3

【解决方案1】：

地理位置服务是异步的，您需要在回调函数中使用结果，何时/何地可用。您还需要将参数放在回调函数中（在您的情况下，应该是 initMap(position)，但是......您也不能将其用作 API 异步加载的回调。一种选择是从 initMap 函数调用地理定位代码，如果成功则更新地图。

function initMap() {
  map = new google.maps.Map(
    document.getElementById("map"), {
      center: new google.maps.LatLng(37.4419, -122.1419),
      zoom: 13,
      mapTypeId: google.maps.MapTypeId.ROADMAP
    });
  navigator.geolocation.getCurrentPosition(function(position) {
    var coords = {
      lat: position.coords.latitude,
      lng: position.coords.longitude
    };

    map.setOptions({
      center: coords,
      zoom: 15
    });

    infowindow = new google.maps.InfoWindow();
    var service = new google.maps.places.PlacesService(map);
    service.nearbySearch({
      location: coords,
      radius: 7000,
      type: ['store']
    }, callback);
  }, errorHandler, geoLocOptions);
}

proof of concept fiddle

代码 sn-p：

var map;
var currentLocation;
var geoLocOptions = {
  enableHighAccuracy: true,
  timeout: 5000,
  maximumAge: 0
};

function initMap() {
  map = new google.maps.Map(
    document.getElementById("map"), {
      center: new google.maps.LatLng(37.4419, -122.1419),
      zoom: 13,
      mapTypeId: google.maps.MapTypeId.ROADMAP
    });
  navigator.geolocation.getCurrentPosition(function(position) {
    var coords = {
      lat: position.coords.latitude,
      lng: position.coords.longitude
    };

    map.setOptions({
      center: coords,
      zoom: 15
    });

    infowindow = new google.maps.InfoWindow();
    var service = new google.maps.places.PlacesService(map);
    service.nearbySearch({
      location: coords,
      radius: 7000,
      type: ['store']
    }, callback);
  }, errorHandler, geoLocOptions);
}
google.maps.event.addDomListener(window, "load", initMap);

function errorHandler(err) {
  console.warn('ERROR(' + err.code + '): ' + err.message);
};

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

html,
body,
#map {
  height: 100%;
  width: 100%;
  margin: 0px;
  padding: 0px
}

<script src="https://maps.googleapis.com/maps/api/js?libraries=places&key=AIzaSyCkUOdZ5y7hMm0yrcCQoCvLwzdM6M8s5qk"></script>
<div id="map"></div>

【讨论】：

【解决方案2】：

有多个问题：

您调用initMap 2 次（从 maps-API-src 中删除 callback-参数）
您必须将position 作为参数传递给initMap
coords/latitude/longitude的创建是错误的
您必须将place 作为参数传递给createMarker
placesServiceStatus 必须是 PlacesServiceStatus

固定代码：

function initMap(position){
  var 
    center      = { lat: position.coords.latitude, 
                    lng: position.coords.longitude};
    map         = new google.maps.Map(document.getElementById('map'),{
                    center: center,
                    zoom:11
                  }),
    callback    = function(results, status){
                    if (status === google.maps.places.PlacesServiceStatus.OK){
                      for (var i =0; i < results.length; i++){
                        createMarker(results[i]);
                      }
                    }
                  }

    createMarker= function(place){
                    var placeLoc = place.geometry.location,
                        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);
                    });
                  },
    infowindow  = new google.maps.InfoWindow(),
    service     = new google.maps.places.PlacesService(map);

    service.nearbySearch({
        location: center,
        radius:7000,
        type: ['store']
    }, callback);

}


if (navigator.geolocation){
    navigator.geolocation.getCurrentPosition(function(position){initMap(position);});
}else{
    alert('Sorry , Geolocation is not supported in this environment');
}

【讨论】：

Dr.Molle 你的方法给了我更广泛的编码知识，虽然它什么也没显示，我猜是因为我在 html 中混合了一些东西，还是你认为代码仍然有错误？
代码中没有错误（我没有发布 code-sn-p，因为这里似乎已为 code-sn-ps 禁用了地理定位）。根据上面的代码工作小提琴：jsfiddle.net/doktormolle/e482ud6t
感谢Dr.Molle，它的功能也很好，很好，现在你能帮我解决我提到的新问题吗？我的电脑（以及其他设备，如手机）显示错误位置的那个，即显示我国家的著名城市而不是我的确切位置。
当您的计算机未通过 wi-fi 连接时，位置将基于您的 IP 地址（如果可能）......结果可能永远不会非常准确。在这种情况下，您无能为力（除非您指示浏览器改为使用特定位置，例如通过使用像 github.com/rldhont/geolocater 这样的附加组件）
以及如何从 types 参数中指定特定类型的地方