谷歌地圖不會中心

我使用的是Twitter Bootstrap，並在一個模式中實現了Google地圖，該模式動態地顯示了製作人的位置。一切工作正常，除了標記不居中的事實。相反，它總是位於左上角（僅在滾動時纔可見）。谷歌地圖不會中心

我已經在這裏嘗試了很多東西，但不能得到它的工作。有人可以幫我在這裏嗎？

HTML：

<div id="myModal" class="modal hide fade" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true"> 
    <div class="modal-header"> 
     <button type="button" class="close" data-dismiss="modal" aria-hidden="true">×</button> 
     <h3 id="myModalLabel">Test</h3> 
    </div> 
    <div id="modal-left" class="modal-body left"> 
    </div> 
    <div class="modal-body right"> 
     <div id="map"></div> 
    </div> 
    </div> 
</div> 
<div class="row span12"> 
    <div id="allProducers"></div> 
</div>

相關CSS：

#map { 
    height: 300px; 
    width: 300px; 
} 

.hide { 
    display: none; 
}

JS：

function largeMap(latitude, longitude){ 
    var Latlng = new google.maps.LatLng(latitude, longitude); 

    var Options = { 
     zoom: 10, 
     center: Latlng, 
     mapTypeId: google.maps.MapTypeId.ROADMAP 
    }; 

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

    var Marker = new google.maps.Marker({ 
     position: Latlng, 
     map:Map, 
     title:"The Map" 
    }); 

    Marker.setMap(Map); 
} 

$('.modal-btn').click(function(){ 

    var producerId = $(this).attr('id'); 

    GetProducer(producerId, function(data) { 
     var titel = data.name; 

     $('#myModalLabel').html(titel); 

     $('#myModal').on('shown', function() { 
      google.maps.event.trigger(map, 'resize'); 
      map.setCenter(new google.maps.LatLng(data.longitude, data.latitude)); 
     }) 
    }); 
});

注：我很想創建一個jsFiddle，但是因爲我使用的是模式（包含在Twitter Bootstrap中），這可能是問題的一部分，無法工作。

來源

2012-12-17 holyredbeard

...'不'data ...'包含正確的值嗎？ –

@ErikPhilips：是的，data.latitude和data.longitude在「$（'＃myModal'）。on（'shown'...」）中包含正確的值。但是，如果console.log（data.latitude，或者其他什麼）在「map.setCenter ...」之後沒有顯示出來，就像腳本停止在那條線上運行一樣，奇怪的是 – holyredbeard

基本上你需要訪問Map對象（極力推薦只是重用你的LatLng對象），你可以做這樣的：如果你在`map.setCenter（打破

var Map; 
var Markerlatlng 

function largeMap(latitude, longitude){ 
    Markerlatlng= new google.maps.LatLng(latitude, longitude); 

    var Options = { 
    zoom: 10, 
    center: Markerlatlng, 
    mapTypeId: google.maps.MapTypeId.ROADMAP 
    }; 

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

    var Marker = new google.maps.Marker({ 
    position: Markerlatlng, 
    map:Map, 
    title:"The Map" 
    }); 

    Marker.setMap(Map); 
} 



$('.modal-btn').click(function(){ 

    var producerId = $(this).attr('id'); 

    GetProducer(producerId, function(data) { 
    var titel = data.name; 

    $('#myModalLabel').html(titel); 

    $('#myModal').on('shown', function() { 
     google.maps.event.trigger(Map, 'resize'); 
     Map.setCenter(Markerlatlng); 
    }) 
    }); 
});

來源

2012-12-17 22:36:20

工程就像一個魅力，謝謝！但是，您應該從第二個「var Markerlatlng」中刪除「var」，否則它將不起作用。 – holyredbeard

我覺得你混合情況：

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

和

map.setCenter(new google.maps.LatLng(data.longitude, data.latitude));

試試這個

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

不是有你的螢火/鉻控制檯的任何問題？

來源

2012-12-17 22:26:18 steffen

你是對的，完全是問題錯過了Chrome控制檯。「Object＃沒有方法'setCenter'「，這當然是指」地圖「。我能做些什麼呢？ – holyredbeard

谷歌地圖不會中心

回答

相關問題