Arcgis for JavaScript implementation of the Baidu map ABCD marker effect

Source: Internet
Author: User

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

Contact Us

The content source of this page is from Internet, which doesn't represent Alibaba Cloud's opinion; products and services mentioned on that page don't have any relationship with Alibaba Cloud. If the content of the page makes you feel confusing, please write us an email, we will handle the problem within 5 days after receiving your email.

If you find any instances of plagiarism from the community, please send an email to: info-contact@alibabacloud.com and provide relevant evidence. A staff member will contact you within 5 working days.

A Free Trial That Lets You Build Big!

Start building with 50+ products and up to 12 months usage for Elastic Compute Service

  • Sales Support

    1 on 1 presale consultation

  • After-Sales Support

    24/7 Technical Support 6 Free Tickets per Quarter Faster Response

  • Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.