2013-05-01 39 views
2

可以這樣做嗎?使用地點自動填充時設置地圖的初始位置 - Google Places API

這是我在Google https://groups.google.com/forum/?fromgroups=#!topic/google-maps-js-api-v3/kdgueJzwvK4中發現的內容。

我做這樣的:當用戶還沒有觸發一些事件

# TODO In case input has currently a value 
    if autocomplete.getPlace() 
    places.pin(autocomplete.getPlace(), map, input) 

autocomplete.getPlace()返回undefined。

用戶輸入一些數據後,我可以使用places.pin(autocomplete.getPlace(), map, input)沒有問題

我試圖觸發輸入變化,但沒有運氣$(input).trigger('change')

+0

不知道這是你在找什麼,但在過去,我已經能夠迫使使用 '//使用地理編碼,以地圖的初始位置geolocate geocoder = new google.maps.Geocoder(); //設置默認的myLatLng,如果google.loader.ClientLocation失敗時使用 var myLatlng = new google.maps.LatLng(40.8802950337396,-102.21679674999996); //如果ClientLocation由裝載機填充,使用該信息,而不是 \t如果(google.loader.ClientLocation){ \t \t gmapZoom = 13; \t \t myLatlng = new google.maps.LatLng(google.loader.ClientLocation.latitude,google.loader.ClientLocation.longitude); \t}' – Dropzilla 2013-05-01 16:56:47

+0

我忘了告訴我已經找到了這個答案http://stackoverflow.com/questions/10772282/google-maps-places-api-v3-autocomplete-select-first-option-on-enter-and - 有,那裏有一個小提琴根據長lat設置位置,但我需要根據輸入內容設置地圖。似乎你的解決方案也是長期經濟。在那種情況下,我該如何擴展您的解決方案以滿足我的需求? – juanpastas 2013-05-01 17:19:36

+0

似乎答案在那裏,但有太多的代碼:( – juanpastas 2013-05-01 17:22:22

回答

3

下面是一些代碼,我寫了很長一段時間以前,可能指向你在正確的方向。有可能是你需要填寫一些空白。

<!DOCTYPE html> 
    <html lang="en"> 
      <head> 
      </head> 
    <body> 
     <input id="gmap_start_address" type="text" /> 
    </body> 
</html> 

initialize(); 
     // Handle enter button click event for start address input text field 
     $("#gmap_start_address").keypress(function(event){ 
      if(event.keyCode == 13){ 
       event.preventDefault(); 
       goStartAddr(); 
      } 
     }); 

/** 
* Handle initialization of google map 
* @params 
*/ 
function initialize() { 
    var gmapZoom = 4; 
    geocoder = new google.maps.Geocoder(); 
    // Set default myLatLng to be used if google.loader.ClientLocation fails 
    var myLatlng = new google.maps.LatLng(40.8802950337396, -102.21679674999996); 
    // If ClientLocation was filled in by the loader, use that info instead 
    if (google.loader.ClientLocation) { 
     gmapZoom = 13; 
     myLatlng = new google.maps.LatLng(google.loader.ClientLocation.latitude, google.loader.ClientLocation.longitude); 
    } 
    var myOptions = { 
     zoom: gmapZoom, 
     center: myLatlng, 
     mapTypeId: google.maps.MapTypeId.ROADMAP 
    } 
    map = new google.maps.Map(document.getElementById("map_canvas"), myOptions); 
    var polyOptions = { 
     strokeColor: '#5F5CFA', 
     strokeOpacity: 0.5, 
     strokeWeight: 3 
    } 
    poly = new google.maps.Polyline(polyOptions); 
    poly.setMap(map); 
    // Add a listener for the click event 
    google.maps.event.addListener(map, 'click', addLatLng); 
} 

/** 
* Handle GO button click to process start address 
* @params 
*/ 
function goStartAddr(){ 
    var startAddr = $('#gmap_start_address').val(); 
    if(startAddr != '' && startAddr != 'Starting address, city, zip code'){ 
     placeStartMkr(); 
    } else { 
     alert('Please enter start address.'); 
     $('#gmap_start_address').focus(); 
    } 
} 
/** 
* Handle marker placement from human address start point. 
* Originally this function placed a starting marker 
* Starting marker code is commented out and preserved for 
* ease of use in the future. 
* @params 
*/ 
function placeStartMkr(){ 
    // Grab address 
    var humanAddr = $('#gmap_start_address').val(); 
    geocoder.geocode({ 'address': humanAddr}, function(results, status) { 
    if (status == google.maps.GeocoderStatus.OK) { 
      map.setCenter(results[0].geometry.location); 
      map.setZoom(16); 
     } else { 
      alert("Geocode was not successful for the following reason: " + status); 
     } 
    }); 
} 
相關問題