类型错误：地图未定义 google api

Question

我一直在参考一个找到的教程，并在使用 google maps api 时偶然发现了一个错误。我得到一个错误，告诉我一个变量实际上是没有定义的。我不确定是什么问题。请帮忙。

    <title></title>
<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/2.0.0/jquery.min.js"></script> 
<script type="text/javascript" 
    src="http://maps.googleapis.com/maps/api/js?libraries=places&sensor=true">
</script>

    <script type="text/javascript">

    var map;
    var service;

    function handleSearchResults (results, status)
    {
         console.log(results);
    }
    function performSearch ()
    {
        var request = {
            bounds: map.getBounds(),
            name: "McDonald's" // within the bounds find the given name
        }
        service.nearbySearch(request, handleSearchResults);
    }

    function initialize (location) //initializing geolocation function
    {
            console.log(location);

        var currentLocation = new google.maps.LatLng(location.coords.latitude, location.coords.longitude)
            var mapOptions = {
                center: currentLocation,
                zoom: 13
            };
            var map = new google.maps.Map(document.getElementById("map-canvas"),
                mapOptions);
                // To add the marker to the map, use the 'map' property
            var marker = new google.maps.Marker({
                position: currentLocation,
                map: map // referencing google map from variable map above
             });

            service = new google.maps.places.PlacesService(map);

      // wait until map bounds are initialized before performing search
      google.maps.event.addListenerOnce(map, 'bounds_changed', performSearch);
    }

    $( document ).ready(function()
    {
        navigator.geolocation.getCurrentPosition(initialize);  

    });

    </script>





</html>

Answer 1

您似乎遇到了该映射变量的范围问题，因为您是在 $(document.ready() 回调的范围内调用 initialize 函数。我在下面的 jsfiddle 中对其进行了一些调整。这能解决问题吗？

jsfiddle

function handleSearchResults (results, status)
{
    console.log(results);
}

function performSearch ()
{
    var request = {
        bounds: map.getBounds(),
        name: "McDonald's" // within the bounds find the given name
    }
    service.nearbySearch(request, handleSearchResults);
}

function initialize (location) //initializing geolocation function
{
    console.log(location);

    var currentLocation = new google.maps.LatLng(location.coords.latitude, location.coords.longitude)
    var mapOptions = {
        center: currentLocation,
        zoom: 13
    };

    map = new google.maps.Map(document.getElementById("map-canvas"),
                              mapOptions);
    // To add the marker to the map, use the 'map' property
    var marker = new google.maps.Marker({
        position: currentLocation,
        map: map // referencing google map from variable map above
    });

    service = new google.maps.places.PlacesService(map);

    // wait until map bounds are initialized before performing search
    google.maps.event.addListenerOnce(map, 'bounds_changed', performSearch);
}   

$(document).ready(function() {
    var map;
    var service;

    navigator.geolocation.getCurrentPosition(initialize);    
})