Arcgis for JavaScript implementation of the Baidu map ABCD marker effect

Overview:

In my blog, there is a related article, this time, a lot of people asked me to seek the source code, only the time has long, the source codes have been found, riding this 9.3 holiday, and re-realized the next, and the relevant code has been optimized, posted here, convenient for everyone to use.

Related article Address:

http://blog.csdn.net/gisshixisheng/article/details/39577817

Post-Implementation effects:

For the intuitive period, first paste out the effect I do

List display and map display and linkage

Display information

Implementation ideas:

1. List and map interaction

When the mouse passes through the list, modifies the list icon and draws a blue marker on the map based on the values returned by the list; mouse out, change the list icon to red, clear the map marker layer.

Key code:

                            Title.on ("MouseOver", function () {                                var attr = $ (this). Data ("attr");                                $ ("#icon" +attr.id). CSS ("Background", "url (' images/blue.png ')");                                var pt=new point (attr.x,attr.y,{"Wkid": 4326});                                var PMS = new Esri.symbol.PictureMarkerSymbol ("Images/blue.png", 24,26)                                var gimg = new Graphic (PT,PMS);                                Glyrhover.add (gimg);                            });                            Title.on ("Mouseout", function () {                                var attr = $ (this). Data ("attr");                                $ ("#icon" +attr.id). CSS ("Background", "url (' images/red.png ')");                                Glyrhover.clear ();                            });

2. Interaction of maps and lists

The mouse passes the map red marker, modifies the corresponding list icon, and changes the picture of the red marker to blue, the mouse moves out, modifies the corresponding list icon, and modifies the marker to be red.

Key code:

                        Glyr.on ("Mouse-over", function (e) {                            map.setmapcursor ("pointer");                            var SMS = E.graphic.symbol;                            Sms.url = "Images/blue.png";                            Glyr.redraw ();                            $ ("#icon" +e.graphic.attributes.id). CSS ("Background", "url (' images/blue.png ')");                        });                        Glyr.on ("Mouse-out", function (e) {                            map.setmapcursor ("Default");                            var SMS = E.graphic.symbol;                            Sms.url = "Images/red.png";                            Glyr.redraw ();                            $ ("#icon" +e.graphic.attributes.id). CSS ("Background", "url (' images/red.png ')");                        });

3. The ABCD text on the map is a separate layer and does not participate in the interaction.

4. Data is present in JSON form.

        var data = [            {                "id": "A", "Name": "Lhasa", "X": 91.162998, "y": 29.71042, "                desc": "Lhasa is the capital of China's tar, Tibet's political, economic, The cultural and religious center is also a sacred place for Tibetan Buddhism. "            },            {                " id ":" B "," name ":" Xining "," X ": 101.797303," y ": 36.593642,"                desc ":" Xining is the capital of Qinghai province, ancient called the County of Xi ' an, green Tangcheng, take "West Trachimbrod Peace" is the largest city in the whole Qinghai-Tibet plateau. "            },            {                " id ":" C "," name ":" Lanzhou "," X ": 103.584297," y ": 36.119086,                " desc ":" Lanzhou, provincial capital of Gansu Province, The important industrial base and integrated transportation hub in the Northwest region, one of the important central cities in the west, and the important node city of the Silk Road Economic Belt. "            },            {                " id ":" D "," Name ":" Chengdu "," X ": 104.035508," y ": 30.714179,"                desc ":" Chengdu, hereinafter referred to as Rong, the capital of Sichuan Province, 1993 by the State Council identified as the southwest of Science and Technology, commerce, financial center and transportation, communications hub. "            }        ];

Full code:

<! DOCTYPE html>



 
Copyright NOTICE: This article for Bo Master original article, without Bo Master permission not reproduced.
 
Arcgis for JavaScript implementation of the Baidu map ABCD marker effect