"Baidu Map API" Have you ever seen a property map? Do you know how the property label was created?

Original: "Baidu Map API" Have you ever seen a property map? Do you know how the property label was created?

Have you seen a lot of real estate sites? For example, the home, Sina le residence. Do you also want to be a text-writing label? Do you know how to make it happen? In fact, such a label is a "custom overlay." You can arbitrarily specify its style, text, pictures and so on. First, I need to initialize the map:varMP= NewBmap.map ("Map_container");
var Point= NewBmap.point (116.3964,39.9093);
Mp.centerandzoom (Point, the); Then I set up two custom overlays:varMycompoverlay= NewComplexcustomoverlay (NewBmap.point (116.407845,39.914101), "Tiananmen East");
varMyCompOverlay2= NewComplexcustomoverlay (NewBmap.point (116.406946,39.911403), "National Museum");Definition of custom overlays: (including styles, pictures, position offsets, etc.)//Complex Custom Overlays
functionComplexcustomoverlay (point, text) {
This. _point=Point ;
This. _text=text;
}
Complexcustomoverlay.prototype= NewBmap.overlay ();
ComplexCustomOverlay.prototype.initialize= function(map) {
This. _map=map;
varDiv= This. _div=Document.createelement ("Div");
Div.style.position= "Absolute";
Div.style.zIndex=BMap.Overlay.getZIndex ( This. _point.lat);
Div.style.backgroundColor= "#EE5D5B";
Div.style.border= "1px solid #BC3B3A";
Div.style.color= " White";
Div.style.height= "18px";
Div.style.padding= "2px";
Div.style.lineHeight= "18px";
Div.style.whiteSpace= "nowrap";
Div.style.MozUserSelect= "None";
Div.style.fontSize= "12px"
Div.appendchild (document.createTextNode ( This. _text));


varArrow= This. _arrow=Document.createelement ("Div");
Arrow.style.background= "URL (http://map.baidu.com/fwmap/upload/r/map/fwmap/static/house/images/label.png) no-repeat";
Arrow.style.position= "Absolute";
Arrow.style.width= "11px";
Arrow.style.height= "10px";
Arrow.style.top= "22px";
Arrow.style.left= "10px";
Arrow.style.overflow= "Hidden";
Div.appendchild (arrow);

Div.onmouseover= function(){
This. Style.backgroundcolor= "#6BADCA";
This. Style.bordercolor= "#0000ff";
Arrow.style.backgroundPosition= "0px-20px";
}

Div.onmouseout= function(){
This. Style.backgroundcolor= "#EE5D5B";
This. Style.bordercolor= "#BC3B3A";
Arrow.style.backgroundPosition= "0px 0px";
}

Mp.getpanes (). Labelpane.appendchild (Div);

returnDiv
}
ComplexCustomOverlay.prototype.draw= function(){
varMap= This. _map;
varPixel=Map.pointtooverlaypixel ( This. _point);
This. _div.style.left=pixel.x-parseint ( This. _arrow.style.left)+ "px";
This. _div.style.top=Pixel.y- - + "px";
}Finally, add them to the map.Mp.addoverlay (Mycompoverlay);
Mp.addoverlay (myCompOverlay2);To run the sample, click: http://ui-love.com/baidumap/customoverlay.html

"Baidu Map API" Have you ever seen a property map? Do you know how the property label was created?