摘要：
最近调整地图的时候发现没办法在标注点上写文字所以百度到了一种方法，代码如下
var map = new BMap.Map("container"); //创建地图容器
var point = new BMap.Point(116.404, 39.915); //创建一个点
map.centerAndZoom(point, 15); //设立中心点和地图级别，就是初始化地图
var myLabel = new BMap.Label("海辉房产 21000元", //为lable填写内容
{offset:new BMap.Size(-60,-60), //label的偏移量，为了让label的中心显示在点上
position:point}); //label的位置
myLabel.setTitle("我是文本标注label"); //为label添加鼠标提示
map.addOverlay(myLabel); //把label添加到地图上
显示的样式如图
label最棒的一点是，它不仅仅是文本标签而已，还能写成<a></a>链接的方式。
这样，你的label可以链接到任意一个网页上。
var myLabel = new BMap.Label("<a href='http://dev.baidu.com/wiki/static/index.htm'>百度地图API 0元</a>", //为lable填写内容
下面是我再应用中的一个例子
<!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" />
<title>地图展示</title>
<style type="text/css">
#allmap {width: 100%;height: 400px;overflow: hidden;margin:0;font-family:"微软雅黑";}
.addlabel {
padding: 0 10px 0 10px;
text-align: center;
position: relative;
z-index: 0;
border-radius: 5px;
cursor: pointer;
background: #5575ba;
color: #fff;
line-height: 25px;
border: 1px solid #fff;
}
.addlabel i {
width: 0;
height: 0;
border-left: 8px solid transparent;
border-right: 8px solid transparent;
border-top: 8px solid #5575ba;
font-size: 0;
line-height: 0;
position: absolute;
top: 23px;
left: 35%;
}
.info{
position:relative;bottom:80px;font-size:16px;filter:alpha(opacity=70); -moz-opacity:0.7; -khtml-opacity: 0.7; opacity: 0.7;background:#000;color:#fff;height:80px
}
.info h4{
line-height:30px;margin-left:10px;font-weight:normal;margin-top:0;margin-bottom:0;
}
.info p{
line-height:25px;font-size:14px;margin-top:0;margin-bottom:0;margin-left:10px;
}
</style>
<script type="text/javascript" src="http://api.map.baidu.com/api?v=2.0&ak=w2vTPrq1x9qMg7mFqLK9mkEUjjEvZvxd"></script>
</head>
<body>
<div id="allmap"></div>
<script type="text/javascript">
var map = new BMap.Map("allmap"); //创建地图容器
var point = new BMap.Point(123.539692,41.888218); //创建一个点
map.centerAndZoom(point, 10);
map.addControl(new BMap.NavigationControl());
var data_info = [
[123.835582,42.034496,"观陵山墓园","<img src='http://www.zgbzfw.com/d/file/content/2016/07/5795918c222d2.jpg'><div class='info'><h4>观陵山墓园</h4><p>地址：横道河子镇上石碑山村</p></div>"],
[123.650255,42.03479,"陶然寝园","<img src='http://www.zgbzfw.com/d/file/content/2016/07/5795960180ca0.jpg'><div class='info'><h4>陶然寝园</h4><p style='line-height:25px;font-size:14px;'>地址：马刚乡柳条河村北杭州东路</p>"],
[123.704303,42.043901,"永乐青山墓园","<img src='http://www.zgbzfw.com/d/file/content/2016/07/57908e47cf883.jpg'><div class='info'><h4>永乐青山墓园</h4><p>地址：马刚乡下寺村南山永乐桥南</p>"],
[123.94433,42.280428,"八宝岭公墓","<img src='http://www.zgbzfw.com/d/file/content/2016/07/5795918c222d2.jpg'><div class='info'><h4>八宝岭公墓</h4><p>地址：铁岭县其他种畜场八宝岭村</p>"],
[124.030858,42.228718,"大河贝墓园","<img src='http://www.zgbzfw.com/d/file/content/2016/07/579074d9ed9d7.jpg'><div class='info'><h4>大河贝生态息园</h4><p>地址：铁岭市大甸子镇新坟村</p>"],
[124.146674,42.006219,"福禄陵园","<img src='http://www.zgbzfw.com/d/file/content/2016/07/57907501c88a2.jpg'><div class='info'><h4>福禄园生态公益陵园</h4><p>地址：抚顺市东洲区哈达镇下年马洲村</p>"],
[123.770847,41.834666,"福山公墓","<img src='http://www.zgbzfw.com/d/file/content/2016/07/5795918c222d2.jpg'><div class='info'><h4>福山公墓</h4><p>地址：抚顺市望花区鞍山路工农街</p>"],
[123.920351,41.905174,"高山息园","<img src='http://www.zgbzfw.com/d/file/content/2016/07/57957ab415012.jpg'><div class='info'><h4>高山息园<p>地址：殡仪馆北行500米</p>"],
[123.611033,41.907617,"纪念林","<img src='http://www.zgbzfw.com/d/file/content/2016/07/5795918c222d2.jpg'><div class='info'><h4>沈阳骨灰入土植树纪念林</h4><p>地址：辽宁省沈阳市东陵区赵家沟194号</p>"],
[123.560548,41.896696,"回龙岗革命公墓","<img src='http://www.zgbzfw.com/d/file/content/2016/07/5795784e14dcd.jpg'><div class='info'><h4>回龙岗革命公墓</h4><p>地址：辽宁省沈阳市东陵区</p>"],
[123.687135,42.109078,"骏龙泉墓园","<img src='http://www.zgbzfw.com/d/file/content/2016/07/5790753466f95.jpg'><div class='info'><h4>骏龙泉墓园</h4><p>地址：新台子镇依路村 </p>"],
[123.99517,41.714241,"坤龙公墓","<img src='http://www.zgbzfw.com/d/file/content/2016/07/57907549645f2.jpg'><div class='info'><h4>坤龙公墓</h4><p>地址：抚顺县其他县救兵乡连刀村</p>"],
[123.711393,41.688497,"龙泉古园","<img src='http://www.zgbzfw.com/d/file/content/2016/07/5790757ec72b3.jpg'><div class='info'><h4>龙泉古园</h4><p>地址：东陵区祝家镇下高士村哈达屯</p>"],
[123.183991,42.14544,"龙生墓园","<img src='http://www.zgbzfw.com/d/file/content/2016/07/5790759e731d4.jpg'><div class='info'><h4>龙生墓园</h4><p>地址：新民市其他东蛇山子乡(近辽河) </p>"],
[124.014559,41.909107,"龙山息园","<img src='http://www.zgbzfw.com/d/file/content/2016/07/5795918c222d2.jpg'><div class='info'><h4>龙山息园</h4><p>地址：抚顺市前甸村靠山镇</p>"],
[123.837645,42.272939,"帽山公墓","<img src='http://www.zgbzfw.com/d/file/content/2016/07/579075b860550.jpg'><div class='info'><h4>帽山公墓</h4><p>地址：铁岭市银州区帽山风景区</p>"],
[123.416541,42.456123,"菩遥山墓园","<img src='http://www.zgbzfw.com/d/file/content/2016/07/579075d8679f0.jpg'><div class='info'><h4>菩遥山墓园</h4><p>地址：十间房菩遥山(203国道旁)</p>"],
[123.205464,42.192536,"圣河山息园","<img src='http://www.zgbzfw.com/d/file/content/2016/07/579575b65ba2c.jpg'><div class='info'><h4>圣河山生态息园</h4><p>地址：新民市陶家屯村</p>"],
[123.581393,41.875673,"盛京寝园","<img src='http://www.zgbzfw.com/d/file/content/2016/07/579075f4885f7.jpg'><div class='info'><h4>盛京寝园</h4><p>地址：英达镇英达村 沈阳绕城高速公路旁</p>"],
[123.84567,42.133904,"双龙山公墓","<img src='http://www.zgbzfw.com/d/file/content/2016/07/579076177cfae.jpg'><div class='info'><h4>双龙山公墓</h4><p>地址：李千户镇李千户镇大会村</p>"],
[124.076667,42.515132,"双龙台墓园","<img src='http://www.zgbzfw.com/d/file/content/2016/07/5795918c222d2.jpg'><div class='info'><h4>双龙台墓园</h4><p>地址：开原市其他城郊乡偏坡台村</p>"],
[123.539936,41.596519,"塔山公墓","<img src='http://www.zgbzfw.com/d/file/content/2016/07/579574919b068.jpg'><div class='info'><h4>塔山公墓</h4><p>地址：苏家屯区陈相镇塔山林场</p>"],
[123.675918,41.903515,"天山墓园","<img src='http://www.zgbzfw.com/d/file/content/2016/07/57956c6dbf638.jpg'><div class='info'><h4>天山墓园</h4><p>地址：棋盘山国际旅游开发区森林路99号</p>"],
[123.457955,41.590367,"天台山墓园","<img src='http://www.zgbzfw.com/d/file/content/2016/07/5790764bd0a2a.jpg'><div class='info'><h4>天台山墓园</h4><p>沙河镇前三道岗子村东300米 </p>"],
[123.737211,41.763489,"卧龙公墓","<img src='http://www.zgbzfw.com/d/file/content/2016/07/57956bbe025bc.jpg'><div class='info'><h4>卧龙公墓</h4><p>地址：东陵区王滨沟乡尖山子村</p>"],
[123.179208,41.713196,"西郊卧龙墓园","<img src='http://www.zgbzfw.com/d/file/content/2016/07/57956bbe025bc.jpg'><div class='info'><h4>西郊卧龙墓园</h4><p>地址：大潘镇马贝村北走100米</p>"],
[123.793189,41.777613,"中华寺墓园","<img src='http://www.zgbzfw.com/d/file/content/2016/07/579568d1da2ea.jpg'><div class='info'><h4>中华寺墓园</h4><p>地址：抚顺市王滨乡中华寺村 </p>"],
[124.062915,41.915264,"玉山生态墓园","<img src='http://www.zgbzfw.com/d/file/content/2016/07/5790766603b6a.jpg'><div class='info'><h4>玉山生态墓园</h4><p>地址：抚顺市前甸镇关岭村东山</p>"],
[123.853658,42.290895,"元宝山墓园","<img src='http://www.zgbzfw.com/d/file/content/2016/07/5795918c222d2.jpg'><div class='info'><h4>元宝山墓园</h4><p>地址：铁岭市银州区黄金沟村 </p>"],
[122.881808,42.076695,"仙人台公墓","<img src='http://www.zgbzfw.com/d/file/content/2016/07/579567a2451b3.jpg'><div class='info'><h4>仙人台公墓</h4><p>地址：新民市高台子乡腰高台子村</p>"]
];
for (var i=0;i<data_info.length;i++) {
addLabel(data_info[i]);
};
function addLabel(data){
var point = new BMap.Point(data[0], data[1]);
var myLabel = new BMap.Label('<div class="addlabel">'+data[2]+'<i style="border-left: 8px solid transparent; border-right: 8px solid transparent; border-top: 8px solid rgb(85, 117, 186);"></i></div>', //为lable填写内容
{offset:new BMap.Size(-20,0), //label的偏移量，为了让label的中心显示在点上
position:point}); //label的位置
myLabel.setStyle({
color : "#fff",
fontSize : "14px",
backgroundColor :"0.05",
border :"0",
fontWeight :"normal"
});
myLabel.setTitle(data[2]); //为label添加鼠标提示
map.addOverlay(myLabel);
addClickHandler(data[3],myLabel);
}
function addClickHandler(content,myLabel){
myLabel.addEventListener("click",function(e){
openInfo(content,e)}
);
}
var opts = {
width : 250, // 信息窗口宽度
height: 250, // 信息窗口高度
// title : "信息窗口" , // 信息窗口标题
enableMessage:true//设置允许信息窗发送短息
};
function openInfo(content,e){
var p = e.target;
var point = new BMap.Point(p.getPosition().lng, p.getPosition().lat);
var infoWindow = new BMap.InfoWindow(content,opts); // 创建信息窗口对象
map.openInfoWindow(infoWindow,point); //开启信息窗口
}
</script>
</body>
</html>
显示样式
扫一扫
2276
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
