谷歌地图不会居中

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 # has no method 'setCenter'”,当然是指“map”。我能做些什么呢?【参考方案2】:

基本上你需要访问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”,否则它将不起作用。

以上是关于谷歌地图不会居中的主要内容,如果未能解决你的问题,请参考以下文章

谷歌地图 KML 图层初始缩放和居中

根据用户的地理位置居中谷歌地图

Sencha Touch - 谷歌地图和居中标记

谷歌地图:如何防止 InfoWindow 移动地图

颤振谷歌地图图像标记不会出现在中心

谷歌地图标记不会显示(jQuery)