Question

我刚刚在网站上添加了googlemap。我被放置在map_canvas div中的toturials中，并且这个div嵌套在另一个div中，如：

现在的问题是地图图块会留在topleft的角落，而不是像http://screencast.com/t/jeUSKijjwE这样的地图背景

可能出错？

Answer 1

拉斯穆斯，我最终在这里用谷歌地图解决了这个问题...

我调用了函数checkResize（）;

我采用了变量贴图（“检查”我的DIV，其中加载了地图并调用了函数：

maps.checkResize（）;

我能够在此链接中提供帮助：Google map only loading half of itself

Marcelo Marini

Answer 2

这通常是显示，隐藏或调整地图大小的问题。

在google maps v3中，我相信您可以致电google.maps.event.trigger(map, 'resize');，其中map是您对Google地图对象的引用。

Answer 3

我建议在检查div是否可见之后加载地图有一些时间延迟将保留地图。为我工作

  $(document).ready(function () {
        $('.togglebtn').click(function () {

 if(!$('#map_canvas').is(':visible')){
                setTimeout(function(){initialize()}, 500);
                }
    });
});


   //your function
 function initialize() {


        var mapOptions = {
            zoom: 3,
          center :  new google.map.LatLng(31.510474,80.352287),
            center: new google.maps.LatLng(44.510474, 50.352287),
            mapTypeId: google.maps.MapTypeId.ROADMAP
        }
        var map = new google.maps.Map(document.getElementById('map_canvas'), mapOptions);

        var contentSC_PAK = "SoftCircles Pakistan";
        .....
        ..... 

        and rest of your map code to initialize map



        });

    }

Answer 4

我遇到了这个问题并发现在我的情况下问题是我用javascript innerHTML创建了map_canvas div。

地图会在第一次正确显示，但第二次我会调用它（不同的地图）它会显示相同的地图（错误的地图），第三次我会调用另一个地图会显示它只在左上角。所有剩下的电话都会在最上层。

我所要做的就是将div放在原始HTML中，并且从那里开始就可以很好地工作。

希望这有助于某人！

Answer 5

您必须使用autosizse选项。我有同样的问题，我解决了它。

这里是打开模态并在其中的代码，调用locationpicker。

    $scope.map_picker = function(){
        $("#map_modal").modal('show');
        $('.us2').locationpicker({
            location: {latitude: 33.997215339647724, longitude: -81.02654766235355},
            radius: 300,
            inputBinding: {
                latitudeInput: $('.us2-lat'),
                longitudeInput: $('.us2-lon'),
                radiusInput: $('#us2-radius'),
                locationNameInput: $('#us2-address')
            }
        });

     **$('#map_modal').on('shown.bs.modal', function () {
            $('.us2').locationpicker('autosize');
        });**
}

主要逻辑只需要使用这一行： $（ 'US2 '）locationpicker（' 自动调整'）。但重要的是如何以及在何处称呼这一行。

定位谷歌地图停留在左上角

5 个答案: