Google Maps v3 ImageMapType防止包装 [英] Google Maps v3 ImageMapType Prevent Wrapping

问题描述

我试图复制看到的行为：

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

它允许平移和缩放照片，但它限制平移到照片的边界。

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

看来我必须做以下事情：

  google.maps.event.addListener（map，'dragend'，function（）
 {
 //获取边界并且不允许拖拽
 
}）; 
  

（如下所示：如何限制Google Maps API V3中的平移功能？）

我的问题是：
$ b

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

如果无法获得通用解决方案，我该如何确定图像的正确LatLon界限？

以下是我到目前为止：

  var customTypeOptions = {
 getTileUrl：function（coord，zoom）{
 returnimg / earth_tiles / tile-+ zoom + - + coord.x + - + coord.y +.jpg; 
}，
 tileSize：新增google.maps.Size（256,256），
 maxZoom：6，
 minZoom：0，
 name：自定义地图类型
; 
 
 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'）; 
}）; 
  

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

解决方案

说实话，我不认为使用Google地图确实是正确的做法。是的，你可能会把它变成工作，但这不是图书馆要做的。 （有关使用锤子将圆形螺丝钉固定到三角形孔中的建议）。

此外，您还将自己同时接受Google的限制条款（您的网站必须必须公开）以及新的定价，这意味着超过 25,000 网页浏览量/天将花费你—而甚至没有使用地图。

相反，为什么不使用专门用于平铺缩放超大图像的库？ PanoJS3 似乎符合法案。

PanoJS3 - 一个交互式JavaScript小部件，用于平移和缩放从较小的图块动态拼接在一起的全景图像。此小部件可用于查看比浏览器视口中可用空间大得多的图像。示例包括全景图，地图或高分辨率文档扫描。

PanoJS3支持大多数流行平台上的本地导航：

• 个人电脑（使用鼠标滚动缩放，与Google地图相同）


• Mac电脑（使用鼠标滚动或触控面板进行2D平移）
  
• 带有触摸界面的移动设备：iOS和Android（支持平移到缩放和平移手势）


• 手机和平板电脑（根据屏幕尺寸控制比例）

I am trying to replicate the behavior seen at:

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

It allows panning and zooming of a photo, but it limits the panning to the bounds of the photo.

The example above using google maps v2 code.

It seems I would have to do the following:

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

});

(As seen here: How do I limit panning in Google maps API V3?)

My problem is:

• Images that will be panned/zoomed are dynamic in size, I want a generic solution (if possible)

If it is not possible to have a generic solution, how do I determine the correct LatLon bounds for an image?

Here is what I have so far:

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

It works fine, it just allows a user to scroll outside of the photo.

解决方案

To be honest, I don't think using Google Maps is really the right approach. Yes, you can probably hack it into working, but it's not really what the library is meant to do. (Something about using a hammer to fit a round screw into a triangular hole.)

Additionally, you're subjecting yourself to both Google's restrictive terms (your site must be public) and their new pricing, which means over 25,000 pageviews/day will cost you — and you're not even using the maps.

Instead, why not use a library designed for tiled zooming of very large images? PanoJS3 seems to fit the bill.

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)

这篇关于Google Maps v3 ImageMapType防止包装的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！