且构网

分享程序员开发的那些事...
且构网 - 分享程序员编程开发的那些事

Google Maps v3 ImageMapType防止包装

更新时间:2023-02-14 13:09:18

说实话,我不认为使用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)