谷歌地图自动完成动态数组

Posted 2023-02-21

【中文标题】谷歌地图自动完成动态数组

【英文标题】：google maps autocomplete with dynamic arrays

【发布时间】：2017-03-15 06:30:00

【问题描述】：

所以我有动态文本输入，我需要它来访问谷歌地图（地点）自动完成 api。

“开始”、“结束”和第一个“航路点”（非动态）运行良好，但 4 小时后，我仍在努力让动态文本输入自动完成。并且在谷歌上找不到任何类似答案的东西。

这是我目前所拥有的： javascript：

 function initialize() 
 var options = 
    componentRestrictions: 
        country: "au"
    
;

var inputs = document.getElementById('start');
var autocompletes = new google.maps.places.Autocomplete(inputs, options);
var inpute = document.getElementById('end');
var autocompletee = new google.maps.places.Autocomplete(inpute, options);

var waypoints = document.getElementsByName("waypoints[]");
for (var i = 0; i < waypoints.length; i++) 
var inputw = waypoints[i];
var autocompletew = new google.maps.places.Autocomplete(inputw, options);



directionsDisplay = new google.maps.DirectionsRenderer();
var melbourne = new google.maps.LatLng(-31.953512, 115.857048);
var myOptions = 
    zoom: 12,
    mapTypeId: google.maps.MapTypeId.ROADMAP,
    center: melbourne


map = new google.maps.Map(document.getElementById("map_canvas"), myOptions);
directionsDisplay.setMap(map);

html：

var counter = 1;
var limit = 10;
var i = 1;
function addInput(divName)
 if (counter == limit)  
      alert("You have reached the limit of adding " + counter + " inputs");
 
 else 
      var newdiv = document.createElement('div');
      newdiv.innerHTML = (counter + 1) + "<input type=text name=waypoints[] autocomplete=on>";
      document.getElementById(divName).appendChild(newdiv);
      counter++;
i++;
var inputw = waypoints[i];
var autocompletew = new google.maps.places.Autocomplete(inputw, options);

     

【问题讨论】：

相关问题：Why only the marker of the last input appears in Google Places Autocomplete?

相关问题：Google Api not working on appended input

【参考方案1】：

动态创建内容，然后使用对我有用的引用：

function addInput(divName) 
  if (counter == limit) 
    alert("You have reached the limit of adding " + counter + " inputs");
   else 
    var newbr = document.createElement('br');
    var newtxt = document.createTextNode(""+(counter+1));
    var newinput = document.createElement("input");
    newinput.setAttribute("name","waypoints[]");
    newinput.setAttribute("autocompute","on");
    newinput.setAttribute("type", "text");
    document.getElementById(divName).appendChild(newbr);
    document.getElementById(divName).appendChild(newtxt);
    document.getElementById(divName).appendChild(newinput);
    counter++;
    i++;
    var autocompletew = new google.maps.places.Autocomplete(newinput, ACoptions);

proof of concept fiddle

代码 sn-p：

var counter = 1;
var limit = 10;
var i = 0;
var ACoptions = 
  componentRestrictions: 
    country: "au"
  
;

function initialize() 


  var inputs = document.getElementById('start');
  var autocompletes = new google.maps.places.Autocomplete(inputs, ACoptions);
  var inpute = document.getElementById('end');
  var autocompletee = new google.maps.places.Autocomplete(inpute, ACoptions);

  var waypoints = document.getElementsByName("waypoints[]");
  for (var i = 0; i < waypoints.length; i++) 
    var inputw = waypoints[i];
    var autocompletew = new google.maps.places.Autocomplete(inputw, ACoptions);
  

  directionsDisplay = new google.maps.DirectionsRenderer();
  directionsService = new google.maps.DirectionsService();
  var melbourne = new google.maps.LatLng(-31.953512, 115.857048);
  var myOptions = 
    zoom: 12,
    mapTypeId: google.maps.MapTypeId.ROADMAP,
    center: melbourne
  

  map = new google.maps.Map(document.getElementById("map_canvas"), myOptions);
  directionsDisplay.setMap(map);
  google.maps.event.addDomListener(document.getElementById('getdir'), 'click', function() 
    calculateAndDisplayRoute(directionsService, directionsDisplay);
  );

google.maps.event.addDomListener(window, "load", initialize);

function addInput(divName) 
  if (counter == limit) 
    alert("You have reached the limit of adding " + counter + " inputs");
   else 
    var newbr = document.createElement('br');
    var newtxt = document.createTextNode("" + (counter + 1));
    var newinput = document.createElement("input");
    newinput.setAttribute("name", "waypoints[]");
    newinput.setAttribute("autocompute", "on");
    newinput.setAttribute("type", "text");

    // newin = (counter + 1) + "<input type=text name=waypoints[] autocomplete=on>";
    document.getElementById(divName).appendChild(newbr);
    document.getElementById(divName).appendChild(newtxt);
    document.getElementById(divName).appendChild(newinput);
    counter++;
    i++;
    console.log("cntr=" + counter + " i=" + i + " waypoints[].length=" + document.getElementsByName("waypoints[]"));
    // var inputw = waypoints[i];
    var autocompletew = new google.maps.places.Autocomplete(newinput, ACoptions);

  


function calculateAndDisplayRoute(directionsService, directionsDisplay) 
  var waypts = [];
  var checkboxArray = document.getElementById('dynamicInput');
  var waypointElmts = document.getElementsByName('waypoints[]');
  for (var i = 0; i < waypointElmts.length; i++) 
    if (waypointElmts[i].value.length > 0) 
      waypts.push(
        location: waypointElmts[i].value,
        stopover: true
      );
    
  
  directionsService.route(
    origin: document.getElementById('start').value,
    destination: document.getElementById('end').value,
    waypoints: waypts,
    optimizeWaypoints: true,
    travelMode: 'DRIVING'
  , function(response, status) 
    if (status === 'OK') 
      directionsDisplay.setDirections(response);
     else 
      window.alert('Directions request failed due to ' + status);
    
  );

html,
body,
#map_canvas 
  height: 100%;
  width: 100%;
  margin: 0px;
  padding: 0px

<script src="https://maps.googleapis.com/maps/api/js?libraries=places&key=AIzaSyCkUOdZ5y7hMm0yrcCQoCvLwzdM6M8s5qk">
</script>
<input id="start" value="Margaret River, AU" />
<input id="end" value="Perth, AU" />
<div id="dynamicInput">
  <br>1
  <input type="text" name="waypoints[]" autocomplete="on">
</div>
<input type="button" value="Another Delivery" onClick="addInput('dynamicInput');">
<input id="getdir" type="button" value="get route" />
<div id="map_canvas"></div>