0

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

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

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

有关该问题的演示，请参阅下面的 Fiddle 链接。

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

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);

});
}
4

1 回答 1

0

弄清楚了。

我认为使用 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/

于 2013-09-26T00:20:21.103 回答