douyi4297
2018-03-23 12:00
浏览 23
已采纳

谷歌地图没有加载bootstrap模态

I am working with google map, and i need to show it in the bootstrap modal, but it is not loading in bootstrap modal, here i have added my all script in that, can anyone please help me how can i resolve this issue? I tried to do some googling but it didn't help me to resolve this issue, any help really appreciated

<!-- Modal -->
<div id="mapModal" class="modal fade" role="dialog">
    <div class="modal-dialog modal-lg">

    <!-- Modal content-->
    <div class="modal-content" style="width: auto !important;height: 500px !important;">
        <div class="modal-header">
        <button type="button" class="close" data-dismiss="modal">&times;</button>
        <h4 class="modal-title">Map</h4>
        </div>
        <div class="modal-body">
        <div id="map_canvas"></div>
        </div>
        <div class="modal-footer">
        <button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
        </div>
    </div>

    </div>
</div>

<!--<script src="https://maps.googleapis.com/maps/api/js?v=3&sensor=false"></script>-->

<script type="text/javascript">

    jQuery(document).ready(function () {
    var poly;
    var map;
    initialize();


    jQuery('#mapModal').on('show.bs.modal', function() {
        google.maps.event.trigger(map, "resize");
    }).modal('show');

        //get_map_data();

    //initialize();
        //google.maps.event.addDomListener(window, "load", initialize);
        MVCArrayBinder.prototype = new google.maps.MVCObject();
        MVCArrayBinder.prototype.get = function (key) {
            if (!isNaN(parseInt(key))) {
                return this.array_.getAt(parseInt(key));
            } else {
                this.array_.get(key);
            }
        }
        MVCArrayBinder.prototype.set = function (key, val) {
            if (!isNaN(parseInt(key))) {
                this.array_.setAt(parseInt(key), val);
            } else {
                this.array_.set(key, val);
            }
        }
    });

    function MVCArrayBinder(mvcArray) {
        this.array_ = mvcArray;
    }


    /**
     * Handles click events on a map, and adds a new point to the Polyline.
     * @param {MouseEvent} mouseEvent
     */
    function addLatLng(event) {
        var path = poly.getPath();
        path.push(event.latLng);
        var len = path.getLength();
        var marker = new google.maps.Marker({
            position: event.latLng,
            title: '#' + len,
            map: map,
            draggable: true
        });
        marker.bindTo('position', poly.binder, (len - 1).toString());
    }
    var locations = [
        [-34.028249, 151.157507, 3],
        [-33.80010128657071, 151.28747820854187, 2],
        [-33.950198, 151.259302, 1]
    ];


    function initialize() {
        var polyOptions = {
            strokeColor: '#000000',
            strokeOpacity: 1.0,
            strokeWeight: 3, map: map
        };
        poly = new google.maps.Polygon(polyOptions);
        var bounds = new google.maps.LatLngBounds();
        map = new google.maps.Map(document.getElementById('map_canvas'), {
            center: new google.maps.LatLng(10.9386, -84.888),
            zoom: 10,
            mapTypeId: google.maps.MapTypeId.ROADMAP,
            mapTypeControlOptions: {
                //mapTypeIds: ['satellite', 'nearmap']
                mapTypeIds: ['satellite']
            },
            draggableCursor: 'crosshair'
        });

        poly.binder = new MVCArrayBinder(poly.getPath());
        for (var i = 0; i < locations.length; i++) {
            var evt = {};
            evt.latLng = new google.maps.LatLng(locations[i][0], locations[i][1]);
            bounds.extend(evt.latLng);
            addLatLng(evt);
        }

        poly.setMap(map);
        map.fitBounds(bounds);

        google.maps.event.addListener(map, 'click', function (evt) {

            //initDots(evt.latLng);
            addLatLng(evt);
        });

    }

</script>
<script type="text/javascript">
    /*
     * Use bindTo to allow dynamic drag of markers to refresh poly.
     */



