| <!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=gbk" /> |
| <title>百度地图</title> |
| </head> |
| <body style="margin:0;padding:0;background:#fff;"> |
| |
| <script src="http://api.map.baidu.com/api?v=1.3" type="text/javascript"></script> |
| <div style="border-bottom: #eaeaea 1px solid; border-left: #eaeaea 1px solid; width: 1002px; height: 318px;font-size:12px;border-top: #eaeaea 1px solid; border-right: #eaeaea 1px solid;" id="mapcontainer"> </div> |
| <script type="text/javascript"> |
| var map = new BMap.Map("mapcontainer"); |
| // 创建地图实例 |
| var point = new BMap.Point(121.38639939,28.48805793); |
| // 创建点坐标 |
| map.centerAndZoom(point, 15); |
| map.addControl(new BMap.NavigationControl()); |
| //导航控件 |
| var opts = {offset: new BMap.Size(150, 5)} |
| // 防止重复 设置偏移值 |
| map.addControl(new BMap.ScaleControl(opts)); |
| //比例尺控件 |
| map.addControl(new BMap.OverviewMapControl()); |
| //一个缩略图控件 |
| map.addControl(new BMap.MapTypeControl()); |
| //地图类型控件 |
| map.setCurrentCity("xxxxxxxxxxx"); |
| map.enableScrollWheelZoom(); // 启动鼠标滚轮操作 |
| map.enableKeyboard(); //启动键盘操作 |
| map.enableContinuousZoom(); // 开启连续缩放效果 |
| map.enableInertialDragging(); // 开启惯性拖拽效果 |
| //标注 |
| var marker = new BMap.Marker(point); // 创建标注 |
| map.addOverlay(marker); // 将标注添加到地图中 |
| marker.setAnimation(BMAP_ANIMATION_BOUNCE); //跳动的动画 |
| //监听标注事件 |
| marker.addEventListener("click", function(){ |
| alert("xxxx"); |
| }); |
| //信息窗口 |
| var opts = { |
| width : 180, // 信息窗口宽度 |
| height: 135, // 信息窗口高度 |
| title : '<a href="#" title="" target="_blank"><img src="#" style="margin:0 0 0 14px;" width="49" height="49" border="0" alt=""/></a><a href="#" title="#" target="_blank"><img src="#" style="margin:0 0 0 14px;" width="49" height="49" border="0" alt=""/></a><a href="#" title="#" target="_blank"><img src="#" style="margin:0 0 0 14px;" width="49" height="49" border="0" alt=""/></a><br><b>名称:</b>xxxxx<br><b>联系电话:</b>xxx<br><b>联系地址:</b>xxx' // 信息窗口标题 |
| } |
| var infoWindow = new BMap.InfoWindow("", opts); // 创建信息窗口对象 |
| map.openInfoWindow(infoWindow, map.getCenter()); // 打开信息窗口 |
| </script> |
| <p> </p> |
| |
| </body> |
| </html> |