台州温岭做网站请找我们 (专业建站 | 诚信服务) 13958630945 在线客服 联系技术

佳源设计|台州网站建设|佳源网页设计

网站当前位置: 首页>>网站设计_Css样式>>百度地图带缩略图(多张)API
做网站JS特效
 
网站建设疑难
 
网站设计_图象处理
 
网站设计_Css样式
 
网站建设_Flash疑难
 
手机微网站建设
 
 建站知识搜索
 

台州网站建设
 
网站优化
 
提交疑问
 网站设计_Css样式 > 百度地图带缩略图(多张)API

百度地图带缩略图(多张)API

3631次浏览
2015-09-04
 <!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">&nbsp;</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>&nbsp;</p>
 <!--地图 end-->
 </body>
 </html>

页面所在本站地址: http://www.52-life.net/N_map_baidu.htm
上一篇 >>CSS3 Unicode转码
下一篇 >>html中的img和div的间距如何去除