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

Source: Internet
Author: User

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.

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.