The effect _javascript skill of realizing the ABCD marker of Baidu map based on OL2

This article outlines:

Above mentioned in ArcGIS for JS to achieve the marker effect of the Baidu map ABCD, in this article, describes how to achieve similar results in OpenLayers2.

The effect chart shows the following:

For intuitive periods, the effect is posted first.

Linkage display

Ideas:

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 i = $ (this). attr ("i"); 
  $ ("#img" +i). attr ("src", "img/blue.png"); 
  var data = $ (this). Data ("attr"); 
  var HPT = new Openlayers.lonlat (DATA.X,DATA.Y); 
  var hicon = new Openlayers.icon (' Img/blue.png ', size,offset); 
  Hmarker = new Openlayers.marker (Hpt,hicon); 
  Markerlyr.addmarker (hmarker); 
  ShowName (Hpt,data.name, "item-label-name"); 
}; 
Title.on ("Mouseout", function () { 
  var i = $ (this). attr ("i"); 
  $ ("#img" +i). attr ("src", "img/red.png"); 
  Markerlyr.removemarker (hmarker); 
  Hlabellyr.clear (); 
}); 
Title.on ("click", Function () { 
  var data = $ (this). Data ("attr"); 
  Showinfowindow (DATA.NAME,DATA.DESC); 

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:

 Marker.events.register ("click", feature, function (e) {var data = e.object.attr; 
Showinfowindow (DATA.NAME,DATA.DESC); 
}); 
  Marker.events.register ("MouseOver", feature, function (e) {map.layerContainerDiv.style.cursor = "pointer"; 
  var id= e.object.id; 
  $ ("#img" +id). attr ("src", "img/blue.png"); 
  $ ("#li" +id). CSS ("Background", "#f2f2f2"); 
  var data = e.object.attr; 
  var HPT = new Openlayers.lonlat (data.x, DATA.Y); 
ShowName (Hpt,data.name, "Item-label-name-map"); 
}); Marker.events.register ("Mouseout", feature, function (e) {map.layerContainerDiv.style.cursor = "url" + openlayers. 
  Util.getrootpath () + "img/pan.cur), default"; 
  var id= e.object.id; 
  $ ("#img" +id). attr ("src", "red.png"); 
  $ ("#li" +id). CSS ("Background", "#ffffff"); 
Hlabellyr.clear (); 
}); 
Markerlyr.addmarker (marker); 
var label = new Openlayers.label (pt,i+1, "Item-label"); Labellyr.add (label); 

3, the map of the 1,2,3,4 ... etc. number is a label layer, do not participate in linkage;

4, the data in the form of JSON transmission, in this example, according to the map of the four to dynamically generated, as follows:

function Getrandomxy () { 
  var json = new Array (); 
  for (Var i=0;i<8;i++) { 
    var w = bounds.getwidth (); 
    var h = bounds.getheight (); 
    var x = Math.random () * w + bounds.left; 
    var y = math.random () * H + bounds.bottom; 
    Json.push ({ 
      id:i, 
      name: "Name" +i, 
      desc: "This is the name" +i, x:x 
      , 
      y:y 
    }) 
  } 
  return JSON; 
}

The complete code is as follows:

<! DOCTYPE html>  

In this example, the Openlayers layer labels and object label are extended.

The above is the entire description of this article, I hope you like.