百度地图网页lbs



<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
<title>百度地图API</title>
<script type="text/javascript" src="http://api.map.baidu.com/api?v=1.1&services=true"></script>
</head>

<body>
<div style="width:700px;height:600px;border:1px solid gray" id="container"></div>
</body>
</html>
<script type="text/javascript"> 
var map = new BMap.Map("container");
var point = new BMap.Point(121.44332122802734, 31.19484519958496);
var marker = new BMap.Marker(point);
var opts = {
  width : 400,     // 信息窗口宽度
  height: 100,     // 信息窗口高度
  title : "三台子站"  // 信息窗口标题
}
 var sContent =
"<h4 style='margin:0 0 5px 0;padding:0.2em 0'>三台子站</h4>" + 
"<a href='http://www.wangjianblog.com'><img style='float:left;margin:4px' id='imgDemo' src='http://www.wangjianblog.com/wp-content/uploads/2012/02/mapdemo.jpg' width='200' height='130' title='三台子站' border='0'/></a>" + 
"<p style='margin:0;line-height:1.5;font-size:12px'>位于黄河北大街与松山路交会处南侧。</br>公交线路:217、236、232、138、190、255、381、382、294、326等。</p>" + 
"</div>";
var opts = {anchor: BMAP_ANCHOR_TOP_RIGHT, offset: new BMap.Size(10, 10)};
map.addControl(new BMap.NavigationControl(opts)); 
map.centerAndZoom(point, 14);                      // 设置中心点坐标,和地图级别。更重要的是初始化地图
map.addOverlay(marker);

var infoWindow = new BMap.InfoWindow(sContent);  // 创建信息窗口对象

 
marker.addEventListener("click", function(){          
   this.openInfoWindow(infoWindow);
   //图片加载完毕重绘infowindow
   document.getElementById('imgDemo').onload = function (){
       infoWindow.redraw();
	   
   }
});
 
map.openInfoWindow(infoWindow9, map.getCenter());      // 打开信息窗口
 
</script>




你可能感兴趣的:(百度地图网页lbs)