Google Maps可拖动标记在折叠类引导程序中不起作用

Question

我想将Google Maps的可拖动标记放在折叠类引导程序中，但是它不起作用。 如果我将地图放在折叠类之外，那么一切都工作正常，那么当我将地图放在折叠类中时，就会出现问题。

这是HTML代码：

<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>

这是JavaScript：

<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>

我有什么想念的吗？ 我究竟做错了什么？ 谢谢。

Answer 1

我在#map的ID #map不到您的CSS，但是如果未将其设置为特定高度（即400px ），那么当您折叠div时，它实际上不会显示。

因此，最快的解决方案是将地图的高度设置为固定值。

然后，无论您是否具有可拖动的标记，地图都会在合拢时加载。

这是一个示例：（如果需要，还有一个jsbin链接）

 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>

希望有帮助！

Google Maps可拖动标记在折叠类引导程序中不起作用

问题描述

1 个解决方案

解决方案1
1 2017-12-07 04:35:51

Google Maps可拖动标记在折叠类引导程序中不起作用

问题描述

1 个解决方案

解决方案1 1 2017-12-07 04:35:51

解决方案1
1 2017-12-07 04:35:51