谷歌地圖api V3，setPosition/setCenter不工作

Question

有兩個地方我需要顯示谷歌地圖。 我對兩個地圖使用相同的代碼（我的意思是我對這兩個地圖重複使用相同的代碼）。 下面是可以找到這兩張地圖的截圖的鏈接。

https://drive.google.com/file/d/0B2JnvvXsAALUdlVzemRVMzNMajF4OFB1V0JXc0RuN1p4eWFV/view - MAP1

https://drive.google.com/file/d/0B2JnvvXsAALUVGRhNm1HSldhQnpZT3k4S2I2R1YyQkp4OWZz/view - MAP2

我展示在bootstarp模態

第一映射（MAP1）工作正常第二映射（MAP2）。但在第二張地圖（地圖2）中，雖然我使用了setCenter方法，但標記並未顯示在地圖的中心（而是顯示在左上角）。 我該如何將標記放置在地圖中心（第二張地圖）？

下面是我的代碼..

initialize: function(options){ 
 
    //initializing the geocoder 
 
    this.geocoder = new google.maps.Geocoder(); 
 
    
 
    this.map; \t \t \t \t 
 
}, 
 

 
//on show of the view 
 
//onShow is a marionette method, which will be triggered when view is shown 
 
onShow: function(){ 
 
    var address = this.model.get("address"); 
 
    //render the map with dummy latLang 
 
    this.renderMap(); 
 
    
 
    //render the Map with Proper address 
 
    if(address!== ""){ 
 
    this.renderMapWithProperAddress(address); 
 
    } 
 
}, 
 
    
 
renderMap: function(){ 
 
    var mapCanvas = document.getElementById("mapCanvas"), self = this, 
 
    
 
    mapOptions = { 
 
    center: new google.maps.LatLng(64.855, -147.833),//dummy latLang 
 
    zoom: 15, 
 
    mapTypeId: google.maps.MapTypeId.ROADMAP, 
 
    zoomControl: false, 
 
    mapTypeControl: false, 
 
    streetViewControl:false 
 
    }; 
 
    
 
    //initializing google map 
 
    self.map = new google.maps.Map(mapCanvas, mapOptions); 
 
    
 
    $("#myModal").on("shown.bs.modal",function(){ 
 
    google.maps.event.trigger(self.map, "resize"); 
 
    }); 
 
}, 
 
    
 
    
 
renderMapWithProperAddress: function(address){ 
 
    var self = this,marker; 
 
    
 
    self.geocoder.geocode({ "address": address}, function(results, status) { 
 
\t if (status == google.maps.GeocoderStatus.OK) { 
 
\t \t 
 
     self.map.setCenter(results[0].geometry.location); 
 
     
 
     marker = new google.maps.Marker({ 
 
      map: self.map, 
 
      position: results[0].geometry.location, 
 
      title: address 
 
     }); 
 
\t \t \t \t  
 
    } else { 
 
\t \t \t \t   
 
     alert("Geocode was not successful for the following reason: " + status); 
 
\t \t \t \t  
 
    } 
 
\t 
 
    }); 
 
}

Answer 1

我的猜測，沒有看到你的代碼，是你需要觸發引導模式已被證明後的地圖調整事件。

Bootstrap modal

Maps events

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

編輯：

這是一個完整的工作示例。根據我的評論，你應該1）觸發一個地圖調整大小和2）將地圖中心設置爲你的標記座標。

var center = new google.maps.LatLng(59.76522, 18.35002); 

function initialize() { 

    var mapOptions = { 
     zoom: 7, 
     mapTypeId: google.maps.MapTypeId.ROADMAP, 
     center: center 
    }; 

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

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

$('.launch-map').on('click', function() { 

    $('#modal').modal({ 
     backdrop: 'static', 
     keyboard: false 
    }).on('shown.bs.modal', function() { 
     google.maps.event.trigger(map, 'resize'); 
     map.setCenter(center); 
    }); 
}); 

initialize(); 

JSFiddle demo