2017-04-25 59 views
-1

我正在尝试将搜索框添加到自动完成功能,这会使Google地图转到搜索框中的位置。到目前为止没有太多的运气找出为什么它不工作。Google地图自动完成搜索框不起作用

---------- HTML

<div class="input-group location" > 
     <input type="text" id="location" placeholder="Enter Location"> 
     <span class="input-group-addon"><i class="fa fa-map-marker geolocation" data-toggle="tooltip" data-placement="bottom" title="Find my position"></i></span> 
</div> 

---------- JavaScript的

var input = document.getElementById('#location') ; 
    var autocomplete = new google.maps.places.Autocomplete(input, { 
     types: ["geocode"] 
    }); 

    autocomplete.bindTo('bounds', map); 
    google.maps.event.addListener(autocomplete, 'place_changed', function() 
    { 
     var place = autocomplete.getPlace(); 
     if (!place.geometry) { 
      return; 
     } 
     if (place.geometry.viewport) { 
      map.fitBounds(place.geometry.viewport); 
      map.setZoom(14); 
     } else { 
      map.setCenter(place.geometry.location); 
      map.setZoom(14); 
     } 

     marker.setPosition(place.geometry.location); 
     //marker.setVisible(true); 

     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(' '); 
     } 
    }); 

回答

2

你的代码工作,唯一的问题是与你输入元素,你已经使用#标签来获取输入,这里是你的工作代码,

Your Code

需要更改的是,

var input = document.getElementById('location'); //删除#标签