Google Maps API自动完成

问题描述：

我试图使用Google Maps API创建两个自动完成输入框以及一张地图以标记位置。Google Maps API自动完成

目前基于Docs中的例子，我有一个输入框用于自动完成，并在地图上放置一个标记，但是现在我想扩展这个，并有第二个输入框在相同的地图相同的东西，但无法实现它。

到目前为止的代码是

<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'), 
        mapOptions); 

       var input = document.getElementById('frombox'); 
       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(15); 
        } 


        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>

谁能帮我成立了一个名为#tobox第二个输入框做同样的地图上同样的事情，我真的很感激它。

感谢

链接到一个现场示例将是有价值的。 – andresf 2012-02-27 23:41:23

答

你可能已经想通了如何做到这一点，所以我会在情况下别人张贴了类似的问题。

使用你的代码，你需要创建一个新的参考到另一个输入元素，一个新的自动完成的对象，并添加到侦听器列表：

var input2 = document.getElementById('frombox2'); 
var autocomplete2 = new google.maps.places.Autocomplete(input2); 
autocomplete2.bindTo('bounds', map); 
google.maps.event.addListener(autocomplete2, 'place_changed' function(){...});

我会建议删除匿名函数并宣布一个与一个名称，以便您可以在第二个搜索框功能中引用。

谢谢

Google Maps API自动完成

相关推荐