google-maps - Google Maps v3 ImageMapType 防止换行

Question

我正在尝试复制在以下位置看到的行为:

http://forevermore.net/articles/photo-zoom/

它允许对照片进行平移和缩放，但将平移限制在照片的边界内。

上面的示例使用了 google maps v2 代码。

看来我必须执行以下操作:

google.maps.event.addListener(map, 'dragend', function() 
{
    //Get bounds and not allow dragging

});

(如此处所示:How do I limit panning in Google maps API V3?)

我的问题是:

• 将被平移/缩放的图像的大小是动态的，我想要一个通用的解决方案(如果可能的话)

如果不可能有一个通用的解决方案，我该如何确定图像的正确 LatLon 边界？

这是我目前所拥有的:

var customTypeOptions = {
  getTileUrl: function(coord, zoom) {
        return "img/earth_tiles/tile-" + zoom + "-" + coord.x + "-" + coord.y + ".jpg";
  },
  tileSize: new google.maps.Size(256, 256),
  maxZoom: 6,
  minZoom: 0,
  name: "Custom Map Type"
};

var customMapType = new google.maps.ImageMapType(customTypeOptions);


jQuery(document).ready(function(){
  var myLatlng = new google.maps.LatLng(0, 0);
  var myOptions = {
    center: myLatlng,
    zoom: 3,
     disableDefaultUI: true,
     zoomControl: true
  };

  var map = new google.maps.Map(document.getElementById("map"), myOptions);
    map.mapTypes.set('custom', customMapType);
    map.setMapTypeId('custom');
});

它工作正常，它只允许用户滚动到照片之外。

Answer 1

老实说，我认为使用 Google map 并不是真正正确的方法。是的，您可能可以破解它以使其正常工作，但这并不是图书馆的真正目的。 (关于使用锤子将圆形螺钉装入三角形孔的事情。)

此外，您还要同时遵守 Google 的 restrictive terms (您的网站必须是公开的)和他们的新pricing , 这意味着超过 25,000页面浏览量/天会让您付出代价 — 而您甚至没有使用 map 。

相反，为什么不使用专为非常大的图像平铺缩放而设计的库？ PanoJS3似乎符合要求。

PanoJS3 - An interactive JavaScript widget for panning and zooming a panoramic image stitched together dynamically from smaller tiles. This widget can be used for viewing images that are much larger than the available space in the browser viewport. Examples include panoramas, maps or high resolution document scans.

PanoJS3 supports native navigation on most popular platforms:

• PCs (zooming using mouse scroll, same as Google Maps)
• Macs (2D panning with the mouse scroll or touch panels)
• Mobile devices with touch interfaces: iOS and Android (supports pintch to zoom and pan gestures)
• Phones and tablets (scales controls according to the screen size)