百度地图使用小记

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

 

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

看看效果~

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

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

1 2 3 4 5 6 7 8 9 10 11 12

// 百度地图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());

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

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

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

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

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19

//这是添加一个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那样的，还需要一个如下代码：

1 2 3 4 5 6 7

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

到这里，大功告成~~~