高手请进！！！300分求助如何实现一个非常强大的拖拉式javascript地图编辑平台设计的问题！！！

鼠标在图片上选择一个框能否知道这个框的四个点的坐标
可以做到，利用event事件，框就用一个div控制，就可以了，获得 onmousedown和onmouseup事件就可以了

解决方案 »

免费领取超大流量手机卡，每月29元包185G流量+100分钟通话, 中国电信官方发货

http://www.zytech.com.cn/images/a1.jpg
这个用flash做可能效果会更加好，用js我怕不大好控制
也期待高手的意见
patchclass(黑翼) ( ) 信誉：我试过了四个点都不行啊
我的想法是把每个图放在一个DIV中,然后可以用INDEX来定位层次,你可以瞧下那"上塘路的字在屋顶上,因为我们可以把图分开点来实现挡住的效果,但要是太大,小的就不能挡住了,就会变成小房在树上了,而我们可以在点击后让图绑定在此标上,这样按住可以拉动它,但是要是想实现图从不同的方向来瞧有点难,不记得滤镜有不有这个TE效,再有就是那图是3D的,我想不出网页上3D的图是如何的,有关游戏地图制作应有关这方面的知识吧
俺个人以为，这样的东东用JS可以实现，但是速度可能达不到你想要的效果。JS做地图类应用，一般比较容易成功的方法还是把主要工作放在SERVER端预处理完成，然后客户端采用提取图片的方式形成地图。具体可以参考www.go2map.com的做法在客户端通过JS代码实时生成地图，效率是非常低的
js完全可以胜任,给你个例子,可以添加\删除(选中按del)\移动地图元素,保存可以使用xmlhttp或者隐藏域将xml数据提交给服务器
<HTML>
<HEAD>
<xml id="mapdom">
<map src="http://upload.mop.com/user/2005/07/03/4bfeeab8.gif">
<item src="http://upload.mop.com/user/2005/07/03/87be0357.gif" x="280" y="150" level="1" name="abc" />
<item src="http://upload.mop.com/user/2005/07/03/87be0357.gif" x="400" y="280" level="1" name="def" />
<item src="http://upload.mop.com/user/2005/07/03/87be0357.gif" x="1260" y="1040" level="1" name="ghi" />
</map>
</xml><script language="JScript">
function map(dom, div) {
this.Add = _Add;
this.GetMapInfo = _GetMapInfo;

var me = this;
var img = document.createElement("img");
var range = div;
var xmldom = dom;
img.src = dom.documentElement.attributes.getNamedItem("src").text;
range.style.backgroundImage = "url(" + dom.documentElement.attributes.getNamedItem("src").text + ")";
range.style.zIndex = 0;
range.style.cursor = "default";
range.style.width = img.width;
range.style.height = img.height;
range.onkeydown = _onkeydown;

var items = new Array();
var itemList = dom.selectNodes("map/item");
for (var i=0; i<itemList.length; i++) {
var item = new MapItem();
item.InitByElement(itemList[i], range);
items.push(item);
}

/*keyevent*/
function _onkeydown() {
switch (event.keyCode) {
case 46: //delete
deleteItem(event.srcElement.item);
break;
default:
break;
}
}

function deleteItem(item) {
if (!item)
return;

for (var i=0; i<items.length; i++) {
if (item == items[i]) {
items[i] = items[items.length - 1];
items.pop();
break;
}
}
item.Remove();
}
/**********/

function _Add(name, src) {
var element = xmldom.createElement("item");
xmldom.documentElement.appendChild(element);
var item = new MapItem();
item.Init(name, src, element, range);
items.push(item);
}

function _GetMapInfo() {
return xmldom.xml;
}
}

