JS自定义地图标注-极念网

前面写过一个在百度地图上面做标记的文章，今天再来讲讲怎么在自定义地图（也不一定是地图）上做标记。

比如像一人员定位系统之类的软件，就需要用到类似的功能，不过以前大多都是在桌面软件上实现，今天我在这里演示如何在web平台实本功能。

首先我们需要用到一张地图素材，我在这里随便在网上搜了一张某某矿井的地图：

{width="600"}

原理其实很简单，我们只要监视容器的click事件，然后计算出点击位置的相对坐标保存即可：\

            $("#allmap").click(function (e) {
                if (e.target == document.getElementById("allmap")) {
                    addMarker(0, '', e.offsetX, e.offsetY);
                    return false;
                }
            });

完整代码如下：

<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <title>地图标记</title>
    <script src="http://www.jiniannet.com/Scripts/json2.js"></script>
    <script src="http://www.jiniannet.com/resources/Script/JQuery.js"></script>
    <style type="text/css">
        body, html, #allmap { margin: 0; padding: 0; width: 100%; height: 100%; overflow: hidden; }
        .hidden { display: none; }
        #allmap { background: #ffffff no-repeat center center; position: relative; overflow: hidden; *zoom: 1; -moz-user-select: none; /*火狐*/ -webkit-user-select: none; /*webkit浏览器*/ -ms-user-select: none; /*IE10*/ -khtml-user-select: none; /*早期浏览器*/ user-select: none; }
        #box { height: 100%; position: relative; overflow: auto; *zoom: 1; border: solid 1px #ccc; }
        #bar { width: 220px; position: absolute; background: #000000; right: 5px; border: solid 1px #808080; top: 20px; background: #f5f5f5; padding: 10px; font-size: 12px; }
            #bar .row { padding: 5px 0; }
            #bar ul { margin: 0; padding: 0; overflow: auto; }
                #bar ul li { margin: 0; padding: 0; list-style: none; }
                    #bar ul li input { width: 80px; }
        .marker, .marker-hover { height: 36px; overflow: hidden; position: absolute; vertical-align: middle; font-size: 12px; width: 100px; overflow: hidden; z-index: 9999; }
            .marker i { display: block; overflow: hidden; border-radius: 5px; vertical-align: middle; border: solid 1px #46a47e; background-color: #8df5cb; margin: auto; height: 14px; width: 50px; filter: alpha(Opacity=80); -moz-opacity: 0.5; opacity: 0.5; }
            .marker em { display: block; background-color: #46a47e; width: 10px; height: 10px; overflow: hidden; border-radius: 100%; vertical-align: middle; position: absolute; top: 3px; left: 45px; }
            .marker span, .marker-hover span { color: #000; font-size: 12px; line-height: 20px; display: block; vertical-align: middle; width: 100%; height: 20px; text-align: center; overflow: hidden; text-shadow: 1px 1px 5px #fff; color: #10896b; }
            .marker-hover i { display: block; overflow: hidden; border-radius: 5px; vertical-align: middle; border: solid 1px #980808; background-color: #f7987e; margin: auto; height: 14px; width: 50px; filter: alpha(Opacity=80); -moz-opacity: 0.5; opacity: 0.5; }
            .marker-hover em { display: block; background-color: #f00; width: 10px; height: 10px; overflow: hidden; border-radius: 100%; vertical-align: middle; position: absolute; top: 3px; left: 45px; }
    </style>
    <script type="text/javascript">
        var config = {
            index: 0
        };
        function load(callback) {
            var src = $("#url").val();
            if (!src) {
                alert('请填写图片地址');
                return;
            }

            $("#allmap").css({
                backgroundImage: ''
            }).html('加载中……');

            var img = new Image();
            img.onerror = function () {
                alert("图片加载失败");
            };
            img.onload = function () {

                $("#allmap").css({
                    width: img.width + "px",
                    height: img.height + "px",
                    backgroundImage: 'url(' + src + ')'
                }).html('');

                if (callback) {
                    callback();
                }
            };
            img.src = src;
            $("#items li").remove();
            config.index = 0;
        }

        function addMarker(id, name, x, y) {
            if (!name) {
                name = "未命名 " + (config.index + 1);
            }

            $('<div class="marker" onclick="return false" id="marker' + config.index + '" data-id="' + config.index + '" title="' + name + '" style="left:' + (x - 50) + 'px;top:' + (y - 8) + 'px"><i></i><span>' + name + '</span><em></em></div>').appendTo($("#allmap"));
            $("#items").append('<li id="li' + config.index + '" data-option="x:' + x + ',y:' + y + ',id:' + id + '"><input type="text" onchange="setMarkerValue(' + config.index + ',this.value)" id="markername' + config.index + '"  value="' + name + '" /> <span id="sp' + config.index + '">X：' + x + ' Y: ' + y + '</span> <a href="javascript:del(' + config.index + ')">删除</a></li>');
            config.index++;
        }
        //onchange
        function del(i) {
            var j = eval("({" + $('#li' + i).attr("data-option") + "})");
            if (parseInt(j.id) > 0) {
                $.ajax({
                    url: 'DEMMARKER.aspx',
                    type: "post",
                    data: "id=" + j.id,
                    success: function (r) {
                        if (r == "ok") {
                            $('#li' + i + ',#marker' + i).remove();
                        } else {
                            alert(r);
                        }
                    }
                });

            } else {
                $('#li' + i + ',#marker' + i).remove();
            }
        }

        function setMarkerValue(i, value) {
            $("#marker" + i).attr("title", value);
            $("#marker" + i + " span").html(value);
        }

        function save() {
            var data = [];
            var html = '';
            var list = $("#items li");
            for (var i = 0; i < list.length; i++) {
                var j = eval("({" + $(list[i]).attr("data-option") + "})");
                j.title = list[i].getElementsByTagName("input").item(0).value;
                data.push(j);
            }


            alert('此处进行AJAX保存:' + JSON.stringify(data));
            alert('保存成功');
        }

        $(function () {
            var id = '';

            $("#allmap").click(function (e) {
                if (e.target == document.getElementById("allmap")) {
                    addMarker(0, '', e.offsetX, e.offsetY);
                    return false;
                }
            });
            var h = $(window).height();
            var w = $(window).width();
            $("#bar").height(h - 70);
            $("#items").height(h - 150);
            $("#box").width(w - 260)

            $(".marker").live("mousemove", function (e) {
                $(this).css("cursor", "move");
            });
            $(".marker").live("mouseout", function (e) {
                $(this).css("cursor", "normal");
            });
            $(".marker").live("mousedown", function (e) {
                var s = $(this)[0];
                var d = document;
                var x = e.clientX + d.body.scrollLeft - s.offsetLeft;//offsetX
                var y = e.clientY + d.body.scrollTop - s.offsetTop;
                var l = 0, t = 0;

                d.ondragstart = "return false;";
                d.onselectstart = "return false;";
                d.onselect = "document.selection.empty();";
                if (s.setCapture) {
                    s.setCapture();
                } else if (window.captureEvents) {
                    window.captureEvents(Event.MOUSEMOVE | Event.MOUSEUP);
                } else { }
                d.onmousemove = function (e1) {
                    if (!e1) {
                        e1 = window.event;
                    }
                    l = e1.clientX + document.body.scrollLeft - x;
                    t = e1.clientY + document.body.scrollTop - y;


                    s.style.left = l + "px";
                    s.style.top = t + "px";
                    var dataId = $(s).attr("data-id");
                    $("#li" + dataId).attr("data-option", 'x:' + (l + 50) + ',y:' + (t + 8) + ',id:' + dataId);
                    $("#sp" + dataId).html('X：' + (l + 50) + ' Y: ' + (t + 8));
                    //$('<div class="marker" onclick="return false" id="marker' + config.index + '" title="' + name + '" style="left:' + (x - 50) + 'px;top:' + (y - 8) + 'px"><i></i><span>' + name + '</span><em></em></div>').appendTo($("#allmap"));
                    //$("#items").append('<li id="li' + config.index + '" data-option="x:' + x + ',y:' + y + ',id:' + id + '"><input type="text" onchange="setMarkerValue(' + config.index + ',this.value)" id="markername' + config.index + '"  value="' + name + '" /> <span>X：' + x + ' Y: ' + y + ' <a href="javascript:del(' + config.index + ')">删除</a></li>');
                };
                d.onmouseup = function () {
                    if (s.releaseCapture) {
                        s.releaseCapture();
                    } else if (window.captureEvents) {
                        window.captureEvents(Event.MOUSEMOVE | Event.MOUSEUP);
                    } else { }
                    d.onmousemove = null;
                    d.onmouseup = null;
                    d.ondragstart = null;
                    d.onselectstart = null;
                    d.onselect = null;
                };
            });

            if (id) {
                $.ajax({
                    url: 'Marker.json?id=' + id,
                    dataType: "jsonp",
                    jsonp: "callback",
                    success: function (json) {
                        $("#url").val(json.url);
                        if (json.url) {
                            load(function () {
                                for (var i = 0; i < json.list.length; i++) {
                                    addMarker(json.list[i].id, json.list[i].title, json.list[i].x, json.list[i].y);
                                }
                            });
                        }
                    }, error: function (a, b) { alert(a.responseText); alert(b) }
                });
            } else {
                if ($("#url").val()) {
                    load();
                }
            }


        });

        function uploadfile() {
            $("#btnUpload").click();
        }
    </script>
</head>
<body>
    <div id="box">
        <div id="allmap">
        </div>
    </div>
    <div id="bar">
        <form id="form1" runat="server">
            <div class="row">图片地址：<input type="text" id="url" runat="server" value="http://www.jiniannet.com/Attachment/20191" /> </div>
            <div class="row">
                <asp:FileUpload ID="files" onchange="uploadfile()" runat="server" CssClass="hidden" />
                <input type="button" onclick="$('#files').click()" value="浏览" />
                <asp:Button ID="btnUpload" runat="server" CssClass="hidden" Text="上传" OnClick="btnUpload_Click" />
                <input type="button" onclick="load()" value="加载" />
                <input type="button" value="保存" onclick="save()" />
            </div>
            <div class="item">
                <ul id="items"></ul>
            </div>
        </form>
    </div>

</body>
</html>

实现效果

{width="600"}