通過jQuery在插件gmap3中添加自動完成輸入

Question

我想在插件gmap3中添加自動完成輸入，在點擊地址移動標記之後放置並獲取經度和緯度，但我無法完成。我試圖爲：

演示：http://jsfiddle.net/ezJUm/

<div id="content"> 
    <input id="searchTextField" type="text"> 
    <div id="map_canvas" class="line"></div> 
    <div id="latlng" class="line">click the map</div> 
    <div id="address" class="line">click the map</div> 
</div> 

$(document).ready(function() { 
    // create the map 
    var map = $("#map_canvas").gmap3({ 
     lat: 43.0566, 
     lng: -89.4511, 
     zoom: 12 
    }); 
    //*********************** Autocomplete ********************************* 
    var lat = 26.535266981346876, 
     lng = 54.02773082256317, 
     latlng = new google.maps.LatLng(lat, lng), 
     image = 'http://www.google.com/intl/en_us/mapfiles/ms/micons/blue-dot.png'; 

    mapG = new google.maps.Map(document.getElementById('map_canvas')), 
    marker = new google.maps.Marker({ 
     position: latlng, 
     map: mapG, 
     icon: image 
    }); 
    var input = document.getElementById('searchTextField'); 
    var autocomplete = new google.maps.places.Autocomplete(input, { 
     types: ["geocode"] 
    }); 
    autocomplete.bindTo('bounds', mapG); 
    var infowindow = new google.maps.InfoWindow(); 
    //*********************** Autocomplete ********************************* 

    // add click handlers 
    map.onclickReverseGeocode(function (address) { 
     $("#address").html(address); 
    }); 
    map.onclickGetLatLng(function (latlng) { 
     $("#latlng").html(latlng[0] + ',' + latlng[1]); 
    }); 
});​ 

我該怎麼辦？

Answer 1

您需要像這樣在autoComplete對象上設置一個place_changed事件偵聽器。 Here是一個自動完成的例子。

google.maps.event.addListener(autocomplete, 'place_changed', function() { 
     infowindow.close(); 
     marker.setVisible(false); 
     input.className = ''; 
     var place = autocomplete.getPlace(); 
     console.log(place); 
     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) { 
     mapG.fitBounds(place.geometry.viewport); 
     } else { 
     mapG.setCenter(place.geometry.location); 
     mapG.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(mapG, marker); 
    }); 

我已經更新了的jsfiddle - http://jsfiddle.net/ezJUm/1/