谷歌地图不会居中
Posted
技术标签:
【中文标题】谷歌地图不会居中【英文标题】:Google Maps won't center 【发布时间】:2012-12-05 01:46:44 【问题描述】:我正在使用 Twitter Bootstrap,并以模态方式实现了谷歌地图,它动态地显示了生产者的位置。一切正常,除了标记不会居中。相反,它始终位于左上角(仅在滚动时可见)。
我在这里尝试了很多东西,但无法正常工作。有人可以帮我吗?
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 中),这可能是问题的一部分,无法正常工作。
【问题讨论】:
如果您在map.setCenter(...
上中断,data...
是否包含正确的值?
@ErikPhilips:是的,data.latitude 和 data.longitude 包含“$('#myModal').on('shown'...”中的正确值。但是,如果控制台“map.setCenter ...”之后的.log(data.latitude,或者实际上是什么)什么都没有显示。就像脚本停止在那行运行一样。奇怪。
【参考方案1】:
我认为你混淆了情况:
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);
您的 firebug/chrome 控制台中没有任何问题吗?
【讨论】:
你是对的,在 Chrome 控制台中完全错过了。 “Object #基本上你需要访问Map
对象(强烈建议只重复使用你的LatLng
对象),你可以这样做:
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);
)
);
);
【讨论】:
像魅力一样工作,谢谢!但是,您应该从第二个“var Markerlatlng”中删除“var”,否则它将不起作用。以上是关于谷歌地图不会居中的主要内容,如果未能解决你的问题,请参考以下文章