Google 地图 V3 未居中，仅显示地图的一部分

发布于 2024-09-28 13:45:33 字数 788 浏览 5 评论 0原文

我正在为 iPhone 开发一个基于 jQTouch 的应用程序，其中一部分使用 Google Maps API (V3)。我希望能够将地理位置坐标传递到地图，并让它用标记将位置居中。我现在得到的是适当缩放级别的地图，但所需的中心点出现在右上角。它还仅显示大约三分之一的地图区域（其余部分为灰色），并且当您平移或缩放时，它的行为有些不稳定。这是代码：


var coords = { latitude : "35.510630", longitude : "-79.255374" };
var latlng = new google.maps.LatLng(coords.latitude, coords.longitude);
var myOptions = {
    zoom: 12,
    center: latlng,
    mapTypeId: google.maps.MapTypeId.ROADMAP
};
var map = new google.maps.Map($("#map_canvas").get(0), myOptions);
var marker = new google.maps.Marker({
    position: latlng, 
    map: map, 
});

顺便说一句：它在其他平台/浏览器上的外观和行为也相同。

想法？

预先感谢，

马克

补充这是一个链接，可以准确显示正在发生的情况： iPhone 模拟器的屏幕截图

原文

I'm developing a jQTouch-based app for the iPhone and part of it uses the Google Maps API (V3). I want to be able to pass the geolocation coordinates to the map and have it center the location with a marker. What I'm getting now is the map at the proper zoom level but the desired center-point appears in the upper-righthand corner. It's also showing only about a third of the map area (the rest is gray) and it behaves somewhat erratically when you pan or zoom. Here's the code:


var coords = { latitude : "35.510630", longitude : "-79.255374" };
var latlng = new google.maps.LatLng(coords.latitude, coords.longitude);
var myOptions = {
    zoom: 12,
    center: latlng,
    mapTypeId: google.maps.MapTypeId.ROADMAP
};
var map = new google.maps.Map($("#map_canvas").get(0), myOptions);
var marker = new google.maps.Marker({
    position: latlng, 
    map: map, 
});

BTW: It looks and behaves the same on other platforms/browsers as well.

Thoughts?

Thanks in advance,

Mark

Added
Here's a link that'll show exactly what's happening:
Screen shot of iPhone emulator

分享到QQ

分享到微博

如果你对这篇内容有疑问，欢迎到本站社区发帖提问参与讨论，获取更多帮助，或者扫码二维码加入 Web 技术交流群。

发布评论

需要登录才能够评论，你可以免费注册一个本站的账号。

阪姬 2024-10-05 13:45:33

我猜您正在使用 AJAX 来显示地图，或者在某个时刻隐藏地图，然后根据操作显示它？

在这种情况下，Google 不知道地图容器的大小，它只会绘制地图的一部分，通常是偏离中心的。

要解决此问题，请调整地图大小，然后重新以纬度/经度为中心。像这样的事情：

google.maps.event.trigger(map, 'resize');

// Recenter the map now that it's been redrawn               
var reCenter = new google.maps.LatLng(yourLat, yourLng);
map.setCenter(reCenter);

I'm guessing you're using AJAX to display the map, or have the map hidden at some point and then display it based on an action?

In this case Google doesn't know the size of the map container and it will draw only part of the map, usually off-centered.

To fix this, resize the map, then re-center on your lat/lng. Something like this:

google.maps.event.trigger(map, 'resize');

// Recenter the map now that it's been redrawn               
var reCenter = new google.maps.LatLng(yourLat, yourLng);
map.setCenter(reCenter);

回复收藏 0 原文

自由如风 2024-10-05 13:45:33

正确渲染地图的解决方案是在 jQTouch 的 pageAnimationEnd-Event 上执行地图代码。

Page #div 中的示例：

    <div id="map_canvas" style="width:100%; height:100%; min-height:400px; background:#ccc;"></div>
    <script type="text/javascript"> 

    $('#map').bind('pageAnimationEnd', function() {

        var mapOptions = {
            zoom: 13,
            disableDefaultUI: true,
            mapTypeId: google.maps.MapTypeId.ROADMAP
        };
        var map =  new google.maps.Map(document.getElementById('map_canvas'), mapOptions);

        if(navigator.geolocation) {
            navigator.geolocation.getCurrentPosition(function(position) {
                    var pos = new google.maps.LatLng(position.coords.latitude, position.coords.longitude)

                    var marker = new google.maps.Marker({
                        map: map,
                        draggable: false,
                        position: pos
                    });

                    map.setCenter(pos);
                }, function() {
                    console.log('Device Environment Capable of Geolocation but not Available - Geolocation failed');
                }
            );
        } else {
            console.log('Device Environment Not Capable of Geolocation - Geolocation failed');
        }
    });
    </script>

