百度地图HTML接口
<!DOCTYPE html> <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <meta name="viewport" content="initial-scale=1.0, user-scalable=no" /> <style type="text/css"> body, html{width: 100%;height: 100%;margin:0;font-family:"微软雅黑";} #allmap {height: 600px;width:100%;overflow: hidden;} #result {width:100%;font-size:12px;} dl,dt,dd,ul,li{ margin:0; padding:0; list-style:none; } dt{ font-size:14px; font-family:"微软雅黑"; font-weight:bold; border-bottom:1px dotted #000; padding:5px 0 5px 5px; margin:5px 0; } dd{ padding:5px 0 0 5px; } li{ line-height:28px; } </style> <script type="text/javascript" src="http://api.map.baidu.com/api?v=2.0&ak=QfT1nxn0agjht4lGTgCfV4zD"></script> <script type="text/javascript" src="http://api.map.baidu.com/library/SearchInfoWindow/1.5/src/SearchInfoWindow_min.js"></script> <link rel="stylesheet" href="http://api.map.baidu.com/library/SearchInfoWindow/1.5/src/SearchInfoWindow_min.css" /> <title></title> </head> <body> <div id="allmap"> </div> </body> </html>
文内JS代码(博文中不能带script标签):
// 百度地图API功能 var map = new BMap.Map('allmap'); var poi = new BMap.Point(${bean.dictionaryExt.string1}); map.centerAndZoom(poi, 16); map.enableScrollWheelZoom(); var content = '<div style="margin:0;line-height:20px;padding:2px;">' + '县 市 区:${bean.dictionaryExt.name} <br/>'+ //'<img src="../img/baidu.jpg" alt="" style="float:right;zoom:1;overflow:hidden;width:100px;height:100px;margin-left:3px;"/>' + '地 址:${bean.defaultValue}<br/>'+ '服务时间:${bean.dictionaryExt.description} <br/>'+ '电 话:${bean.dictionaryExt.string2!?html}' + '</div>'; //创建检索信息窗口对象 var searchInfoWindow = null; searchInfoWindow = new BMapLib.SearchInfoWindow(map, content, { title : "XXXX", //标题 width : 290, //宽度 height : 105, //高度 panel : "panel", //检索结果面板 enableAutoPan : false, //自动平移 searchTypes :[ BMAPLIB_TAB_SEARCH, //周边检索 BMAPLIB_TAB_TO_HERE, //到这里去 BMAPLIB_TAB_FROM_HERE //从这里出发 ] }); var marker = new BMap.Marker(poi); //创建marker对象 //marker.enableDragging(); //marker可拖拽 marker.addEventListener("click", function(e){ searchInfoWindow.open(marker); }) map.addOverlay(marker); //在地图中添加marker
附:百度地图坐标拾取