首页 > 代码库 > 百度地图使用小记

百度地图使用小记

http://www.abc3210.com/2013/js_10/112.shtml

 

最近公司弄一个楼盘,需要用百度地图来标注一些楼盘信息!下面是一些小记,以后用到也不会那么无语拉~~

看看效果~

技术分享

技术分享

效果没有多复杂,就上面的那样-__,-!~~~

百度地图相关初始化,我估计就不用多说了~~

// 百度地图API功能    
var map = new BMap.Map("allmap"); // 创建Map实例    
//显示具体坐标: new BMap.Point(118.147993,24.486551)    
map.centerAndZoom(‘厦门‘, 12);    
//启用滚轮放大缩小,默认禁用    
map.enableScrollWheelZoom();    
//启用地图惯性拖拽,默认禁用    
map.enableContinuousZoom();    
// 添加默认比例尺控件    
map.addControl(new BMap.ScaleControl());    
//添加默认缩放平移控件    
map.addControl(new BMap.NavigationControl());

初始化完了,我们就开始工作拉,这里要说的时候,开始工作,都是放在

map.addEventListener("tilesloaded",function(){代码放这里});

这个事件里面,这个事件是百度地图加载完后回调事件!

由于是小记,这里就不能那么完整的代码了~

//这是添加一个Label,看过api的都知道这是什么,name是Label的名字,point是定在那个坐标
var label = new BMap.Label(name,{offset:new BMap.Size(-60,-60),position:point});
//看上面的图,你会发现,那是一个自定义图片,这些其实都是可以通过setStyle进行设置任何的CSS属性。
//这里要说的是,里面的属性是驼峰命名的方式。
label.setStyle({
    fontSize: "14px", //字号
    border: "0", //边
    height: "46px", //高度
    width: "136px", //宽
    textAlign: "center", //文字水平居中显示
    padding: "5px 0 0 0", //行高,文字垂直居中显示
    background: "url(/pages/images/2013/map/label-2.png) no-repeat 0 0", //背景图片,这是房产标注的关键!
    color: "#ffffff",
    cursor: "pointer"
});
//为label添加鼠标提示
label.setTitle(name); 
//把label添加到地图上    
map.addOverlay(label);

到这里,其实Label已经可以正常显示了~~但是要实现,鼠标点一下,就出现前面图2那样的,还需要一个如下代码:

var contentString=‘这里是你的html代码‘;
//创建信息窗口对象      
var infoWindow = new BMap.InfoWindow(contentString);
//文本标注点击显示信息窗口
label.addEventListener("click",function(){
     map.openInfoWindow(infoWindow, point);
})

到这里,大功告成~~~

百度地图使用小记