setCenter（）和setPosition（）不适用于显示在引导模式中的谷歌地图 - 对于聪明用户

Question

我想在引导模式下显示用户在谷歌地图上的位置。 **正在显示地图，但没有将infoWindows和标记放置到所需的位置** infoWindows将粘在地图的左上角，地图也没有正确的中心。

我不知道什么是错用以下代码：

<div class="modal-header"> 
<button type="button" class="close" data-dismiss="modal" aria-hidden="true">×</button> 
<h5 class="modal-title"> 
    <a href="{$system['system_url']}/{$__user['user_name']}"> 
     <img class="data-avatar" src="{$__user['user_picture']}" alt="{$__user['user_fullname']}"> 
    </a> 

</h5> 
</div> 
<div class="modal-body"> 
<button id="startMap" class="hidden js_load-map" latone="{$__user['location_lat']}" lattwo="{$user->_data['location_lat']}" lngone="{$__user['location_long']}" lngtwo="{$user->_data['location_long']}" uone="{$__user['user_fullname']}" utwo="{$user->_data['user_fullname']}"></button> 
<div id="map" style="height:600px;"></div> 

</div> 
{literal} 
<script async defer 
src="https://maps.googleapis.com/maps/api/js?key=AIzaSyBoVJsENlIwPErOfpORfos-ktpIwvzAYw8&callback=initMap"> 
</script> 
<script type="text/javascript"> 

    _this = $("#startMap"); 
    latone = _this.attr('latone'); 
    lattwo = _this.attr('lattwo'); 
    lngone = _this.attr('lngone'); 
    lngtwo = _this.attr('lngtwo'); 
    uone = _this.attr('uone'); 
    utwo = _this.attr('utwo'); 
    var map; 
    var lat1 = latone; 
     var lng1 = lngone; 
     var pos1 = new google.maps.LatLng(lat1,lng1); 
    var lat2 = lattwo; 
     var lng2 = lngtwo; 
     // alert(lat2+' and '+lng2); 
     var pos2 = new google.maps.LatLng(lat2,lng2); 



function initMap() { 

     map = new google.maps.Map(document.getElementById('map'), { 
     center: {lat: -34.397, lng: 150.644}, 
     zoom: 150, 
     panControl:true, 
     zoomControl:true, 
     mapTypeControl:true, 
     scaleControl:true, 
     streetViewControl:true, 
     overviewMapControl:true, 
     rotateControl:true, 
     mapTypeId:google.maps.MapTypeId.HYBRID 
    }); 
    var infoWindow1 = new google.maps.InfoWindow({map: map}); 
    var infoWindow2 = new google.maps.InfoWindow({map: map}); 





     infoWindow1.setPosition(pos1); 
      infoWindow1.setContent(uone); 

      infoWindow2.setPosition(pos2); 
      infoWindow2.setContent(utwo); 



      // var marker1=new google.maps.Marker({ 

      // position:pos1, 
      // // icon:'1.jpg', 
      // animation:google.maps.Animation.BOUNCE 
      // }); 

      // marker1.setMap(map); 

      // var marker2=new google.maps.Marker({ 

      // position:pos2, 
      // // icon:'2.jpg', 
      // animation:google.maps.Animation.BOUNCE 
      // }); 

      // marker2.setMap(map); 



    } 
    $('#modal').on('shown.bs.modal', function() { 
      google.maps.event.trigger(map, 'resize'); 

      map.setCenter(pos1); 
     }); 

</script> 
{/literal} 

我也跟着很多类似的情况，比如：

• Load google map dynamicly in twitter bootstrap modal
• Bootstrap modal inside google map is not working

遵循这些教程让我的广告d以下代码：

$（ '＃模态'）上（ 'shown.bs.modal'，函数（）{

google.maps.event.trigger（地图，“调整大小“）;

map.setCenter（pos1）;

}）;

但它并没有仍然为我工作。

请您帮助..

Answer 1

这是演示用于显示模式开放和初始化谷歌地图map.setCenter(latlng);

注意这是不是在上面的确切的代码，但它显示的功能

Fiddle

var geocoder; 

var map; 

function initialize() { 

    geocoder = new google.maps.Geocoder(); 

    var address = "new delhi"; 

    geocoder.geocode({ 
    'address': address 
    }, function(results, status) { 

    if (status == google.maps.GeocoderStatus.OK) { 

     var latitude = results[0].geometry.location.lat(); 

     var longitude = results[0].geometry.location.lng(); 
     var latlng = new google.maps.LatLng(latitude, longitude); 

     var mapOptions = { 

     zoom: 8, 

     center: latlng, 

     mapTypeId: google.maps.MapTypeId.ROADMAP 

     } 

     map = new google.maps.Map(document.getElementById('map-canvas'), mapOptions); 

     var latlng = new google.maps.LatLng(latitude, longitude); 
     map.setCenter(latlng); //setCenter 

     var marker = new google.maps.Marker({ 

     map: map, 

     position: latlng, 
     title: 'Hello World!' 

     }); 
     marker.setPosition(latlng); //setPosition 
    } 

    }); 
} 
//google.maps.event.addDomListener(window, 'load', initialize); 
$('#myModal').on('shown.bs.modal', function() { 
    initialize(); 
});