表格選擇將地址轉換爲Google地圖

Question

我正在使用此代碼的谷歌地圖，在這個例子中的地圖顯示3個引腳，它工作正常。

<script> 
function loadGmapAPI() 
{ 
    var script = document.createElement("script"); 
    script.src = "https://maps.googleapis.com/maps/api/js?key=[[API HERE]]&callback=initMap"; 
    script.type = "text/javascript"; 
    document.getElementsByTagName("head")[0].appendChild(script); 
} 

function initMap() { 
    var pinone = { 
     info: '<p>html here</p>`]]', 
     lat: 10.000, 
     long: -10.000 
    }; 
    var pintwo = { 
     info: '<p>html here</p>`]]', 
     lat: 20.000, 
     long: -20.000 
    }; 
    var pinthree = { 
     info: '<p>html here</p>`]]', 
     lat: 30.000, 
     long: -30.000 
    }; 
    var locations = [ 
     [pinone.info, 10.000.lat, -10.000.long], 
     [pintwo.info, 20.000.lat, -20.000.long], 
     [pinthree.info, 30.000.lat, -30.000.long], 
    ]; 
    var map = new google.maps.Map(document.getElementById('map'), { 
     zoom: 15, 
     center: new google.maps.LatLng(5.000,-5.000), 
     mapTypeId: google.maps.MapTypeId.ROADMAP 
    }); 
    var infowindow = new google.maps.InfoWindow({}); 
    var marker, i; 
    for (i = 0; i < locations.length; i++) { 
     marker = new google.maps.Marker({ 
      position: new google.maps.LatLng(locations[i][1], locations[i][2]), 
      map: map 
     }); 
     google.maps.event.addListener(marker, 'click', (function (marker, i) { 
      return function() { 
       infowindow.setContent(locations[i][0]); 
       infowindow.open(map, marker); 
       smoothScroll(); 
      } 
     })(marker, i)); 
    } 
} 

一旦地圖被加載，我需要顯示只有兩個在一個形式使用選擇輸入引腳：

<form id="form"> 

    <select id="selectFrom"> 
     <option value=""></option> 
     <option value="pinone" data-lat="10.000" data-long="-10.000">Pin One</option> 
     <option value="pintwo" data-lat="20.000" data-long="-20.000">Pin Two</option> 
     <option value="pinthree" data-lat="30.000" data-long="-30.000">Pin Three</option> 
    <select> 

    <select id="selectTo"> 
     <option value=""></option> 
     <option value="pinone" data-lat="10.000" data-long="-10.000">Pin One</option> 
     <option value="pintwo" data-lat="20.000" data-long="-20.000">Pin Two</option> 
     <option value="pinthree" data-lat="30.000" data-long="-30.000">Pin Three</option> 
    <select> 

</form> 

數據-LAT和數據長都只是可選的我不知道是否真的有必要。

什麼是最好的辦法呢？

Answer 1

請嘗試以下步驟：

• ，將標記visible屬性設置爲false，所以他們開始隱藏：

  var marker = new google.maps.Marker({ 
      position: new google.maps.LatLng(locations[i][1], locations[i][2]), 
      map: map, 
      visible: false // <- add this 
  }); 
  

• 添加您的標記到一個數組，以備將來參考：

  <script> 
  var markers = []; // <- add this at the beggining or anywhere outside any scope 
  ... 
  var marker = new google.maps.Marker({ ... }); 
  
  markers.push(marker); 
  

  正在markers一個全局變量（在文檔中的任何函數之外聲明它）。

• 更改事件添加到select元素：

  $("#form").on("change", "select", function() { 
      var indexFrom = $('#selectFrom').get(0).selectedIndex - 1, 
       indexTo = $('#selectTo').get(0).selectedIndex - 1; 
  
      // Hide all 
      markers.forEach(x => x.setVisible(false)); 
  
      // Show marker 'From' 
      if (indexFrom >= -1) { 
       markers[indexFrom].setVisible(true); 
      } 
  
      // Show marker 'To' 
      if (indexTo >= -1) { 
       markers[indexTo].setVisible(true); 
      } 
  }); 
  

setVisible() in Map's API docs。

我無法測試它，從我的頭頂做起。如果您有任何問題，請告訴我。