The Arcgis for Javascript API is similar to how Baidu searches for a, B, C, D marker implementations

Original: Arcgis for Javascript API similar to Baidu search for a, B, C, D marker Implementation mode

More useless, first put two pictures to let us see the specific effect:

Figure 1, Baidu map search results

Figure 2, the effect of Arcgis for JavaScript implementation

See the effect, is not everyone a little chicken move, is not also spoil the move, there is wood? But how is it implemented? Let me give you a detailed talk about my idea of realization.

First, the data.

In fact, the object of the search from the type, should be points, lines, polygons are supported, but in the actual operation, whether Baidu or I do their own time, will be all the object of the point of the object, that is, to convert each object into a POI hotspot, and then the object's coordinate information extracted, all the objects into storage.

Second, realize.

To achieve this effect, first, based on the user's query criteria from the database to obtain data, the data returned to the Web is in JSON format. After getting to the data, then do the data on the left side of the page display and the map to the left of the list corresponding to the display, the left side of the list of the show I do not elaborate, have done the web there are 10,000 ways to achieve it, focusing on the display on the map.

These red bubbles are a graphiclayer, each bubble is a graphic, just according to different order, graphic Picturemarkersymbol is different, the following is the implementation of the Code:

[JavaScript]View Plaincopy print?

2. <span style="White-space:pre" > </span>addquerypopup = function (data) {
4. Redpopuplayer.clear ();
6. var mlpoint = New Esri.geometry.Multipoint (new ESRI.  Spatialreference ({wkid:4326}));
8. var graphic = null;
10. For (var i=0;i<data.length;i++) {
12. var att=data[i];
14. var pt = New Esri.geometry.Point (Att.x,att.y,new ESRI.  Spatialreference ({wkid:4326}));
16. Mlpoint.addpoint (PT);
18. var SMS = null;
20. switch (i) {
22. Case 0:{
24. SMS = New Esri.symbol.PictureMarkerSymbol ("Index/css/map/images/location_icon/a.png", 15,19);
26. Break ;
28. }
30. Case 1:{
32. SMS = New Esri.symbol.PictureMarkerSymbol ("Index/css/map/images/location_icon/b.png", 15,19);
34. Break ;
36. }
38. Case 2:{
40. SMS = New Esri.symbol.PictureMarkerSymbol ("Index/css/map/images/location_icon/c.png", 15,19);
42. Break ;
44. }
46. Case 3:{
48. SMS = New Esri.symbol.PictureMarkerSymbol ("Index/css/map/images/location_icon/d.png", 15,19);
50. Break ;
52. }
54. Case 4:{
56. SMS = New Esri.symbol.PictureMarkerSymbol ("Index/css/map/images/location_icon/e.png", 15,19);
58. Break ;
60. }
62. Case 5:{
64. SMS = New Esri.symbol.PictureMarkerSymbol ("Index/css/map/images/location_icon/f.png", 15,19);
66. Break ;
68. }
70. Case 6:{
72. SMS = New Esri.symbol.PictureMarkerSymbol ("Index/css/map/images/location_icon/g.png", 15,19);
74. Break ;
76. }
78. Case 7:{
80. SMS = New Esri.symbol.PictureMarkerSymbol ("Index/css/map/images/location_icon/h.png", 15,19);
82. Break ;
84. }
86. Case 8:{
88. SMS = New Esri.symbol.PictureMarkerSymbol ("Index/css/map/images/location_icon/i.png", 15,19);
90. Break ;
92. }
94. default:{
96. SMS = New Esri.symbol.PictureMarkerSymbol ("Index/css/map/images/location_icon/j.png", 15,19);
98. }
100. }
102. Graphic = new ESRI.                         Graphic (PT, SMS, ATT);
104. Redpopuplayer.add (graphic);
106. }
108. var extent = mlpoint.getextent ();
110. Map.setextent (Extent.expand (2));
112. };

In this way, a similar effect is achieved.

Thirdly, linkage.

Linkage, what is a concept? For the results of the search, click on the bubble, the object will pop up the information, as follows:

Figure 3, the information box of Baidu Map

Figure 4, Information box for ArcGIS

The so-called linkage, is to click on the left-hand list can also pop-up click on the red bubble like the message box, then how to implement in ArcGIS? Let's talk about my idea of how to achieve this effect.

Generally speaking, the content of the information box is mostly dynamically obtained, so my processing is to pass a unique encoding ID of the object parameters, in the background after obtaining data in the background to spell HTML code or to the foreground to spell HTML code, the implementation method is as follows:

[JavaScript]View Plaincopy print?

2. <span style="White-space:pre" > </span>/**
4. * Display object Information box Infowindow
6. */
8. Showobjinfo = function (ID) {
10. $.ajax ({
12. URL:"wateruserbasecontroller.do?baseinfosummary&id=" +id,
14. Type:"POST",
16. DataType:"html",
18. Success:function (data) {
20. Data=eval (data);
22. var pt = new Esri.geometry.Point (data.x,data.y,{wkid:4326});
24. var name = Data.name;
26. Map.infoWindow.resize (350,300);
28. Map.infoWindow.setTitle (name+"<a class= ' detailsinfo ' id= ' detailsinfo ' > Details </a>");
30. $ ("#detailsinfo"). On ("click",function () {
32. Showobjdetailinfo (Id,name);
34. });
36. Map.infoWindow.setContent (data.html);
38. Map.infoWindow.show (PT);
40. }
42. });
44. };

With the above method, the same method is called when the left list and the marker object are clicked, passing the parameter as the unique encoding ID of the object.

Eye-thin friends may see, in the Information box title bar There is a detailed link, yes, this link is working, click the Detailed link, pop up the details of the object, the method is called as follows:

[JavaScript]View Plaincopy print?

2. <span style="White-space:pre" > </span>/**
4. * Show Detailed information
6. */
8. Showobjdetailinfo = function (ID) {<pre name="code" class="javascript" ><span style="whit E-space:pre "> </span>$.ajax ({
10. URL:"wateruserbasecontroller.do?baseinfo&id=" +id,
12. Type:"POST",
14. DataType:"html",
16. Success:function (data) {
18. Data=eval (data);
20. var name = Data.name;
22. $. Window.settitle (name);

[JavaScript]View Plaincopy print?

1. <span style="White-space:pre" > </span>$.  Window.setcontent (data.html);
2. $. Window.show ();
3. }
4. });

};

The Arcgis for Javascript API is similar to how Baidu searches for a, B, C, D marker implementations