The effect _javascript technique of Baidu map ABCD marker based on ArcGIS for JavaScript

First show you the implementation of the effect:

For intuitive period, first post out the effect I do

List display and map display and linkage

Display information

Realize the idea:

1, list and map interaction

When the mouse passes the list, modify the list icon and draw the blue marker on the map based on the values returned by the list; mouse out, modify the list icon to red, and 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, map and list of interaction

When the mouse passes the map red marker, modifies the corresponding list icon, and replaces the red marker picture with the blue, the mouse moves out, modifies the corresponding list icon, and modifies 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 text of ABCD on the map is a separate layer, do not participate in interaction.

4, the data in the form of JSON.

var data = [ 
 { 
 "id": "A", "Name": "Lhasa", "X": 91.162998, "y": 29.71042, 
 "desc": "Lhasa is the capital of China's Tibet Autonomous Region, Tibet's political, economic, The center of Culture and Religion is also the Holy Land of Tibetan Buddhism. " 
 }, 
 { 
 " id ":" B "," name ":" Xining "," X ": 101.797303," y ": 36.593642," 
 desc ":" Xining is the provincial capital of Qinghai Province, the ancient name of Xi ' an county, green Tangcheng, take "West Trachimbrod Peace" Meaning, the entire Qinghai-Tibet Plateau is the largest city. " 
 }, 
 { 
 " id ":" C "," name ":" Lanzhou "," X ": 103.584297," y ": 36.119086, 
 " desc ":" Lanzhou, capital of Gansu Province, The important industrial base and integrated transportation hub in northwest China, one of the important central cities in the western region, the important node city of the Silk Road Economic Belt. " 
 }, 
 { 
 " id ":" D "," Name ":" Chengdu "," X ": 104.035508," y ": 30.714179, 
 " desc ":" Chengdu, abbreviation Rong, capital of Sichuan Province, 1993 was identified by the State Council as the southwest of Science and Technology, commerce, financial center and transportation, communications hub. " 
 } 
];

Complete code:

<! DOCTYPE html>  

The above content is the cloud Habitat Community small make up for you to share based on ArcGIS for JavaScript to achieve the effect of the ABCD Baidu map marker, I hope you like.