변경 위치가 변경되지 않은지도보기 변경

Question

기본 마커 (연결된 사용자의 주소)와 다른 마커 (배열로 전달 된 주소)가있는지도가 있으며 주소가 배열로 전달 된 선택 입력이 있으며 선택시 옵션 선택한 옵션의 마커에서 맵 변경보기 변경 기본 표시 자의 기본 위치를 변경하지 않고도이 기능을 구현할 수 있습니까?

Answer 1

예, 가능합니다. 선택 입력의 '변경' 이벤트가 발생하면 Google Maps Javascript API Marker을 새로 작성하고 새 마커 변수를 사용하십시오.

아래 샘플 코드에 좀 걸릴 수 있습니다 :

 var map; 
 
     function initMap() { 
 
     var defaultLoc = { "lat" : 37.7749295, "lng" :-122.4194155 }; 
 
     map = new google.maps.Map(document.getElementById('map'), { 
 
      center: defaultLoc, 
 
      zoom: 8 
 
     }); 
 
     var markerDefault = new google.maps.Marker({ 
 
      position : defaultLoc, 
 
      map : map 
 
      
 
     }); 
 
     document.getElementById('menuLoc').addEventListener('change', function(){ 
 
      var that = this; 
 
      var geocoder = new google.maps.Geocoder(); 
 
      geocoder.geocode({   
 
      address: that.value 
 
      }, function(result, status){ 
 
      if (status === 'OK') { 
 
       var newMarker = new google.maps.Marker({ 
 
       position : result[0].geometry.location, 
 
       map: map 
 
       }); 
 
       map.setCenter(result[0].geometry.location); 
 
      }   
 
      }); 
 
     }); 
 
     }

 /* Always set the map height explicitly to define the size of the div 
 
     * element that contains the map. */ 
 
     #map { 
 
     height: 100%; 
 
     } 
 
     /* Optional: Makes the sample page fill the window. */ 
 
     html, body { 
 
     height: 100%; 
 
     margin: 0; 
 
     padding: 0; 
 
     } 
 
     #floating-panel { 
 
     position: absolute; 
 
     top: 10px; 
 
     left: 25%; 
 
     z-index: 5; 
 
     background-color: #FFF; 
 
     padding: 5px; 
 
     border: 1px solid #999; 
 
     text-align: center; 
 
     font-family: 'Roboto','sans-serif'; 
 
     line-height: 30px; 
 
     padding-left: 10px; 
 
     }

<div id="floating-panel"> 
 
     <select id="menuLoc"> 
 
     <option value="fresno, ca, USA">Fresno</option> 
 
     <option value="sacramento, ca, usa">Sacramento</option> 
 
     <option value="carson city">Carson City</option> 
 
    </select> 
 
    </div> 
 
    <div id="map"></div> 
 
    <script src="https://maps.googleapis.com/maps/api/js?key=AIzaSyCzjs-bUR6iIl8yGLr60p6-zbdFtRpuXTQ&callback=initMap" 
 
    async defer></script>

그것을 할 수 및 코딩 행복 희망!