谷歌地图自动完成与动态数组 [英] google maps autocomplete with dynamic arrays

问题描述

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

开始，结束和第1 航点（不是动态的）运作良好，但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，$ b $ center：melbourne 
} 
 
 map = new google.maps.Map（document.getElementById（map_canvas），myOptions）; 
 directionsDisplay.setMap（map）; 
 
 $ b  

HTML：

  var counter = 1; 
 var limit = 10; 
 var i = 1; 
函数addInput（divName）{
 if（counter == limit）{
 alert（您已达到添加+ counter +输入的限制）; 
} 
 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）; 
 
 
 
 
 
 
我非常精通PHP，我仍然非常喜欢学习Javascript。
     动态创建内容，然后使用对我有用的参考：
  function addInput（divName）{
 if（counter == limit）{
 alert（You've reached the添加+计数器+输入的限制））; 
} 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）; 
} 
  
 概念证明小提琴 
 
 
 
 代码段： 
 
 
 
 
 
  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  

html，body，＃map_canvas {height：100％;宽度：100％; margin：0px; < script src =https：//

So I have dynamic text inputs which i require to give it access to google maps (places) autocomplete api.

The "start", "end" and 1st "waypoint"(not dynamic) works well, but after 4 hours, i am still struggling to get my dynamic text inputs to autocomplete. And can not find anything resembling the answer on google.

This is what i have so far: 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);

     }
}

I am pretty proficient with PHP but am still very much learning Javascript.

解决方案

Dynamically creating the content, then using the reference to that works for me:

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

code snippet:

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"></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>

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