Блог

Я хочу заполнить выпадающий список данными из массива. Приведенный ниже код — это то, что я бы сделал, если бы работал с AngularJS. Я хочу знать, есть ли способ сделать это в javascript или каким-то образом разрешить ng-options работать здесь.

   var myLatlng = new google.maps.LatLng(-25.363882,131.044922);
  var mapOptions = {
    zoom: 4,
    center: myLatlng
  };

  var map = new google.maps.Map(document.getElementById('map-canvas'), mapOptions);

    var city = ["NewYork", "Chicago", "Florida"];

  var contentString = 
      `<div class="dropdown">
   <select>
     <option ng-options="item for item in ${city}">{{item}}</option>
   </select>
</div>`;

  var infowindow = new google.maps.InfoWindow({
      content: contentString
  });

  var marker = new google.maps.Marker({
      position: myLatlng,
      map: map,
      title: 'Uluru (Ayers Rock)',
//    zIndex: Math.round(myLatlng.lat() * -100000) << 5
  });
  google.maps.event.addListener(marker, 'click', function() {
    infowindow.setContent(contentString);
    infowindow.open(map,marker);
  });
  

ДЕМОНСТРАЦИЯ: https://jsfiddle.net/spdmu6we/5 /

Согласно вашему комментарию, вы предпочитаете делать это без и HTML `.

Итак, у вас есть два варианта: 1. Используйте синтаксический анализ строк для создания строки HTML, а затем передайте ее в качестве содержимого 2. Проанализируйте имеющуюся у вас строку в DOM-узле и используйте предоставленный мной код.

Это заменяет материал GMap универсальным кодом. Вы все равно сможете использовать код, связанный с DOM.

Вот решение:

 var city = ["NewYork", "Chicago", "Florida"];
const pre = '<div class="dropdown"><select>';
const post = '</select></div>';
let options = '';
city.forEach(city => {
  let o = `<option value=${city}>${city}</option>`;
  options  = o;
});
content = pre   options   post;

var infowindow = document.createElement('div');
infowindow.innerHTML = content;
infowindow.style.display = 'none'

var marker = document.createElement('button');
marker.innerText = "Click me";

marker.addEventListener('click', () => {
  document.body.appendChild(infowindow);
  infowindow.style.display='block';
});
document.body.appendChild(marker);  

 <div id="map-canvas"></div>  

Два типичных способа создания большого количества элементов в javascript: либо:

1. объедините длинную строку элементов вместе, например "<option>Banana</option><option>Apple</option>" , а затем используйте .innerHTML для родительского select

2. используйте javascript для независимого создания каждого узла like document.createElement("OPTION") и .appendChild it.

Для каждого из них есть последствия для производительности. Но собственный javascript не выполняет такого рода шаблонизации.