Google지도 draggable 마커가 축소 클래스 부트 스트랩에서 작동하지 않습니다.

붕괴 클래스 부트 스트랩 내에 Google지도 드래그 가능 마커를 넣고 싶지만 작동하지 않습니다. 지도를 붕괴 클래스 밖에서 모든 것이 잘 작동한다면,지도를 붕괴 클래스 안에 넣으면 문제가 발생합니다.Google지도 draggable 마커가 축소 클래스 부트 스트랩에서 작동하지 않습니다.

<div class="col-lg-12" > 
    <div class="panel-group" id="accordion"> 
     <div class="panel panel-default"> 
      <div class="panel-heading"> 
       <h4 class="panel-title"> 
        <a data-toggle="collapse" data-parent="#accordion" href="#collapseThree"> Input Map?</a> 
       </h4> 
      </div> 
      <div id="collapseThree" class="panel-collapse collapse"> 
       <div class="panel-body"> 
        <!--map start--> 
        <div class="col-lg-8" > 
         <div class="form-group"> 
          <label>Map</label> 
          <div id="map" class="col-lg-8 tambah-map-canvas"></div> 
         </div> 
        </div> 
        <div class="col-lg-4"> 
         <label>Coordinat</label><br/> 
        </div> 
        <div class="col-lg-4"> 
         <div class="form-group"> 
          <label>Latitude</label> 
          <input type="text" name="lat" id="lat" class="form-control"> 
         </div> 
        </div> 
        <div class="col-lg-4"> 
         <div class="form-group"> 
          <label>Longitude</label> 
          <input type="text" name="lng" id="lng" class="form-control"> 
         </div> 
        </div> 
        <div class="col-lg-4"> 
         <div class="form-group"> 
          <input type="button" id="reset" value="Reset Location"> 
          <br/><br/> 
         </div> 
        </div> 
        <!--map end--> 
       </div> 
      </div> 
     </div> 
    </div> 
</div>

이 자바 스크립트입니다 : 내가 그리워 아무것도

<script type="text/javascript"> 

    function updateMarkerPosition(latLng) { 
     document.getElementById('lat').value = [latLng.lat()]; 
     document.getElementById('lng').value = [latLng.lng()]; 
    } 

    var myOptions = { 
     zoom: 7, 
    scaleControl: true, 
     center: new google.maps.LatLng(-6.175500045712664,106.8272084918824), 
     mapTypeId: google.maps.MapTypeId.ROADMAP 
    }; 

    var map = new google.maps.Map(document.getElementById("map"), 
    myOptions); 

    var marker1 = new google.maps.Marker({ 
    position : new google.maps.LatLng(-6.175500045712664,106.8272084918824), 
    title : 'lokasi', 
    map : map, 
    draggable : true 
    }); 

    //updateMarkerPosition(latLng); 

    google.maps.event.addListener(marker1, 'drag', function() { 
     updateMarkerPosition(marker1.getPosition()); 
    }); 
</script> 

<script type="text/javascript"> 
    document.getElementById('reset').onclick= function() { 
     var field1= document.getElementById('lng'); 
     var field2= document.getElementById('lat'); 
     field1.value= field1.defaultValue; 
     field2.value= field2.defaultValue; 
    }; 
</script>

있습니까

이는 HTML 코드? 내가 도대체 뭘 잘못하고있는 겁니까? 감사합니다. .

출처

2017-12-04 ytomo

더 나은 분석을 위해 JSFiddle을 만듭니다. – FBlade

ID가 #map 인 CSS가 표시되지 않지만 특정 높이 (예 : 400px)로 설정되지 않은 경우 div를 축소하면 실제로 표시되지 않습니다.

따라서 가장 빠른 해결책은지도의 높이를 고정 된 값으로 설정하는 것입니다.

마커를 드래그 할 수 있는지 여부에 관계없이 맵은 접을 때로드됩니다.

여기 예제입니다 : (또한, 필요한 경우 jsbin link)하는 데 도움이

var map; 
 
var center = { 
 
    lat: -34.397, 
 
    lng: 150.644 
 
}; 
 

 
function initMap() { 
 
    map = new google.maps.Map(document.getElementById('map'), { 
 
    center: center, 
 
    zoom: 8 
 
    }); 
 

 
    var marker = new google.maps.Marker({ 
 
    position: center, 
 
    map: map, 
 
    draggable: true 
 
    }); 
 
}

#map { 
 
    height: 400px; /* Set this to something fixed */ 
 
} 
 

 
/* Optional: Makes the sample page fill the window. */ 
 

 
html, 
 
body { 
 
    height: 100%; 
 
    margin: 0; 
 
    padding: 0; 
 
}

<!DOCTYPE html> 
 
<html> 
 

 
<head> 
 
    <title>Simple Map</title> 
 
    <meta name="viewport" content="initial-scale=1.0"> 
 
    <meta charset="utf-8"> 
 
</head> 
 

 
<body> 
 
    <div id="exampleAccordion" data-children=".item"> 
 
    <div class="item"> 
 
     <a data-toggle="collapse" data-parent="#exampleAccordion" href="#exampleAccordion1" aria-expanded="true" aria-controls="exampleAccordion1"> 
 
     Click to toggle the map 
 
    </a> 
 
     <div id="exampleAccordion1" class="collapse show" role="tabpanel"> 
 
     <div id="map"></div> 
 
     </div> 
 
    </div> 
 
    </div> 
 
    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-beta.2/css/bootstrap.min.css" integrity="sha384-PsH8R72JQ3SOdhVi3uxftmaW6Vc51MKb0q5P2rRUpPvrszuE4W1povHYgTpBfshb" crossorigin="anonymous"> 
 
    <script src="https://maps.googleapis.com/maps/api/js?key=AIzaSyCD0rWgXRVBa7PgaTWXVp_gU51pgHGviYY&callback=initMap" async defer></script> 
 
    <script src="https://code.jquery.com/jquery-3.2.1.slim.min.js" integrity="sha384-KJ3o2DKtIkvYIK3UENzmM7KCkRr/rE9/Qpg6aAZGJwFDMVNA/GpGFF93hXpG5KkN" crossorigin="anonymous"></script> 
 
    <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.12.3/umd/popper.min.js" integrity="sha384-vFJXuSJphROIrBnz7yo7oB41mKfc8JzQZiCq4NCceLEaO4IHwicKwpJf9c9IpFgh" crossorigin="anonymous"></script> 
 
    <script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-beta.2/js/bootstrap.min.js" integrity="sha384-alpBpkh1PFOepccYVYDB4do5UnbKysX5WZXm3XxPqe5iKTfUKjNkCk9SaVuEZflJ" crossorigin="anonymous"></script> 
 
</body> 
 

 
</html>

희망!

출처

2017-12-07 04:35:51 henrisycip

Google지도 draggable 마커가 축소 클래스 부트 스트랩에서 작동하지 않습니다.

답변

관련 문제