0

我有一段时间试图让一个基本的谷歌地图出现。我已经在 Stack Overflow 上待了几个小时，但到目前为止还没有取得任何成功。我得到的最接近的是地图加载了 1/4 的正方形，左上角的四分之一。但是，如果您尝试拖动、缩放等，它就会像地图的其余部分一样变成灰色。在某些情况下，使用相同的代码，地图将完全加载，但仅在很长一段时间后（不确定具体多长时间，但 > 5 分钟）。

在我的模板中，我有

    <div id="map" style="width: 500px; height: 400px;"></div>

然后在我的主干视图中

  $.getScript('http://maps.google.com/maps/api/js?sensor=false&callback=gMapsCallback')                
  window.gMapsCallback = function(){                                         
           var myLatlng = new google.maps.LatLng(-34.397, 150.644);
           var mapOptions = {
                zoom: 8,
                center: myLatlng,
                mapTypeId: google.maps.MapTypeId.ROADMAP
           };
           var map = new google.maps.Map(document.getElementById("map"),
                mapOptions);                       
  }

任何想法可能会发生什么？我也愿意接受任何关于将谷歌地图加载到主干视图中的更好方法的建议。

4

1 回答 1

1

好的，原来有很多问题，包括在 Bootstrap 选项卡中嵌入地图，不包括回调，定义 div 高度和宽度，设置加载地图的小延迟，以及为地图设置 css 属性。哎。我的最终解决方案是：

在模板中

<script src='http://maps.google.com/maps/api/js?sensor=false&callback=gMapsCallback'></script>
<div id="map" style="width: 500px; height: 400px;"></div>

在样式表中

#map img {
  max-width: none;
}
#map label { 
  width: auto; display:inline; 
}

在主干视图中

setTimeout(function(){
                var myLatlng = new google.maps.LatLng(53.1, -2.44); 
                var mapOptions = {
                    zoom: 8,
                    center: myLatlng,
                    mapTypeId: google.maps.MapTypeId.ROADMAP
                };
                var map = new google.maps.Map(document.getElementById("map"),
                    mapOptions);   
                // Create marker 
                var marker = new google.maps.Marker({
                    map: map,
                    position: new google.maps.LatLng(53.1, -2.44),
                    title: 'The armpit of Cheshire'
                });

                // Add circle overlay and bind to marker
                var circle = new google.maps.Circle({
                    map: map,
                    radius: 10000,    // metres
                    fillColor: '#AA0000'
                });
                circle.bindTo('center', marker, 'position');
                google.maps.event.trigger(map, "resize");
                map.setZoom( map.getZoom() );
            }, 100);

痛苦。请注意，当我调用 gmaps 脚本时，我必须包含回调，即使我从未使用过它。没有它，它就不能完全发挥作用。不知道为什么。

于 2013-02-20T18:46:23.060 回答