Question

我正在尝试建立一个网站，让用户可以按下按钮或链接，它会在他们的位置附近显示商店。我已经使用了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>

Answer 1

有很多问题：

您拨打initMap 2次（从地图-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');
}

Answer 2

地理定位服务是异步的，您需要在回调函数中使用结果，何时/何时可用。您还需要将参数放在回调函数中（在您的情况下，应该是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

代码段

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"></script>
<div id="map"></div>

为什么我无法将Google地图getCurrentPosition与地方搜索API结合使用

2 个答案: