百度地圖api例項練習
阿新 • • 發佈：2019-01-27
<!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=utf-8" /> <title>無標題文件</title> <script type="text/javascript" src="http://api.map.baidu.com/api?v=1.3"></script> <style> #mapbox{width:850px;height:420px; position:absolute; background-color:#CCC; border:1px solid #9CF; font-size:12px;left:200px; top:50px;} #mapbox #map{width:600px;height:400px; float:left;} #mapbox #results{width:250px; margin-top:10px; float:right;} .mapheader{ height:25px;width:250px; float:right; overflow:hidden;} #mapbox h2{ margin:1px; padding-left:10px; height:20px; line-height:20px; font-size:12px; color:#0066CC; font-weight:100; background:#9CF; cursor:move} #mapbox .close{ display:block; position:absolute; right:10px; top:0px; line-height:22px; text-decoration:none; color:#0000} </style> </head> <body> <div id="mapbox"> <h2 onmousedown="drag(this.parentNode,event)">百度地圖<a href="javascript:" onclick="document.getElementById('div').style.display='none'" class="close">×</a></h2> <div class="mapheader"><input type="text" id="searchtext" /><input type="button" value="搜尋" id="searchbt" onclick="serachlocal()" /> </div> <div id="map"></div> <div id="results"></div> <div id="mapx"></div> <div id="mapy"></div> <div id="level"></div> </div> <script type="text/javascript"> var map = new BMap.Map("map"); // 建立地圖例項 var point = new BMap.Point(116.404, 39.915); // 建立點座標 map.centerAndZoom(point, 15); // 初始化地圖，設定中心點座標和地圖級別 /* 1. NavigationControl：地圖平移縮放控制元件，預設位於地圖左上方，它包含控制地圖的平移和縮放的功能。 OverviewMapControl：縮略地圖控制元件，預設位於地圖右下方，是一個可摺疊的縮略地圖。 ScaleControl：比例尺控制元件，預設位於地圖左下方，顯示地圖的比例關係。 MapTypeControl：地圖型別控制元件，預設位於地圖右上方。 CopyrightControl：版權控制元件，預設位於地圖左下方。 */ //配置控制元件引數 //var opts = {type: BMAP_NAVIGATION_CONTROL_SMALL} //map.addControl(new BMap.NavigationControl(opts)); map.addControl(new BMap.NavigationControl()); map.addControl(new BMap.ScaleControl()); //map.addControl(new BMap.OverviewMapControl()); //map.addControl(new BMap.MapTypeControl()); //map.setCurrentCity("台州"); /* var marker = new BMap.Marker(point); // 建立標註 map.addOverlay(marker); var opts = { //width : 250, // 資訊視窗寬度 //height: 100, // 資訊視窗高度 title : "Hello" // 資訊視窗標題 } var infoWindow = new BMap.InfoWindow("World", opts); // 建立資訊視窗物件 map.openInfoWindow(infoWindow, map.getCenter()); // 開啟資訊視窗 */ map.enableScrollWheelZoom();//滾輪縮放事件 //map.enableKeyboard(); //鍵盤方向鍵縮放事件 map.enableContinuousZoom(); // 開啟連續縮放效果 //map.enableInertialDragging(); // 開啟慣性拖拽效果 map.addEventListener("click", function(e){ //點選事件 //alert(e.point.lng + ", " + e.point.lat); document.getElementById("mapx").innerHTML="滑鼠當前x位置:"+e.point.lng; document.getElementById("mapy").innerHTML="滑鼠當前y位置:"+e.point.lat; document.getElementById("level").innerHTML="縮放等級:"+this.getZoom(); }); map.addEventListener("dragend", function(){ //拖拽事件 var center = map.getCenter(); document.getElementById("mapx").innerHTML="拖拽後中心x位置:"+center.lng; document.getElementById("mapy").innerHTML="拖拽後中心y位置:"+center.lat; document.getElementById("level").innerHTML="縮放等級:"+this.getZoom(); //alert("地圖中心點變更為：" + center.lng + ", " + center.lat); }); map.addEventListener("zoomend", function(){ //縮放事件 //alert("地圖縮放至：" + this.getZoom() + "級"); }); /*自定義搜尋1*/ function serachlocal1(){ //alert(document.getElementById("searchtext").value); var local = new BMap.LocalSearch(map, {renderOptions:{map: map}}); local.search(document.getElementById("searchtext").value); } /*自定義搜尋2*/ function serachlocal(){ var local = new BMap.LocalSearch(map, { renderOptions: { map: map, panel: "results",//結果容器id autoViewport: true, //自動結果標註 selectFirstResult: true //指定到第一個目標 }, pageCapacity: 8 }); local.search(document.getElementById("searchtext").value); } /*自定義搜尋回撥資料 var options = { onSearchComplete: function(results){ if (local.getStatus() == BMAP_STATUS_SUCCESS){ // 判斷狀態是否正確 var s = []; for (var i = 0; i < results.getCurrentNumPois(); i ++){ s.push(results.getPoi(i).title + ", " + results.getPoi(i).address); } document.getElementById("log").innerHTML = s.join(""); } } }; var local = new BMap.LocalSearch(map, options); local.search("公園"); */ function serachlocal3(){ var myGeo = new BMap.Geocoder(); // 將地址解析結果顯示在地圖上，並調整地圖視野 myGeo.getPoint("北京市海淀區上地10街10號", function(point){ if (point) { map.centerAndZoom(point, 16); map.addOverlay(new BMap.Marker(point)); alert(point.lng+"#"+point.lat); var opts = { //width : 250, // 資訊視窗寬度 //height: 100, // 資訊視窗高度 title : "北京市海淀區上地10街10號" // 資訊視窗標題 } var infoWindow = new BMap.InfoWindow("World", opts); // 建立資訊視窗物件 map.openInfoWindow(infoWindow, map.getCenter()); } }, "北京市"); } </script> <script type="text/javascript"> function drag(obj,e){ var e=e ? e : event; var mouse_left=e.clientX-obj.offsetLeft; var mouse_top=e.clientY-obj.offsetTop; var docmousemove=document.onmousemove; var docmouseup=document.onmouseup; document.onselectstart=function(e){return false} document.onmouseup=function(){ document.onmousemove=docmousemove; document.onmouseup=docmouseup; document.onselectstart=function(e){return true} } document.onmousemove=function(ev){ var ev=ev ? ev : event; if(ev.clientX-mouse_left>0&&document.documentElement.clientWidth-(ev.clientX-mouse_left)-obj.offsetWidth+document.documentElement.scrollLeft>0){ obj.style.left=(ev.clientX-mouse_left)+"px"; } if(ev.clientY-mouse_top>0&&document.documentElement.clientHeight-(ev.clientY-mouse_top)-obj.offsetHeight+document.documentElement.scrollTop>0){ obj.style.top=(ev.clientY-mouse_top)+"px"; } } } </script> </body> </html>