Implementation of Baidu map ABCDmarker Based on OL2 _ javascript skills

0. Overview:

The previous article mentioned how to implement the marker Effect of Baidu map ABCD in Arcgis for JS. This article describes how to implement similar effects in OpenLayers2.

As shown below:

During the intuitive period, paste the effect first.

Interactive display

Ideas:

1. Interaction between lists and maps

When the cursor goes through the list, modify the list icon, and draw a blue marker based on the value returned by the list. move the cursor out, change 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. Interaction between maps and lists

When you move the cursor over the red marker of the map, modify the corresponding list icon, and change the picture of the red marker to blue. move the cursor out, modify the corresponding list icon, and change the marker to 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. numbers such as 1, 2, 3, 4... on the map are a label layer and do not participate in association;

4. Data is transmitted in JSON format. In this example, data is dynamically generated based on the four-to-one map, as shown below:

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:

     
    Openlayers map