具有地理位置和地点搜索功能的 Google Maps API答案

【问题标题】：Google Maps API with Geolocation and Places Search具有地理位置和地点搜索功能的 Google Maps API
【发布时间】：2014-03-13 15:31:17
【问题描述】：

我正在使用 Google 地图和地点 API。我试图让地图显示当前位置以及周围的餐馆、咖啡馆和酒吧。此时地图加载并且地理位置正在工作。我似乎无法显示位置标记。我不知道我错过了什么，因为我正在尽快学习 javascript。

任何帮助将不胜感激。谢谢！

这是我当前的代码：

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

function initialize() 
{

    var mapOptions = {
     zoom: 14,
     mapTypeId: google.maps.MapTypeId.ROADMAP,
     scrollwheel: false,
     panControl: false,
     streetViewControl: false,
     mapTypeControl: false,
     };

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

    //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: 'You Are Here'});

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

            map.setCenter(pos);

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

        }, 

        function() 
        { 
        handleNoGeolocation(true);
        });
    } 
    else 
    {
    handleNoGeolocation(false);
    }

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

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

【问题讨论】：

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

【解决方案1】：

检查您对 Google API 的脚本调用是否包含对地点库的引用。例如：

<script src="http://maps.googleapis.com/maps/api/js?key=yourAPIkey&libraries=geometry,places&sensor=true&language=en"></script>

【讨论】：

谢谢，安迪！我确实有一个参考，但为了它，我添加了你的行。仍然没有，同样的结果。
不知道发生了什么。我已将您的代码添加到 JSFiddle，在我更改外部资源以解决它之前，JSFiddle 抛出了一个找不到位置的错误。添加它使错误消失（jsfiddle.net/andyuws/a3DC6）
嗯。我只是不明白。它显然可以很好地加载，并且可以很好地定位，它只是没有从搜索和放置图钉中找到位置。我可以让这两个部分自己工作，只是不能像这样一起工作。
好的，我想通了。它在这一行： var request = {location:pos,radius:500,types: ['restaurant, cafe, bars']};它必须是 var request = {location:pos,radius:500,types: ['restaurant', 'cafe', 'bars']};

【解决方案2】：

在这行代码中：

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

而不是types:写keyword:

【讨论】：