地图上显示div点位

功能核心：  地理坐标转屏幕坐标

用到的插件：jquery  animo动画插件

核心代码：

 var point = new Point(lon, lat, map.spatialReference);
                var screenPnt = map.toScreen(point);

功能代码：

<span style="font-size:14px;">for (var i = 0; i < json.length; i++) {</span>

<span style="font-size:14px;"><span style="white-space:pre">		</span>
                var title = json[i].title;
                var lon = json[i].lon;
                var lat = json[i].lat;
                var value = json[i].value;
                var code = json[i].code;</span>

<span style="font-size:14px;"><span style="white-space:pre">		</span>//自己定义标签
                var html = "";
                html += "<div id=\'ring" + i + "\' class=\'ring\'>";
                html += "<div id = \'div_mapIcoDiv" + i + "\' title=\'" + title + "\' lon=\'" + lon + "\' lat=\'" + lat + "\' value=\'" + value + "\' code=\'" + code + "\'>";</span><pre name="code" class="javascript"><span style="font-size:14px;"><span style="white-space:pre">	</span>       lve = coustomTool.getLveAndColor(value);</span><pre name="code" class="javascript">html += "<div class = \'tip_name\' style=\'border:1px solid " + lve.borderColor + "\'>" + title + "</div>"; html += "<div class = \'tip_value\' style=\'background: url(IMG/BG/" + lve.imgColor + ") no-repeat\'>" + value + "</div>"; html += "</div>"; html += "</div>";

<span style="font-size:14px;"><span style="white-space:pre">		</span>//地理坐标转屏幕坐标并设置点位div的位置
                var point = new Point(lon, lat, map.spatialReference);
                var screenPnt = map.toScreen(point);</span>

<span style="font-size:14px;">                $("#ring" + i).css({ "left": screenPnt.x - 19 + "px", "top": screenPnt.y + 25 + "px", "position": "absolute", "z-index": "10", "cursor": "pointer" });</span>

<span style="font-size:14px;"><span style="white-space:pre">		</span>$("body").append(html);

            }</span>

<span style="font-size:14px;"><span style="white-space:pre">	</span>//点位动画效果</span>

<span style="font-size:14px;"><span style="white-space:pre">	</span>$(".class_mapIcoDiv").animo({ animation: ["rollIn"], duration: 0.5 });      </span><pre name="code" class="javascript"><span style="font-size:14px;"><span style="white-space:pre">	</span>$(".class_mapIcoDiv").bind("mouseover", function () {
                    $(this).animo({ animation: ["pulse"], duration: 0.5 });
                });</span>

<span style="font-size:14px;"></span><pre name="code" class="javascript">

<span style="font-size:14px;">
</span>

 var panStart = dojo.connect(map, "onPanStart", function () {
                $(".ring").css("display", "none");
                $(".esriPopup").css("display", "none");
            });
            var panEnd = dojo.connect(map, "onPanEnd", function () {
                for (var i = 0; i < json.length; i++) {
                    var x = json[i].lon;
                    var y = json[i].lat;
                    var point = new Point(x, y, map.spatialReference);
                    screenPnt = map.toScreen(point);
                    $("#ring" + i).css({ "left": screenPnt.x - 19 + "px", "top": screenPnt.y + 25 + "px", "position": "absolute", "display": "block", "z-index": "1" });
                }
                $(".esriPopup").css("display", "block");
            });
            var zoomStart = dojo.connect(map, "onZoomStart", function () {
                $(".ring").css("display", "none");
                $(".esriPopup").css("display", "none");
            });
            var zoomEnd = dojo.connect(map, "onZoomEnd", function () {
                for (var i = 0; i < json.length; i++) {
                    var x = json[i].lon;
                    var y = json[i].lat;
                    var point = new Point(x, y, map.spatialReference);
                    screenPnt = map.toScreen(point);
                    $("#ring" + i).css({ "left": screenPnt.x - 19 + "px", "top": screenPnt.y + 25 + "px", "position": "absolute", "display": "block", "z-index": "1" });
                }
                $(".esriPopup").css("display", "block");
            });
            //将地图事件的句柄加入到句柄集合中。
            config._eventHandlers.push(panStart);
            config._eventHandlers.push(panEnd);
            config._eventHandlers.push(zoomStart);
            config._eventHandlers.push(zoomEnd);