自动完成生成多个标记

我的目标是具有自动完成功能的几个输入字段，每个输入将在地图上生成一个标记。然后我需要放大地图以包含所有的标记。我部分工作，没有自动完成功能。我曾尝试将Google Maps API Places自动完成代码添加到我的for循环中，但无济于事。它为所有输入字段提供自动完成功能，但只为最后一个输入放置一个标记。自动完成生成多个标记

任何帮助/见解/指导表示赞赏。

这是我的代码，自动完成功能目前被删除，因为我无法启动它。

<div class="container-fluid"> 
     <div class="row-fluid"> 
     <div class="span4 well"> 
      <div id="locations"> 
       <form> 
        <label>Location 0</label> 
        <input id="address0" type="text" size="50" > 
        <button id="clearField0">Clear</button> 

       <div class="panel"> 
        <label>Location 1</label> 
        <input id="address1" type="text" size="50"> 
        <button id="clearField0">Clear</button> 
       </div> 
       <div class="panel"> 
        <label>Location 2</label> 
        <input id="address2" type="text" size="50"> 
        <button id="clearField0">Clear</button> 
       </div> 
       </form> 
      </div> 
      <button id="addField">+</button> 
      <button id="deleteField">-</button> 
      <button id="submit">Submit form</button> 
     </div> 
     <div class="span8"> 
      <div id="map-wrapper"> 
       <div id="google-map"></div> 
      </div> 
     </div> 
     </div> 
    </div> 
    <script src="https://maps.googleapis.com/maps/api/js?key=AIzaSyCtNo_o0u8wYeqgiFF-KpvAtEy18T-PvAo&sensor=false&callback=createMap"></script> 

    <script type="text/javascript"> 

     var inputFields = parseInt($('form input').size()); 
     var markers = []; 


     var createMap = function() { 
      var latlngbounds = new google.maps.LatLngBounds(); 
      var geocoder = new google.maps.Geocoder(); 

      var myOptions = { 
       center : new google.maps.LatLng(35.9081, -78.8628), //center to RTP 
       zoom : 12, 
       zoomControl: true, 
       mapTypeId: google.maps.MapTypeId.ROADMAP 
      }, 

      map = new google.maps.Map(document.getElementById("google-map"), myOptions); 

      $("#submit").on("click", function() { 
       setAllMap(null); 
       markers.pop(); 
       for (i=0; i<inputFields; i++) { 
        var location = $("#address" + i).val(); 
        geocoder.geocode({'address': location}, function(results, status) { 
         if (status == google.maps.GeocoderStatus.OK) { 
          map.setCenter(results[0].geometry.location); 
          var marker = new google.maps.Marker({ 
           map: map, 
           position: results[0].geometry.location 
          }); 
          latlngbounds.extend(results[0].geometry.location); 
          map.fitBounds(latlngbounds); 
         } else { 
          alert("Geocode was not successful for the following reason: " + status); 
         } 
        }); 
       }; 
      }); 

      function setAllMap(map) { 
       for (var i = 0; i < markers.length; i++) { 
        markers[i].setMap(map); 
       } 
      } 

      $('#addField').click(function(){  //add input field to bottom of form 
       $('form').append('<div class="panel"><label>Location '+ inputFields +'</label><input id="address'+ inputFields +'" type="text" size="50"><button id="clearField'+ inputFields +'">Clear</button></div>'); 
       inputFields++; 
      }); 

      $('#deleteField').click(function(){  //delete last input field 
       $('.panel').last().remove(); 
       inputFields--; 
      }); 

     }; 



     </script>

来源

2013-07-28 user2626924

你应该发布你如何尝试创建Autocomplete（目前还不清楚你尝试实现哪种自动完成.... google.maps.places，jquery-ui？）当你尝试使用google.maps .places.Autocomplete目前会因代码失败，因为您忘记了加载场所库，但是当加载场所库并且自动完成已经按照预期应用于3输入的meworks代码时（它也会没有自动完成） –

感谢您对Dr.Molle的评论，我能够弄明白。我包括了地方图书馆（我在发布之前必须意外删除），并从地点自动填充示例页面中删除了我包括的内容：[link]（https://developers.google.com/maps/documentation/javascript/例子/地方-自动完成）。感谢您的快速回复！ – user2626924

我的第一个问题是在API参考中包含位置库。随后，我只是需要从谷歌的地方自动填充示例页面两行代码，而不是他们所提供的整个脚本：在我的for循环的问题解决了

var input = /** @type {HTMLInputElement} */(document.getElementById('searchTextField')); 
var autocomplete = new google.maps.places.Autocomplete(input);

这两条线。再次感谢莫尔博士的评论让我重新思考我需要的代码。

来源

2013-07-28 15:46:22 user2626924

自动完成生成多个标记

回答

相关问题