想在网页中显示一张长宽为几米的大图片，像GOOGLE地图

问题描述：

我想在网页中显示长宽均为几米的图片，这个图片是现实中的一个海报。想在网页中通过拖动方式查看到海报中任何地方

不知道有什么技术可以实现。

如果可以通过搜索关键字定位到图片中某个位置那就更好了，我想这个跟现在现在的google地图实现方法是否差不多，但对GOOGLE地图的技术又不清楚

先谢谢你们的指点

答

如果是外网的话，
直接用GOOGLE MAP API 实现自定义的地图（相当于你的国片就可以了。） :D :D :D
看看别人做的三国地图，魔兽世界地图
三国版地图：
[url]http://maps.google.com.tw/maps/mpl?moduleurl=http://redcliff.googlecode.com/svn/trunk/mapplet/redcliff_tc.xml&t=p&utm_campaign=zh_TW&utm_medium=lp&utm_source=zh_TW-lp-apac-tw-gns-mp&utm_term=redc[/url]

魔兽世界版地图：
[url]http://mapwow.com/[/url]

GOOGLE MAP API地址：
[url]http://code.google.com/intl/zh-CN/apis/maps/documentation/reference.html#GTileLayer[/url]

另一个非官方翻译的
[url]http://www.codechina.org/doc/google/gmapapi/[/url]

关键实现代码
[code="js"]var copyright = new GCopyright(1, new GLatLngBounds(new GLatLng(-90, -180),
new GLatLng(90, 180)),
0, "Map data: В©2007 Mapabc.com");
var copyrightCollection = new GCopyrightCollection("В©2007 Google - ");
copyrightCollection.addCopyright(copyright);
var dituTileLayer = new GTileLayer(copyrightCollection, 1, 17);
dituTileLayer.getTileUrl = function(tile, zoom) {
return "http://mapgoogle.mapabc.com/googlechina/maptile?v=w2.52&x=" +
tile.x + "&y=" + tile.y + "&zoom=" + (17-zoom);
//这里就是最关键的地方了，存放里自己图片的地址：X，Y是要显示的图片坐标，ZOOM显示的是放大比例
};

// Using a map type:
var dituMapType = new GMapType([dituTileLayer],
new GMercatorProjection(23), "Ditu", { shortName: "ditu", alt: "Show maps from Google China" });
map.addMapType(dituMapType);[/code]

其他代码可参考DEMO实现。

思路是把要显示的大图切分成很多有坐标的小图，同时为了实现ZOOM效果，可以把大图分成7个等级大小的7张图片，再对这7张图片进行切分成坐标的小图。
这样的话就可以显示到指定某一放大等级的图片的坐标了。
用户使用的操作方式就跟看GOOGLE地图一样，来回拖了。

好果不使用GOOGLE 的API，那就得自己写JAVASCRIPT取得不同图片的坐标

答

可以这么做，把图片用工具分割成很多小图片，由小图片拼装成这么一张大图片

小图片的命名方式就是以它所在的座标位置组合命名

这样的话，就可以通过搜索关键字定位到图片的某个位置也方便了

想在网页中显示一张长宽为几米的大图片，像GOOGLE地图

相关推荐