Ext.: http://www.cnblogs.com/milkmap/archive/2011/08/24/2151073.html
Summary:
Recently, API enthusiasts have said that custom marker is too complicated! Not only is the definition complex, but all DOM events are redefined by themselves. Is there a quick and easy way to create a property label ?
The answer, of course, is some.
We can use the label!
-------------------------------------------------------------------------------
First, create a map
This is the cliché of three words, initialize the map JS.
VarMap= NewBmap.map ("Container"); // Create map container var point = new bmap.point (116.404, 39.915); // Create a dot map.centerandzoom (Point ); // Set center point and map level to initialize map
Second, add text tags
VarMyLabel= NewBmap.label ("Hoi Fai Estate 21000 Yuan",//Fill in the content for lable {offset:NewBmap.size (-60,--), //label offset, in order for the center of the label to display at the point position:point}); //label location mylabel.settitle (" I am text label label"); // add mouse hint to label Map.addoverlay (MyLabel); // add label to map
The text callout looks like this by default, such as:
I think the best thing about a label is that it's not just a text label, but also a way to write a <a></a> link. This way, your label can be linked to any page.var=new Bmap.label ("<a href= ' http://dev.baidu.com/wiki/static/index.htm ' > Baidu Maps API $0 </a>"// fill in the content for lable
Third, set the style of the text label. The essential!!!
You can change the picture to make the property tag look better!!
The following code is used to set the lable CSS. You can write any CSS, note that if it is a CSS property such as Font-size, you have to write camel-like, fontsize so that can be recognized.
Press CTRL + C to copy the code<textarea style="width: 1497px; height: 198.4px; line-height: 1.5; font-family: Courier New; font-size: 12px;">Mylabel.setstyle ({//Set the style to label, any CSS is OK color: "Red",//Color FontSize: "14px",//Font size border: "0",//Side height: "120px",//Height Widt H: "125px",//Width textAlign: "Center",//text horizontally centered display lineheight: "120px",//row height, text vertically centered Background: "URL (http://cdn1.iconfinder.com/data/icons/CrystalClear/128x128/actions/gohome.png)",//Background image, This is the key to property labeling! Cursor: "pointer"});</textarea>Press CTRL + C to copy the code
Iv. All source code
<!DOCTYPE html> <Html> <Head> <MetaHttp-equiv= "Content-type"Content= "text/html; charset=gb2312 " /> <Title>Label making</Title> <ScriptType= "Text/javascript"Src= "http://api.map.baidu.com/api?v=1.2"></Script> </Head> <Body> <DivStyle= "width:800px;height:500px;border:1px Solid Gray"Id= "Container"></Div> </Body> </Html> <ScriptType= "Text/javascript"> VarMap= NewBmap.map ("Container");//Create a map container VarPoint= NewBmap.point (116.404,39.915);//Create a point Map.centerandzoom (Point,15);//Set the center point and map level to initialize the map VarMyLabel= NewBmap.label ("<a style= ' color:red;text-decoration:none ' target= ' _blank ' href= ' http://dev.baidu.com/wiki/static/index.htm ' > Baidu Map API 0 Yuan </a>",//Fill in the content for lable {offset:NewBmap.size (-60,-60),//The offset of the label, in order for the center of the label to appear at the point Position:point});//Label's location Mylabel.setstyle ({//To set the label style, any CSS is possible FontSize:"14px",//Size Border"0",//Side Height"120px",//Height Width"125px",//Wide TextAlign:"Center",//Text horizontal centered Display Lineheight:"120px",//Line height, text vertical Center display Background"URL (http://cdn1.iconfinder.com/data/icons/CrystalClear/128x128/actions/gohome.png)",//Background picture, this is the key to property labeling! Cursor"Pointer"}); Mylabel.settitle ("I am the text label label");//Add a mouse hint to a label Map.addoverlay (MyLabel);//Add a label to the map
VarInfowindow= new Bmap.infowindow ( " <p style= ' font-size:12px;lineheight:1.8em; ' > I am lable Open the Information window </p> "); // Create Information Window object mylabel.addeventlistener ( "click ", function () { Map.openinfowindow (Infowindow, point); }); </script>
-----------------------------------------------------------------------------------------------
However, the label produced by the property label, after all, is not a regular label marker, but the text tag label. So, there will be some minor flaws.
If you can put up with them, then use the label as boldly as possible.
1, not like marker, can drag. enabledragging
2, can not set a:hover, that is, the mouse on the label, the background picture can not change.
3, can not add Information window (thank JZ1108 Reminder, lable can add Information window ~) 2011.8.26 update
Var Infowindow = new Bmap.infowindow (" <p style= ' font-size:12px;lineheight:1.8em; ' > I am lable Open the Information window </p> "); // Create Information Window object mylabel.addeventlistener ( "click ", function () { Map.openinfowindow (Infowindow, point); });
If you can't tolerate the above two points, use a custom marker to create a property label. Although the code looks a bit more. But the hierarchy is clear.
"Baidu Map API" Have you ever seen a property map? Do you know how the property label was created?
Http://www.cnblogs.com/milkmap/archive/2011/04/18/2019906.html
"Baidu Map API"--how to make a simple property label with label
Start building with 50+ products and up to 12 months usage for Elastic Compute Service
1 on 1 presale consultation
24/7 Technical Support 6 Free Tickets per Quarter Faster Response
Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.
A comprehensive suite of global cloud computing services to power your business
Payment Methods We Support
