1. 程式人生 > >百度地圖api實例

百度地圖api實例

code href ont current 設置 span info div 控件

<div id="allmap"></div>

<script type="text/javascript" src="http://api.map.baidu.com/api?v=2.0&ak=你的KEY"></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" /> <script type="text/javascript"> var map = new BMap.Map("allmap"); var point = new BMap.Point(113.663941,34.805986);//坐標 var marker = new BMap.Marker(point); // 創建標註 marker.enableDragging(); //marker可拖拽 marker.addEventListener(
"click", function(e){ searchInfoWindow.open(marker); }) var content = <div style="margin:0;line-height:20px;padding:2px;"> +
            ‘<img src="../img/baidu.jpg" style="float:right;zoom:1;overflow:hidden;width:100px;height:100px;margin-left:3px;"/>‘ +
地址:<br/>XXX<br/>電話:<br/>XXX
+ </div>; //創建檢索信息窗口對象 var searchInfoWindow = null; searchInfoWindow = new BMapLib.SearchInfoWindow(map, content, { title : "XX公司", //標題 width : 290, //寬度 height : 105, //高度 panel : "panel", //檢索結果面板 enableAutoPan : true, //自動平移 searchTypes :[ BMAPLIB_TAB_SEARCH, //周邊檢索 BMAPLIB_TAB_TO_HERE, //到這裏去 BMAPLIB_TAB_FROM_HERE //從這裏出發 ] }); var searchInfoWindow1 = new BMapLib.SearchInfoWindow(map, "信息框1內容", { title: "信息框1", //標題 panel : "panel", //檢索結果面板 enableAutoPan : true, //自動平移 searchTypes :[ BMAPLIB_TAB_FROM_HERE, //從這裏出發 BMAPLIB_TAB_SEARCH //周邊檢索 ] }); map.addOverlay(marker); // 將標註添加到地圖中 map.centerAndZoom(point, 15); map.addControl(new BMap.MapTypeControl()); //添加地圖類型控件 map.setCurrentCity("北京"); // 設置地圖顯示的城市 此項是必須設置的 map.enableScrollWheelZoom(true); //開啟鼠標滾輪縮放 function openInfoWindow1() { searchInfoWindow1.open(new BMap.Point(116.319852,40.057031)); } </script>

百度地圖api實例