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

0 0

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

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

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

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

先谢谢你们的指点

问题补充：

lovewhzlq 写道

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

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

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

你的主意不错，但是现在人们习惯用浏览地图方式来查看大图，我也喜欢浏览GOOGLE地图方式来查看大图

Web综合

2010年3月28日 11:38

sinykk
0
0 0 0

2个答案按时间排序按投票排序

0 0

采纳的答案

如果是外网的话，
直接用GOOGLE MAP API 实现自定义的地图（相当于你的国片就可以了。）
看看别人做的三国地图，魔兽世界地图
三国版地图：
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

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

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

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

关键实现代码

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

其他代码可参考DEMO实现。

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

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

2010年3月28日 13:16