相关疑难解决方法(0)

任何有关谷歌地图UI组件导致这种奇怪故障的任何想法的人都非常感谢您的来信!

地图创建时间:

        var options = {
        zoom: <?php echo $this->zoom ?>,
        center: new google.maps.LatLng(<?php echo $this->centre_lat ?>, <?php echo $this->centre_lon ?>),
            mapTypeControl: false,
            mapTypeId: google.maps.MapTypeId.ROADMAP                
        }; 

        var map = new google.maps.Map(document.getElementById('map_canvas'), options);

即使没有标记,故障也是一样的.

我有一个奇怪的问题.我的网站上有两张地图,一张大地图和一张小地图.我想用大的一个来显示到某个地址的路线.我现在正在尝试实现这两张地图,但却遇到了一个奇怪的问题.小地图工作正常,但在大地图上只有div的一小块区域填充了地图,其余的都是空的.(见图.)

我使用以下代码显示两个映射:

   function initialize() {
    var latlng = new google.maps.LatLng(51.92475, 4.38206);
    var myOptions = {zoom: 10, center: latlng,mapTypeId: google.maps.MapTypeId.ROADMAP};
    var map = new google.maps.Map(document.getElementById("map_canvas"), myOptions);
    var marker = new google.maps.Marker({position: latlng, map:map, title:"Home"});
    var image = '/Core/Images/Icons/citysquare.png';
    var myLatLng = new google.maps.LatLng(51.92308, 4.47058);
    var cityCentre = new google.maps.Marker({position:myLatLng, map:map, icon:image, title:"Centre"});
    marker.setMap(map);

    var largeLatlng = new google.maps.LatLng(51.92475, 4.38206);
    var largeOptions = {zoom: 10, center: largeLatlng,mapTypeId: google.maps.MapTypeId.ROADMAP};
    var largeMap = new google.maps.Map(document.getElementById("largeMap"), largeOptions);
    var largeMarker = new google.maps.Marker({position: largeLatlng, map:largeMap, title:"Cherrytrees"}); …

我使用的是Google Maps API v3,显示在jQuery UI标签上.当选择显示地图的选项卡时,我一直在努力触发我的谷歌地图以正确调整大小.这里的jQuery文档http://docs.jquery.com/UI/Tabs提供了:

对于Google地图,您还可以在选项卡显示后调整地图大小,如下所示:

$('#example').bind('tabsshow', function(event, ui) {
    if (ui.panel.id == "map-tab") {
        resizeMap();
    }
});

Run Code Online (Sandbox Code Playgroud)

无论我尝试什么,上面的代码都不适合我.

以下代码可以正常工作,因为它会在我选择tab 9时显示警告.因此,我知道至少我正确地隔离了正确的触发事件.这是代码:

$(function() {
    $( "#tabs" ).bind( "tabsselect", function(event, ui) { 
        if (ui.panel.id == "tabs-9") {
            alert("Alert is working");
        }                                         
    });
});

当我改变这段代码以包含推荐的resizeMap(); 命令,它不起作用.相反,它所做的是将字符"#tabs-9"附加到网址的末尾,然后它甚至不会选择正确的选项卡9.当我使用此代码时,我甚至看不到选项卡9:

$(function() {
    $( "#tabs" ).bind( "tabsselect", function(event, ui) { 
        if (ui.panel.id == "tabs-9") {
            resizeMap();
        }                                         
    });
});

最后,当我改变代码以包含不同的调整大小命令"google.maps.event.trigger(map,'resize');"时,它仍然不起作用.相反,它允许我选择正确的选项卡9,并且它不会像上面的情况那样将字符附加到URL的末尾,但它不会调整地图的大小.地图仍然只显示部分完整,右侧有灰色条带.这是代码:

$(function() {
    $( "#tabs" ).bind( "tabsselect", function(event, ui) { 
        if (ui.panel.id == "tabs-9") {
           google.maps.event.trigger(map, 'resize'); …

我有一个页面,我使用bootstrap,我添加了一个地图(API v3).

它起初工作正常,但是当我折叠地图时 - 我无法重新打开它.

我查看了类似的SO问题,但找不到解决这个问题.

我的HTML:

<div id="mapHeader" data-toggle="collapse" data-target="#map">
    Header
</div>
<div id="map" class="collapse in">
    <div id="map_canvas"></div>
</div>

CSS:

#map_canvas { height: 100% }
#map {height: 30em; width: 50%;max-height:100%;}

Javascript只加载地图.

一个小提琴演示

似乎相关,但我无法实现相同的解决方案