</script> 
<style type="text/css">
    html, body, #map_canvas {
    width: 100%;
    height: 100%;
    margin: 0px;
    padding: 0px
    }
</style>
  • 写回答
  • 关注问题
  • 收藏
  • 邀请回答

1条回答 默认 最新

  • doucheng3811 2018-03-25 17:09
    已采纳

    var poly;
    var map;
    function openModal(){
    
    $('#modal').modal({
            backdrop: 'static',
            keyboard: false
        }).on('shown.bs.modal', function () {
    initialize()
        });
    }
    
    function MVCArrayBinder(mvcArray){
        this.array_ = mvcArray;
      }
      MVCArrayBinder.prototype = new google.maps.MVCObject();
      MVCArrayBinder.prototype.get = function(key) {
        if (!isNaN(parseInt(key))){
          return this.array_.getAt(parseInt(key));
        } else {
          this.array_.get(key);
        }
      }
      MVCArrayBinder.prototype.set = function(key, val) {
        if (!isNaN(parseInt(key))){
          this.array_.setAt(parseInt(key), val);
        } else {
          this.array_.set(key, val);
        }
      }
     
      function addLatLng(event) {
        var path = poly.getPath();
        path.push(event.latLng);
        var len = path.getLength();
        var marker = new google.maps.Marker({
          position: event.latLng,
          title: '#' + len,
          map: map,
          draggable : true
        });
        marker.bindTo('position', poly.binder, (len-1).toString());
      }
    var locations = [
       [-34.028249, 151.157507, 3],
            [-33.80010128657071, 151.28747820854187, 2],
            [-33.950198, 151.259302, 1]
    ];
    
    
    function initialize() {
      var polyOptions = {
          strokeColor: '#000000',
          strokeOpacity: 1.0,
          strokeWeight: 3, map: map
        };
      poly = new google.maps.Polygon(polyOptions);
      var bounds = new google.maps.LatLngBounds();
      map = new google.maps.Map(document.getElementById('map_canvas'), {
        center: new google.maps.LatLng(10.9386, -84.888),
        zoom: 10,
        mapTypeId: google.maps.MapTypeId.ROADMAP
      });
    
      poly.binder = new MVCArrayBinder(poly.getPath());
      for(var i = 0; i < locations.length; i++) {
        var evt = {};
        evt.latLng = new google.maps.LatLng(locations[i][0], locations[i][1]);
        bounds.extend(evt.latLng);
        addLatLng(evt);
      }
    
      poly.setMap(map);
      map.fitBounds(bounds);
    } 
    
        google.maps.event.addDomListener(window, "load", initialize);
    #map {
      height: 800px;
      width: 100%;
    }
    
    #map_canvas {
      min-height: 350px;
      max-width:650px;
    }
    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
      <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
      <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>  
    <script src="https://maps.googleapis.com/maps/api/js?v=3&key=AIzaSyBI9iSbSEo3h0LdqlqRFwnayYApQfmNXuE"></script>
    
    <div class="container">
      <h2>Modal Example</h2>
      <!-- Trigger the modal with a button -->
      <button type="button" class="btn btn-info btn-lg" onclick="openModal()">Open Modal</button>
    
      <!-- Modal -->
      <div class="modal fade" id="modal" role="dialog">
        <div class="modal-dialog">
        
          <!-- Modal content-->
          <div class="modal-content">
            <div class="modal-header">
              <button type="button" class="close" data-dismiss="modal">&times;</button>
              <h4 class="modal-title">Modal Header</h4>
            </div>
            <div class="modal-body">
              <div id="map_canvas"></div>
            </div>
            <div class="modal-footer">
              <button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
            </div>
          </div>
          
        </div>
      </div>
      
    </div>

    Hope this helps you

    </div>
    
    已采纳该答案
    打赏 评论

相关推荐 更多相似问题