谷歌地图的自动填充文本框 [英] autocomplete textbox for google maps

问题描述

我在我的asp.net网站上使用谷歌地图，我有两个文本框用于查找它们之间的路由。一切正常，但我希望在我的两个文本框中自动完成，而键入它应该给谷歌地图提示。希望你理解我的需要。

  var  lat = ' <％= lat％>'; 
  var  lon = ' <％= LON％GT;'; 
  var  directionsDisplay; 
  var  directionsService =  new  google.maps.DirectionsService（）; 
 
  function  InitializeMap（）{
 
 directionsDisplay =  new  google.maps.DirectionsRenderer（）; 
  var  latlng =  new  google.maps.LatLng（lat，lon）; 
  var  myOptions = 
 {
 zoom： 13 ，
 center：latlng，
 mapTypeId：google.maps.MapTypeId.ROADMAP 
}; 
  var  map =  new  google.maps。地图（ document  .getElementById（  Gmap ），myOptions）; 
 
 directionsDisplay.setMap（map）; 
 directionsDisplay.setPanel（ document  .getElementById（'  directionpanel'））; 
 
  var  control =  document  .getElementById（'  control'）; 
 control.style.display = '  block'; 
 
  function  calcRoute（）{
 
  var  start =  document  .getElementById（'  from'）值; 
  var  end =  document  .getElementById（'   to'）。value; 
  var  request = {
 origin：start，
 destination：end，
 travelMode：google.maps.DirectionsTravelMode。驾驶
}; 
 directionsService.route（请求，功能（响应，状态）{
 如果 （status == google.maps.DirectionsStatus.OK）{
 directionsDisplay.setDirections（response）; 
} 
}）; 
} 
 
  function  btnDirections_onclick（）{
 calcRoute（）; 
} 
 
  window  .onload = InitializeMap; 

 <  表    id     =  control >  
 <   tr  >  
 <  < span class =code-leadattribute> td  >  
 
 <  表格 >  
 < ;   tr  >  
 <   td  > 来自：<   / td  >  
 <   td  >  <  输入    type   =  text    id   = 来自   名称  = 来自m    style   =  width：300px    /  >  
 <   / td  >  
 <   / tr  >  
 
 <   tr  >  
 <   td  > 要：<   / td  >  
 <   td  >  <  输入   类型  =  text    id   =  to   名称  =  to    style   =  width：300px    /  >  <   / td  >  
 <   / tr  >  
 
 <   tr  >  
 <   td  >  <  < span class =code-leadattribute> / td  >  
 <   td  >  <  输入    id   =  btnDirections    type   =  button    value   =   GetDirections    onclick   =  return btnDirections_onclick（）   < span class =code-keyword> /  >  <   / td  >  
 <   / tr  >  
 <   / table  >  
 
 <   / td  < span class =code-keyword>>  
 <   / tr  >  
 <   / table  >  
 <   div     id     =  Gmap    style   =  height：300px;宽度：600px;删除25px;已移除25px;   >  <   / div  >  
  <   br /  >  
 <   div     id     =  directionpanel      style   = 身高：300px;溢出：自动;删除25px;已移除25px;   >  <   / div  >  

解决方案

嘿raj我知道你想要什么，对于自动填充你使用ajax，j-query等但是你有第一个数据。所以当你输入任何单词时你选择数据，他们选择与该单词相关的所有数据..



作为参考，你查看这个链接....



http://jqueryui.com/autocomplete/ [ ^ ]

< script type =   text / javascript src =   https://maps.googleapis.com/maps/api/js?sensor=false&librarie S =地点>< /脚本> 
 
并添加此  自动填充：
  //  自动填充文本框'来自' 
  var  fromText =  document  .getElementById（'  from'）; 
  var  fromAuto =  new  google.maps.places.Autocomplete（fromText）; 
 fromAuto.bindTo（'  bounds'，map）; 
  //   autocomplete textbox'to' 
  var  toText =  document  .getElementById（' 到）; 
  var  toAuto =  new  google.maps.places.Autocomplete（toText）; 
 toAuto.bindTo（'  bounds'，map）; 

I am using google maps in my asp.net website, i have two textboxes for find route between them. Everything working fine but i want autocomplete in my two textboxes, while typing it should give hints by google map. Hope you understand my need.

        var lat = '<%=lat%>';
        var lon = '<%=lon%>';
        var directionsDisplay;
        var directionsService = new google.maps.DirectionsService();

         function InitializeMap() {
                         
             directionsDisplay = new google.maps.DirectionsRenderer();
             var latlng = new google.maps.LatLng(lat, lon);
             var myOptions =
             {
                 zoom: 13,
                 center: latlng,
                 mapTypeId: google.maps.MapTypeId.ROADMAP
             };
             var map = new google.maps.Map(document.getElementById("Gmap"), myOptions);

             directionsDisplay.setMap(map);
             directionsDisplay.setPanel(document.getElementById('directionpanel'));

             var control = document.getElementById('control');
             control.style.display = 'block';

function calcRoute() {

             var start = document.getElementById('from').value;
             var end = document.getElementById('to').value;
             var request = {
                 origin: start,
                 destination: end,
                 travelMode: google.maps.DirectionsTravelMode.DRIVING
             };
             directionsService.route(request, function (response, status) {
                 if (status == google.maps.DirectionsStatus.OK) {
                     directionsDisplay.setDirections(response);
                 }
             });
         }
         
         function btnDirections_onclick() {
             calcRoute();
         }

         window.onload = InitializeMap;

<table id ="control">
                    <tr>
                    <td>
                        
                    <table>
                    <tr>
                    <td>From:</td>
                    <td><input type="text" id="from" name="from" style="width: 300px" />
                    </td>
                    </tr>

                    <tr>
                    <td>To:</td>
                    <td><input type="text" id="to" name="to" style="width: 300px" /></td>
                    </tr>

                    <tr>
                    <td></td>
                    <td><input id="btnDirections" type="button" value="GetDirections" onclick="return btnDirections_onclick()" /></td>
                    </tr>
                    </table>

                    </td>
                    </tr>
                </table>
                <div id ="Gmap" style="height: 300px; width: 600px; removed 25px; removed 25px;" ></div>
                <br/>
                <div id ="directionpanel"  style="height: 300px; overflow: auto; removed 25px; removed 25px;" ></div>

解决方案

hey raj i know what you want,for auto fill you use ajax,j-query etc. but you have first data for this. so that you pick data when you type any word, they pick all data related to that word..

for reference you check this link....

http://jqueryui.com/autocomplete/[^]

<script type="text/javascript" src="https://maps.googleapis.com/maps/api/js?sensor=false&libraries=places"></script>

and add this for autocomplete:
             //autocomplete textbox 'from'
             var fromText = document.getElementById('from');
             var fromAuto = new google.maps.places.Autocomplete(fromText);
             fromAuto.bindTo('bounds', map);
             //autocomplete textbox 'to'
             var toText = document.getElementById('to');
             var toAuto = new google.maps.places.Autocomplete(toText);
             toAuto.bindTo('bounds', map);

这篇关于谷歌地图的自动填充文本框的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！