不过，我发现自己在使地图全屏高度方面遇到困难。在这种情况下的任何帮助将不胜感激。请注意，我使用 DataZombies 栏扩展来固定页脚导航。

The solution for getting the map renedered correctly is to execute your Maps-Code on pageAnimationEnd-Event of jQTouch.

Example within Page #div:

    <div id="map_canvas" style="width:100%; height:100%; min-height:400px; background:#ccc;"></div>
    <script type="text/javascript"> 

    $('#map').bind('pageAnimationEnd', function() {

        var mapOptions = {
            zoom: 13,
            disableDefaultUI: true,
            mapTypeId: google.maps.MapTypeId.ROADMAP
        };
        var map =  new google.maps.Map(document.getElementById('map_canvas'), mapOptions);

        if(navigator.geolocation) {
            navigator.geolocation.getCurrentPosition(function(position) {
                    var pos = new google.maps.LatLng(position.coords.latitude, position.coords.longitude)

                    var marker = new google.maps.Marker({
                        map: map,
                        draggable: false,
                        position: pos
                    });

                    map.setCenter(pos);
                }, function() {
                    console.log('Device Environment Capable of Geolocation but not Available - Geolocation failed');
                }
            );
        } else {
            console.log('Device Environment Not Capable of Geolocation - Geolocation failed');
        }
    });
    </script>

Though, i find myself having trouble to make the Map fullscreen-height. Any help in this case is appreciated. Note that im using DataZombies bars extension for fixed footer navigation.

回复收藏 0 原文

雨夜星沙 2024-10-05 13:45:33

请参阅我对 Google Maps API 3 & 的回答jQTouch

基本上，您的 #map_canvas div 在构建地图时不可见，因为它所在的 div 已被 jqtouch 隐藏。 api 无法处理这个问题并且得到的大小是错误的。

如果 gmaps v3 允许在构造函数中设置显式大小（就像 v2 那样），将会容易得多。

不管怎样，延迟构建地图直到“pageAnimationEnd”。

回复收藏 0 原文

执妄 2024-10-05 13:45:33

确保您已绝对设置画布的宽度/高度（即）

$("#map_canvas").width(window.innerWidth).height(window.innerHeight - $('.toolbar').height());

当然，假设您已启动并运行 jqtouch 工具栏...

Make sure you have set the width/height of the canvas absolutely (i.e.)

$("#map_canvas").width(window.innerWidth).height(window.innerHeight - $('.toolbar').height());

Of course that assumes you have the jqtouch toolbar up and running...

回复收藏 0 原文

鹿港巷口少年归 2024-10-05 13:45:33

在使用 AJAX 加载内容并显示和隐藏地图画布 div 后，加载带有方向的地图时遇到同样的问题。

您必须触发调整大小事件，就像 Brett DeWoody 所说的那样，但我发现我的全局变量超出了范围，我必须引用它们，即 google 地图变量，在窗口对象上显式地在我的函数中引用它们。这是我的 directionsService 响应中的内容：

if (status == google.maps.DirectionsStatus.OK) {

    directionsDisplay.setDirections(response);

    google.maps.event.trigger(window.map, 'resize');

}

Had the same exact issue loading a map with directions after loading content with AJAX and showing and hiding the map-canvas div.

You have to trigger the resize event, like Brett DeWoody says, but I found that my global variable went out of scope and I had to refer to them, i.e. the google map variable, INSIDE my functions explicitly on the window object. Here's what I have inside my directionsService response:

if (status == google.maps.DirectionsStatus.OK) {

    directionsDisplay.setDirections(response);

    google.maps.event.trigger(window.map, 'resize');

}

回复收藏 0 原文

风月客 2024-10-05 13:45:33

Brett DeWoody 的解决方案有效，但当我以模式显示地图时，对我来说唯一的解决方案是添加 setTimeout，如下所示：

setTimeout(function() {
    google.maps.event.trigger(map, 'resize');
    var reCenter = new google.maps.LatLng(lat, lng);
    map.setCenter(reCenter);
}, 500);

添加 setTimeout 后，地图将完美呈现和居中。

Brett DeWoody's solution worked, but as I'm showing the map in modal the only solution for me was to add setTimeout like this:

setTimeout(function() {
    google.maps.event.trigger(map, 'resize');
    var reCenter = new google.maps.LatLng(lat, lng);
    map.setCenter(reCenter);
}, 500);

After adding setTimeout the map renders and centers perfectly.

回复收藏 0 原文

~没有更多了~