谷歌地图拖动时不更新瓦片

Question

谷歌地图拖动时不更新瓦片

27

我必须在webview中使用Google地图JavaScript API。问题是拖动地图时，缺失的瓦片不会被加载。在我的桌面PC浏览器上，我无法得到相同的行为，但可以在拖动地图时加载瓦片。在图片中，我持有地图，什么也不会发生，直到我松开手指。

Dragging and holding

我在gmaps bugtracker中找到了一个问题（与我的问题不完全相关，但有点接近），并尝试了其中提到的所有解决方案：https://code.google.com/p/gmaps-api-issues/issues/detail?id=1448

到目前为止，我尝试了以下方法：

// Setting the maps div container to a fixed size
#map-canvas {
    height: 600px;
    width: 600px;
}

// Emit resize trigger on mouse move
$(document).ready(function () {
    $("#map-canvas").mousemove(function (event) {
        setTimeout(function () { 
            google.maps.event.trigger(map,'resize');
            map.setZoom(map.getZoom());
        }, 100);
    });
});

// loading Google Maps API after document has been loaded
function loadScript() {
  var script = document.createElement('script');
  script.type = 'text/javascript';
  script.src = 'https://maps.googleapis.com/maps/api/js?v=3.exp&sensor=false&' +
      'callback=initialize';
  document.body.appendChild(script);
}
window.onload = loadScript;

代码正在运行，mousemove事件被触发。我在我的Nexus 10设备上使用android:minSdkVersion="19"。

- seveves

7个回答

1

你能否将地图缓存为更大的尺寸，然后在视口中只显示一部分呢？例如，将地图加载到一个 1200x1200 的 div 中，再将该 div 放入一个 600x600 的 div 中，并将 overflow 属性设置为 hidden。

- Alex McMillan

当然，这可能是一个可行的解决方法，但并不是真正的解决方案 :) ... 而且我认为您将不得不重新定位缩放/街景按钮等。 - seveves

1

触摸事件与鼠标事件不同，您可以使用如touch-start、touch-end等触摸事件绑定，或尝试使用hammer.js。

http://hammerjs.github.io/

- Ajay Peter

0

我也遇到了同样的问题，地图画布上只显示了部分地图，并没有居中显示。

这一行代码解决了我的问题：

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

当鼠标悬停时不应该触发它，需要在map.initialize();之后添加这行代码，然后执行setCenter和setZoom

map.setCenter(myLatlng);
map.setZoom(10);

- Wen

0

试一下，它有效。

google.maps.event.addListenerOnce(map, 'tilesloaded', function () {
    google.maps.event.addListenerOnce(map, 'tilesloaded', function () {
        google.maps.event.trigger(map, 'resize');
    });
});

- Mir Shakeel Hussain

我尝试了你的解决方案，它确实有效。但是我不知道为什么地图调整大小只在“tilesloaded”事件被触发的第二次才起作用。如果您能解释这种行为，我会给您的答案点赞。 - ruhong

它使用addListenerOnce，基本上：第一个tilesloaded事件附加第二个侦听器 - 第二个tilesloaded事件将调用地图调整大小。但只有一次。我想不出为什么这会解决您的问题。 - MrUpsidown

-1

我之前已经回答过这个问题。请查看这个 jsfiddle

http://jsfiddle.net/cQTdc/

<html>
<head>
<script type="text/javascript" src="http://code.jquery.com/ui/1.10.3/jquery-ui.js"></script>
<script src="https://maps.googleapis.com/maps/api/js?sensor=false"></script>
<script>
  function initialize() {
    var map_canvas = document.getElementById('map_canvas');
    var map_options = {
      center: new google.maps.LatLng(51.372658, 1.354386),
      zoom:16,
      mapTypeId: google.maps.MapTypeId.HYBRID
    }
    var map = new google.maps.Map(map_canvas, map_options)
  }
  google.maps.event.addDomListener(window, 'load', initialize);
</script>
<style>
  #map_canvas {
    width: 500px;  
    height:400px;
    border:1px solid #888888;
    margin-bottom:20px;
    box-shadow: 2px 2px 2px #888888;
  }
</style>   
</head>
<body>
<div id="map_canvas"></div>
</body>

你需要更改这里的经纬度以适应你所在的位置。你可以从谷歌地图上获取这些信息。需要更改的部分是“new google.maps.LatLng(51.372658, 1.354386)”。

- Glynne Turner

-1

//创建一个div作为'map_canvas'

    var htmldesign = '<table><tr><td>India</td></tr></table>';
    var locationdetails = 'India';
    var popdetail = 'India';
    var zoomper = 5;
    GetLocation(locationdetails, popdetail, zoomper);

    function GetLocation(address, popdetail, zoomper) {
        var geocoder = new google.maps.Geocoder();
        geocoder.geocode({ 'address': address }, function (results, status) {
            if (status == google.maps.GeocoderStatus.OK) {
                var latitude = results[0].geometry.location.lat();
                var longitude = results[0].geometry.location.lng();
                initialize(latitude, longitude, popdetail, zoomper);
            } else {
                initialize(21.0000, 78.8718, 'India', zoomper);
            }
        });
    };

    function initialize(lat, lon, popdetail, zoom) {

        var myLatlng = new google.maps.LatLng(lat, lon) // This is used to center the map to show our markers
        var mapOptions;
        mapOptions = {
            center: myLatlng,
            zoom: zoom,
            mapTypeId: google.maps.MapTypeId.ROADMAP,
            marker: true
        };
        var map = new google.maps.Map(document.getElementById("map_canvas"), mapOptions);
        var marker = new google.maps.Marker({
            animation: google.maps.Animation.BOUNCE,
            position: myLatlng
        });
        if (popdetail != 'India') {
            popdetail = '<div style="font-size:small;font-family:@Arial Unicode MS;border-radius: 6px;" class="phoneytext"> ' + popdetail + '</div>';
            infoBubble = new InfoBubble({
                map: map,
                content: popdetail,
                position: new google.maps.LatLng(lat, lon),
                shadowStyle: 1,
                padding: 10,
                backgroundColor: '#E6E6E6',
                borderRadius: 6,
                arrowSize: 30,
                borderWidth: 1,
                borderColor: '#2c2c2c',
                disableAutoPan: false,
                hideCloseButton: true,
                arrowPosition: 10,
                backgroundClassName: 'phoney',
                arrowStyle: 2
            });
            marker.setMap(map);
            infoBubble.open(map, marker);
        }
        else {
            marker.setMap(map);
        }
    }
</script>

- KSEL

1

你的代码中哪一部分最终会导致任何问题的报告发生变化？ - MrUpsidown

网页内容由stack overflow 提供, 点击上面的

可以查看英文原文，
原文链接

- Sourabh Upadhyay · Accepted Answer

尝试这个...只有在地图被调整大小时才会出现这个问题。

google.maps.event.addDomListener( map, 'drag', function(e) {
    google.maps.event.trigger(map,'resize');
    map.setZoom(map.getZoom());
});