如何将 Mapbox 商店定位器列表更改为下拉列表并触发 href link

Question

需要一些关于 Mapbox 原始示例 JS 代码的建议或帮助，如何从这个和平的代码下拉列表而不是列表中制作？

想法是： 将 Mapbox 商店定位器列表更改为下拉列表。任何帮助都会很好，谢谢！

我更改了部分代码，但在下拉菜单中是 link 我需要触发此 href link 以进行地图标记操作，这里我需要一些帮助..

我有这个： (JS)

/**
   * Add a listing for each store to the sidebar.
  **/
  function buildLocationList(data) {
    data.features.forEach(function(store, i){
      /**
       * Create a shortcut for `store.properties`,
       * which will be used several times below.
      **/
      var prop = store.properties;

      /* Add a new listing section to the sidebar. */
      var listings = document.getElementById('listings');
      var listing = listings.appendChild(document.createElement('option'));
      /* Assign a unique `id` to the listing. */
      listing.id = "listing-" + prop.id;
      /* Assign the `item` class to each listing for styling. */
      listing.className = 'item';

      /* Add the link to the individual listing created above. */
      var link = listing.appendChild(document.createElement('a'));
      link.href = '#';
      link.className = 'title';
      link.id = "link-" + prop.id;
      link.innerHTML = prop.text;

      /* Add details to the individual listing. */
      var details = listing.appendChild(document.createElement('span'));
      details.innerHTML = prop.text;
      details.innerHTML = prop.address;

      /**
       * Listen to the element and when it is clicked, do four things:
       * 1. Update the `currentFeature` to the store associated with the clicked link
       * 2. Fly to the point
       * 3. Close all other popups and display popup for clicked store
       * 4. Highlight listing in sidebar (and remove highlight for all other listings)
      **/
      link.addEventListener('click', function(e){
        for (var i=0; i < data.features.length; i++) {
          if (this.id === "link-" + data.features[i].properties.id) {
            var clickedListing = data.features[i];
            flyToStore(clickedListing);
            createPopUp(clickedListing);
          }
        }
        var activeItem = document.getElementsByClassName('active');
        if (activeItem[0]) {
          activeItem[0].classList.remove('active');
        }
        this.parentNode.classList.add('active');
      });
    });
  }

这里是： (html)

<div class='sidebar'>
  <select id='listings' class='listings'></select>
</div>

这是 html 在 js 施展魔法之后：

<div class="sidebar">
  <select id="listings" class="listings">
<option id="listing-0" class="item"><a href="#" class="title" id="link-0">store1</a><span>Address here</span></option>

........ here is more options .......
</div>

选择下拉菜单时需要触发 <a href="#" class="title" id="link-0">store1</a>？！

Answer 1

select 选项中不能有 link。您可以做的是将 link 作为数据属性写入选项。由于示例不适用于 Stack Snippet，这里有一个 Fiddle.

$("select").on("change", function() {
  window.open($(this).find("option:selected").attr("data-link"), '_blank');
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="sidebar">
  <select id="listings" class="listings">
    <option value="0">Select store</option>
    <option id="listing-0" class="item" data-link="https://www.google.com">store1 Address here</option>
    <option id="listing-1" class="item" data-link="https://www.whosebug.com">store2 Address here</option>
  </select>
</div>

Answer 2

这是我想要的最终代码。希望它能帮助别人解决类似的问题 ;;))

部分我自定义的Mapbox JS代码：

/**
   * Add a listing for each store to the sidebar.
  **/
 function buildLocationList(data) {
    data.features.forEach(function(store, i){
      /**
       * Create a shortcut for `store.properties`,
       * which will be used several times below.
      **/
      var prop = store.properties;

      /* Add a new listing section to the sidebar. */
      var listings = document.getElementById('listings');
      var listing = listings.appendChild(document.createElement('span'));
      /* Assign a unique `id` to the listing. */
      listing.id = "listing-" + prop.id;
      /* Assign the `item` class to each listing for styling. */
      listing.className = 'item';

      /* Add the link to the individual listing created above. */
      var link = listings.appendChild(document.createElement('option'));
      link.href = '#';
      link.className = 'title';
      link.id = "link-" + prop.id;
      link.innerHTML = prop.address;

      document.getElementById('listings').addEventListener('change',function(){
            $(this).find('span').attr("data-link");
        });

      /**
       * Listen to the element and when it is clicked, do four things:
       * 1. Update the `currentFeature` to the store associated with the clicked link
       * 2. Fly to the point
       * 3. Close all other popups and display popup for clicked store
       * 4. Highlight listing in sidebar (and remove highlight for all other listings)
      **/
      link.addEventListener('click', function(e){
        for (var i=0; i < data.features.length; i++) {
          if (this.id === "link-" + data.features[i].properties.id) {
            var clickedListing = data.features[i];
            flyToStore(clickedListing);
            createPopUp(clickedListing);
          }
        }
        var activeItem = document.getElementsByClassName('active');
        if (activeItem[0]) {
          activeItem[0].classList.remove('active');
        }
        this.parentNode.classList.add('active');
      });
    });
  }

这里是 HTML 的下拉列表部分：

 <fieldset>
  <select id='listings' class='listings' name="some_txt_here" >
  <option selected>---select your place--</option>
</select>
  <label class="bars-txt" for="city">
    <span data-text="some_txt_here">some_txt_here</span>
  </label>
</fieldset>

如何将 Mapbox 商店定位器列表更改为下拉列表并触发 href link

How to change Mapbox store locator list to the dropdown and trigger href link

javascript

ajax

jquery

mapbox

mapbox-gl