地图上显示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);