Question

我正在尝试使用Google地图API中的Geolocation和Places来显示我周围最近的地方（在我的位置）。这两个例子分开工作但不在一起。

有谁能告诉我为什么会出现这个问题？我用别人覆盖地图还是做错了什么？

    <script type="text/javascript"
      src="https://maps.googleapis.com/maps/api/js?v=3.exp&key=AIzaSyA93l5zPyIvGB7oYGqzLSk28r5XuIs2Do8
&sensor=true&libraries=places"></script>

    <script>
var map;
var service;
var marker;
var pos;


function initialize() {

  var mapOptions = {
    zoom: 15
  };
  map = new google.maps.Map(document.getElementById('map-canvas'),
      mapOptions);

  // Try HTML5 geolocation
  if(navigator.geolocation) {
    navigator.geolocation.getCurrentPosition(function(position) {
      pos = new google.maps.LatLng(position.coords.latitude,
                                       position.coords.longitude);


      var infowindow = new google.maps.InfoWindow({
        map: map,
        position: pos,
        content: 'Located'
      });

      map.setCenter(pos);
    }, function() {
      handleNoGeolocation(true);
    });
  } else {
    // Browser doesn't support Geolocation
    handleNoGeolocation(false);
  }

  var request = {
      location:pos,
      radius:500,
      types: ['store']
  };

  infowindow = new google.maps.InfoWindow();
  var service = new google.maps.places.PlacesService(map);
  service.nearbySearch(request,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(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);
  });
}

function handleNoGeolocation(errorFlag) {
  if (errorFlag) {
    var content = 'Error: The Geolocation service failed.';
  } else {
    var content = 'Error: Your browser doesn\'t support geolocation.';
  }

  var options = {
    map: map,
    position: new google.maps.LatLng(60, 105),
    content: content
  };

  var infowindow = new google.maps.InfoWindow(options);
  map.setCenter(options.position);
}

google.maps.event.addDomListener(window, 'load', initialize);
    </script>

修改的

现在移动代码使其看起来像 - 未修复位置未定义的问题。

if(navigator.geolocation) {
    navigator.geolocation.getCurrentPosition(function(position) {

        var request = {
      location:pos,
      radius:500,
      types: ['store']
  };

  infowindow = new google.maps.InfoWindow();
  var service = new google.maps.places.PlacesService(map);
  service.nearbySearch(request,callback);
      pos = new google.maps.LatLng(position.coords.latitude,
                                       position.coords.longitude);


      var infowindow = new google.maps.InfoWindow({
        map: map,
        position: pos,
        content: 'Located'
      });

      map.setCenter(pos);
    }, function() {
      handleNoGeolocation(true);
    });'

Answer 1

由于对navigator.geolocation.getCurrentPosition()的异步调用立即返回，因此请求的location属性未定义。致电

service.nearbySearch(request,callback);

抱怨位置丢失。这是真的，因为那时没有设置pos。

你必须移动这部分代码：

        var request = {
            location:pos,
            radius:500,
            types: ['store']
        };

        infowindow = new google.maps.InfoWindow();
        var service = new google.maps.places.PlacesService(map);
        service.nearbySearch(request,callback);

到

    navigator.geolocation.getCurrentPosition(function(position) {
    ...
            map.setCenter(pos);

并将变量infoWindow设为全局。

这已更改initialize()功能：

var map;
var service;
var marker;
var pos;
var infowindow;


function initialize() {

    var mapOptions = {
        zoom: 15
    };

    map = new google.maps.Map(document.getElementById('map-canvas'), mapOptions);
    console.log(map);

    // Try HTML5 geolocation
    if (navigator.geolocation) {
        navigator.geolocation.getCurrentPosition(function(position) {
            pos = new google.maps.LatLng(position.coords.latitude,
                                         position.coords.longitude);

            infowindow = new google.maps.InfoWindow({
                map: map,
                position: pos,
                content: 'Located'
            });

            map.setCenter(pos);

            var request = {
                location:pos,
                radius:500,
                types: ['store']
            };

            infowindow = new google.maps.InfoWindow();
            var service = new google.maps.places.PlacesService(map);
            service.nearbySearch(request,callback);
        }, function() {
            handleNoGeolocation(true);
        });
    } else {
        // Browser doesn't support Geolocation
        handleNoGeolocation(false);
    }

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

谷歌地图API地理位置+雷达位置搜索

1 个答案: