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

我正在尝试使用谷歌地图 API 中的地理位置和地点来显示地图（在我的位置）以及我周围最近的地点。这两个示例单独工作，但不能一起工作。

谁能告诉我为什么会有问题？我是否用另一个地图覆盖了地图或做其他错误的事情？

    <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>

EDIT

现在移动了代码，所以它看起来像 - 尚未修复位置未定义的问题。

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

由于异步调用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);

to

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

并设置变量infoWindow global.

这已更改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]);
            }
        }
    }
}