代碼
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<meta name="viewport" content="initial-scale=1.0, user-scalable=no" />
<style type="text/css">
body, html,#allmap {width: 100%;height: 100%;overflow: hidden;margin:0;font-family:"微軟雅黑";} </style> <script type="text/javascript" src="http://api.map.baidu.com/api?v=2.0&ak=sSelQoVi2L3KofLo1HOobonW"></script> <title>文本標注</title> </head> <body> <div id="allmap"></div> </body> </html> <script type="text/javascript"> // 百度地圖API功能 var map = new BMap.Map("allmap"); var point = new BMap.Point(116.417854,39.921988); map.centerAndZoom(point, 15); var opts = { position : point, // 指定文本標注所在的地理位置 offset : new BMap.Size(30, -30) //設置文本偏移量 } var label = new BMap.Label("姓名:張三 電話:13814823567", opts); // 創建文本標注對象 label.setStyle({ color : "red", fontSize : "12px", height : "20px", lineHeight : "20px", fontFamily:"微軟雅黑" }); map.addOverlay(label); var point2 = new BMap.Point(116.121830,39.921940); var opts2 = { position : point2, // 指定文本標注所在的地理位置 offset : new BMap.Size(30, -30) //設置文本偏移量 } var label2 = new BMap.Label("姓名:李四 電話:13814823567", opts2); // 創建文本標注對象 label2.setStyle({ color : "red", fontSize : "12px", height : "20px", lineHeight : "20px", fontFamily:"微軟雅黑" }); map.addOverlay(label2); </script>
效果
可以進行多個標注