2012-04-18 74 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