2012-04-18 95 views
0

我不熟悉Google商家信息自動填充API以及一般開發,但我希望有人能幫助我指出正確的方向。我已閱讀Google地方信息文檔和示例。在嘗試複製Google的示例以獲得更好的理解(http://code.google.com/apis/maps/documentation/javascript/examples/places-autocomplete.html)時,我在運行它時收到以下錯誤:運行Google商家信息自動填充API時出錯

「Google Maps API服務器拒絕了您的請求,請求中指定的」sensor「參數必須設置爲」true「或」false「。

什麼是瘋狂的是我有「傳感器」設置爲「假」!請參閱下面的完整頁面代碼。任何建議將不勝感激。

<html> 
    <head> 
    <title>Google Maps JavaScript API v3 Example: Places Autocomplete</title> 
    <script src="https://maps.googleapis.com/maps/api/js?sensor=false&libraries=places" 
     type="text/javascript"></script> 

    <style type="text/css"> 
     body { 
     font-family: sans-serif; 
     font-size: 14px; 
     } 
     #map_canvas { 
     height: 400px; 
     width: 600px; 
     margin-top: 0.6em; 
     } 
    </style> 

    <script type="text/javascript"> 
     function initialize() { 
      var mapOptions = { 
       center: new google.maps.LatLng(-33.8688, 151.2195), 
       zoom: 13, 
       mapTypeId: google.maps.MapTypeId.ROADMAP 
      }; 
      var map = new google.maps.Map(document.getElementById('map_canvas'), 
      mapOptions); 

      var input = document.getElementById('searchTextField'); 
      var autocomplete = new google.maps.places.Autocomplete(input); 

      autocomplete.bindTo('bounds', map); 

      var infowindow = new google.maps.InfoWindow(); 
      var marker = new google.maps.Marker({ 
       map: map 
      }); 

      google.maps.event.addListener(autocomplete, 'place_changed', function() { 
       infowindow.close(); 
       var place = autocomplete.getPlace(); 
       if (place.geometry.viewport) { 
        map.fitBounds(place.geometry.viewport); 
       } else { 
        map.setCenter(place.geometry.location); 
        map.setZoom(17); // Why 17? Because it looks good. 
       } 

       var image = new google.maps.MarkerImage(
       place.icon, 
       new google.maps.Size(71, 71), 
       new google.maps.Point(0, 0), 
       new google.maps.Point(17, 34), 
       new google.maps.Size(35, 35)); 
       marker.setIcon(image); 
       marker.setPosition(place.geometry.location); 

       var address = ''; 
       if (place.address_components) { 
        address = [(place.address_components[0] && 
         place.address_components[0].short_name || ''), 
         (place.address_components[1] && 
         place.address_components[1].short_name || ''), 
         (place.address_components[2] && 
         place.address_components[2].short_name || '') 
         ].join(' '); 
       } 

       infowindow.setContent('<div><strong>' + place.name + '</strong><br>' + address); 
       infowindow.open(map, marker); 
      }); 

      // Sets a listener on a radio button to change the filter type on Places 
      // Autocomplete. 
      function setupClickListener(id, types) { 
       var radioButton = document.getElementById(id); 
       google.maps.event.addDomListener(radioButton, 'click', function() { 
        autocomplete.setTypes(types); 
       }); 
      } 

      setupClickListener('changetype-all', []); 
      setupClickListener('changetype-establishment', ['establishment']); 
      setupClickListener('changetype-geocode', ['geocode']); 
     } 
     google.maps.event.addDomListener(window, 'load', initialize); 
    </script> 
    </head> 
    <body> 
    <div> 
     <input id="searchTextField" type="text" size="50"> 
     <input type="radio" name="type" id="changetype-all" checked="checked"> 
     <label for="changetype-all">All</label> 

     <input type="radio" name="type" id="changetype-establishment"> 
     <label for="changetype-establishment">Establishments</label> 

     <input type="radio" name="type" id="changetype-geocode"> 
     <label for="changetype-geocode">Geocodes</label> 
    </div> 
    <div id="map_canvas"></div> 
    </body> 
</html> 

回答

3

試試這個腳本

<script> 
    function initialize() { 
var mapOptions = { 
    center: new google.maps.LatLng(-33.8688, 151.2195), 
    zoom: 13, 
    mapTypeId: google.maps.MapTypeId.ROADMAP 
}; 
var map = new google.maps.Map(document.getElementById('map_canvas'), 
    mapOptions); 

var input = document.getElementById('searchTextField'); 
var autocomplete = new google.maps.places.Autocomplete(input); 

autocomplete.bindTo('bounds', map); 

var infowindow = new google.maps.InfoWindow(); 
var marker = new google.maps.Marker({ 
    map: map 
}); 

google.maps.event.addListener(autocomplete, 'place_changed', function() { 
    infowindow.close(); 
    marker.setVisible(false); 
    input.className = ''; 
    var place = autocomplete.getPlace(); 
    if (!place.geometry) { 
    // Inform the user that the place was not found and return. 
    input.className = 'notfound'; 
    return; 
    } 

    // If the place has a geometry, then present it on a map. 
    if (place.geometry.viewport) { 
    map.fitBounds(place.geometry.viewport); 
    } else { 
    map.setCenter(place.geometry.location); 
    map.setZoom(17); // Why 17? Because it looks good. 
    } 
    var image = new google.maps.MarkerImage(
     place.icon, 
     new google.maps.Size(71, 71), 
     new google.maps.Point(0, 0), 
     new google.maps.Point(17, 34), 
     new google.maps.Size(35, 35)); 
    marker.setIcon(image); 
    marker.setPosition(place.geometry.location); 

    var address = ''; 
    if (place.address_components) { 
    address = [ 
     (place.address_components[0] && place.address_components[0].short_name || ''), 
     (place.address_components[1] && place.address_components[1].short_name || ''), 
     (place.address_components[2] && place.address_components[2].short_name || '') 
    ].join(' '); 
    } 

    infowindow.setContent('<div><strong>' + place.name + '</strong><br>' + address); 
    infowindow.open(map, marker); 
}); 

// Sets a listener on a radio button to change the filter type on Places 
// Autocomplete. 
function setupClickListener(id, types) { 
    var radioButton = document.getElementById(id); 
    google.maps.event.addDomListener(radioButton, 'click', function() { 
    autocomplete.setTypes(types); 
    }); 
} 

setupClickListener('changetype-all', []); 
setupClickListener('changetype-establishment', ['establishment']); 
setupClickListener('changetype-geocode', ['geocode']); 
    } 

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

+1 google.maps.event.addListener(自動完成, 'place_changed',函數() – 2013-07-20 07:15:37

相關問題