Question

我使用自定义ImageMapType作为平面布置图。我必须能够以两种不同的画布尺寸显示相同的地图，以便在响应式网站中使用。

我遇到的问题是，当我根据地图的较大版本（800x450）设置边界时，这些边界在较小版本（560x360）中不正确。使用这些边界在较小的地图上使用裁剪地图的边缘。显然，我需要为小地图使用不同的（更大的）边界，以便边缘正确。

是否有某种方法可以根据画布的大小将边界从较大的地图转换为较小的地图？

请参阅下面的Fiddle链接以了解该问题。

var marker;
var typeOptions = {
getTileUrl: function (coord, zoom) {
    return 'http://fc02.deviantart.net/fs4/i/2004/267/a/4/The_Middle_Earth_Map_by__electra_.jpg';
},
tileSize: new google.maps.Size(1192, 930),
maxZoom: 5,
minZoom: 5
};
var mapType = new google.maps.ImageMapType(typeOptions);
var allowedBounds = new google.maps.LatLngBounds(
new google.maps.LatLng(-15.076764665951556, 47.2412109375),
new google.maps.LatLng(6.790762250562566, 64.2041015625));

function initialize(canvas) {

var myLatlng = new google.maps.LatLng(-15.076764665951556, 47.2412109375);
var mapOptions = {
    center: myLatlng,
    zoom: 5,
    streetViewControl: false,
    disableDefaultUI: true,
    mapTypeControlOptions: {
        mapTypeIds: ['stores']
    }
};
var map = new google.maps.Map(document.getElementById(canvas), mapOptions);
map.mapTypes.set('stores', mapType);
map.setMapTypeId('stores');
lastValidCenter = new google.maps.LatLng(-15.076764665951556, 47.2412109375);
google.maps.event.addListener(map, 'center_changed', function (event) {
    document.getElementById('center').value = map.getCenter();
    if (allowedBounds.contains(map.getCenter())) {
        lastValidCenter = map.getCenter();
        return;
    }
      map.panTo(lastValidCenter);

});
}

Answer 1

想出来。

我认为使用Center导致了我的问题，因此我将其更改为使用map.getBounds（）使用视口的NE和SW角设置边界，然后比较NE和SW角并检查以查看如果它们在我的地图范围内。

google.maps.event.addListener(map, 'center_changed', function (event) {
    if (allowedBounds.contains(map.getBounds().getSouthWest()) && 
           allowedBounds.contains(map.getBounds().getNorthEast())) {
        lastValidCenter = map.getCenter();
        return;
    }
      map.panTo(lastValidCenter);

});

http://jsfiddle.net/khendar/CvCMq/5/

在不同大小的谷歌地图上设置界限

1 个答案: