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

引入百度api

1.4api版本 转化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 https://www.wendangku.net/doc/477803172.html,bel("海辉房产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(https://www.wendangku.net/doc/477803172.html,/data/icons/CrystalClear/128x128/actions/gohome.p ng)", //背景图片，这是房产标注的关键！

"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 https://www.wendangku.net/doc/477803172.html,Window("Person" + i);//定义显示信息

this.openInfoWindow(infoWin);

}); 效果如下