function MapItem() {
this.Init = _Init;
this.InitByElement = _InitByElement;
this.Remove = _Remove;

var me = this;
var level = 1;
var x = 0;
var y = 0;
var src = "";
var name = "";
var range = null;
var xmlElement = null;
var parentDiv = null;
var drayState = false; function _Remove() {
xmlElement.parentNode.removeChild(xmlElement);
range.parentElement.removeChild(range);
}

function draw(div) {
if (range != null)
throw "不能重复初始化";
parentDiv = div;

var img = document.createElement("img");
img.src = src;

range = document.createElement("div");
div.appendChild(range);
range.style.position = "absolute";
range.style.left = x + parentDiv.offsetLeft;
range.style.top = y + parentDiv.offsetTop;
range.style.width = img.width;
range.style.height = img.height;
range.style.zIndex = level;
range.style.backgroundImage = "url(" + src + ")";
range.item = me;

document.attachEvent("onmousedown", _onmousedown);
document.attachEvent("onmousemove", _onmousemove);
document.attachEvent("onmouseup", _onmouseup);
range.onmouseover = _onmouseover;
range.onmouseout = _onmouseout;
}

function _onmouseover() {
range.style.border = "1px solid black";
range.style.backgroundPositionX = -1;
range.style.backgroundPositionY = -1;
}

function _onmouseout() {
range.style.border = "";
range.style.backgroundPositionX = 0;
range.style.backgroundPositionY = 0;
}

/*Move*/
var offetX, offetY;
var dray = false;
function _onmousedown() {
if (event.srcElement == range) {
dray = true;
offetX = event.x - x + document.body.scrollLeft;
offetY = event.y - y + document.body.scrollTop;
range.style.zIndex = 6;
range.style.cursor = "move";
}
}

function _onmousemove() {
if (dray) {
range.style.left = event.x - offetX + parentDiv.offsetLeft + document.body.scrollLeft;
range.style.top = event.y - offetY + parentDiv.offsetTop + document.body.scrollTop;
}
}

function _onmouseup() {
if (dray) {
dray = false;
range.style.left = event.x - offetX + parentDiv.offsetLeft + document.body.scrollLeft;
range.style.top = event.y - offetY + parentDiv.offsetTop + document.body.scrollTop;

x = event.x - offetX + document.body.scrollLeft;
y = event.y - offetY + document.body.scrollTop;

range.style.zIndex = level;
range.style.cursor = "default";

xmlElement.attributes.getNamedItem("x").text = x;
xmlElement.attributes.getNamedItem("y").text = y;
}
}
/******/

function _Init(Name, Src, element, div) {
src = Src;
name = Name;
xmlElement = element;

var att;
att = xmlElement.ownerDocument.createAttribute("src");
att.text = src;
xmlElement.attributes.setNamedItem(att)
att = xmlElement.ownerDocument.createAttribute("x");
att.text = x;
xmlElement.attributes.setNamedItem(att)
att = xmlElement.ownerDocument.createAttribute("y");
att.text = y;
xmlElement.attributes.setNamedItem(att)
att = xmlElement.ownerDocument.createAttribute("levle");
att.text = level;
xmlElement.attributes.setNamedItem(att)
att = xmlElement.ownerDocument.createAttribute("name");
att.text = name;
xmlElement.attributes.setNamedItem(att)

draw(div);
}

function _InitByElement(element, div) {
level = element.attributes.getNamedItem("level").text;
x = parseInt(element.attributes.getNamedItem("x").text);
y = parseInt(element.attributes.getNamedItem("y").text);
src = element.attributes.getNamedItem("src").text;
name = element.attributes.getNamedItem("name").text;
xmlElement = element;
draw(div);
}
}
</script><script language="JScript">
var Map;

function init() {
Map = new map(mapdom.XMLDocument, divMap);
}
</script></HEAD>
<BODY onload="init();">
<INPUT type="button" value="add" onclick = "Map.Add('xyz', 'http://upload.mop.com/user/2005/07/03/87be0357.gif');">
<INPUT type="button" value="info" onclick = "alert(Map.GetMapInfo());">
<div id="divMap" style="margin-left :130px;"></div>
</BODY>
</HTML>
俺个人以为，这样的东东用JS可以实现，但是速度可能达不到你想要的效果。JS做地图类应用，一般比较容易成功的方法还是把主要工作放在SERVER端预处理完成，然后客户端采用提取图片的方式形成地图。具体可以参考www.go2map.com的做法在客户端通过JS代码实时生成地图，效率是非常低的
--------------------------------------------------------------------------
谢谢回复！
我个人的想法，是保存数据到db中，同时生成xml文件，html界面生成地图时，实时通过xml获取（关键问题是xml怎样高效的导入到html中），并采取缓存策略！
js如果在客户端实现这样的应用，应该用VML或者SVG
1  复杂逼真的图形用图片嵌入，一般的线条用矢量图形
2  svg提供强大的事件驱动机制用于交互式绘图
3  保存到数据库或者服务器端文件都是完全可以的
我个人的想法，是保存数据到db中，同时生成xml文件，html界面生成地图时，实时通过xml获取（关键问题是xml怎样高效的导入到html中），并采取缓存策略！
--------------------------------------------------------------------------
你的想法已经很成熟了，大概的架构确实是这样。
DB保存数据＋XML传送＋JS显示，
实现你的要求肯定没有问题只是效率问题需要认真处理。根据我以前测试的结果，一个有近100个层的页面上实现任意对象的鼠标拖动，在P4 2.8的机上CPU占用率可以达到100％，也就是客户端拖动的时候会有卡的感觉。在适当的位置采用VML和SVG应该可以有效率上的改善，不过这两个东东俺都不熟，你再看看别人的意见吧。
提议完全使用svg来实现，首先，svg本身就是xml的具体应用之一，其次，你的所有物件对象都在一个svg文件中，这样操作起来不会有客户端资源占用率高的问题，另外可以避免闪烁！如果采用svg的话，你的动作机制就可以大大的缩短，也就是说,server <--> svg ，就可以了！