百度地图api使用文档marker标注label使用.docVIP

引入百度api script type=text/javascript src=/api?v=1.4/script 1.4api版本 script type=text/javascript src=/library/MapWrapper/1.2/src/MapWrapper.min.js/script 转化gps坐标google坐标用 初始化地图 var myMap = new BMap.Map(divMap); //divMap为要在id为divMap的div中 myMap.centerAndZoom(new BMap.Point(116.404, 39.915), 12);//地图显示中心坐标为1 16.404,39.915，放大级别为12 myMap.enableScrollWheelZoom(); //允许鼠标滚轮滑动放大缩小地图 添加label 图1 var point=new BMap.Point(116.404, 39.915);//label显示的位置 var myLabel = new BMap.Label(海辉房产 21000元, //为lable填写内容 {offset:new BMap.Size(-60,-60), //label的偏移量，为了让label 的中心显示在点上 position:point}); //label的位置 myLabel.setTitle(我是文本标注label); myLabel.setTitle(我是文本标注label);//为label添加鼠标提示 myLabel.setStyle({ //给label设置样式，任意的CSS都是可以的 color:red, //颜色 fontSize:14px, //字号 border:0, //边 height:120px, //高度 width:125px, //宽 textAlign:center, //文字水平居中显示 lineHeight:120px, //行高，文字垂直居中显示 background:url(/data/icons/CrystalClear/128x128/actions/gohome.png), //背景图片，这是房产标注的关键！ cursor:pointer }); myMap.addOverlay(myLabel); //把label添加到地图上 以上设置效果如图1 添加自定义marker 自定义marker图标样式默认为红色水滴形式下面代码为更改图标样式 var iconSelf = new BMap.Icon(self.png, new BMap.Size(20, 32), { //设置图标显示图片 anchor: new BMap.Size(10, 30) var mkrSelf = new BMap.Marker(new BMap.Point(116.250 + i * 0.01, 39.910), { //设置位置 icon: iconSelf }); myMap.addOverlay(mkrSelf); //添加到地图中 设置效果如下 默认图标如下 添加maker监听鼠标放上事件及显示信息 mkrSelf .addEventListener(mouseover, function(){ var infoWin = new BMap.InfoWindow(Person + i);//定义显示信息 this.openInfoWindow(infoWin); }); 效果如下