百度地图使用小记

Posted 2020-09-19 wdcwy

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);
})

到这里，大功告成~~~