?

樣式：

<style>body,html,div,header{margin:0;padding:0;}#icon_header {width: 100%;height: 45px;line-height: 45px;position: relative;z-index: 5;zoom: 1;vertical-align: middle;background: #fff;margin: auto;text-align: left;border-bottom: 1px solid #ddd;}#icon_header > a {position: absolute;z-index: 5;zoom: 1;top: 0;width: 45px;height: 45px;vertical-align: middle;text-align: center;color: #666;font-size: 1rem;text-decoration: none;}#confirm_location{right: 0;}#icon_header div{text-align: center;}#r-result {width: 90%;background: white;position: absolute;top: 10%;left: 5%;height: 40px;line-height: 40px;border-radius: 4px;box-shadow: 2px 2px 5px rgba(0, 0, 0, 0.3);}#r-result input {border: none;background: none;outline: none;padding-left: 2%;width: 96%; }</style>

HTML：

<header id="icon_header"><div>選擇地址</div><a href="javascript:;" id="confirm_location">確定</a> </header><div id="map_show"></div> <div id="r-result"><input type="text" id="suggestId" placeholder="請輸入地點"/> </div> <div id="searchResultPanel" style="display:none;"></div>

JS:

<!--引入百度地圖API--> <script type="text/javascript" src="http://api.map.baidu.com/api?v=2.0&ak=iBM9rbzTH2dMZW7MbYMYmFgb"></script> <script>function AddMap(){//設置地圖容器高度var screenH=window.innerHeight;var headerH=this.elById("icon_header").offsetHeight;this.elById("map_show").style.height=screenH-headerH+"px";}/*** @param el 地圖初始化容器* @param p 初始化坐標點*/AddMap.prototype.init=function(el,p){var point={lng:116.404113,lat:39.914965};if(p && p.lng && p.lat){point.lng=p.lng;point.lat=p.lat;}this.m = new BMap.Map(el); //實例化地圖this.p = new BMap.Point(point.lng,point.lat);this.m.enableContinuousZoom(); //啟用地圖慣性拖拽this.m.enableScrollWheelZoom(); //啟用滾輪放大縮小this.m.centerAndZoom(this.p, 12); //設置地圖顯示中間點、地圖顯示級別this.addMaker(this.p);this.search(); //搜索this.getLocation();};//獲取坐標點位置AddMap.prototype.getLocation=function(){var _this=this;var confirm=this.elById("confirm_location");confirm.addEventListener("click",function(){var makerPoint=_this.makerPoint();console.log(makerPoint)});};AddMap.prototype.elById=function(id) {return document.getElementById(id);};//添加坐標顯示AddMap.prototype.addMaker=function(location){var mk = new BMap.Marker(location);mk.enableDragging(); //marker可拖拽mk.enableMassClear();this.m.addOverlay(mk); //在地圖中添加markerthis.makerPoint=function(){return mk.getPosition(); //返回當前坐標};};//搜索AddMap.prototype.search=function(){var _this=this;var ac = new BMap.Autocomplete( //建立一個自動完成的對象{"input" : "suggestId","location" : _this.m});ac.addEventListener("onconfirm", function(e) { //鼠標點擊下拉列表后的事件var _value = e.item.value;myValue = _value.province + _value.city + _value.district + _value.street + _value.business;_this.elById("searchResultPanel").innerHTML ="onconfirm<br />index = " + e.item.index + "<br />myValue = " + myValue;_this.setPlace(_this.m);});};//定位到具體位置AddMap.prototype.setPlace=function(m){var _this=this;m.clearOverlays(); //清除地圖上所有覆蓋物function myFun(){var pp = local.getResults().getPoi(0).point; //獲取第一個智能搜索的結果m.centerAndZoom(pp, 15); //設置地圖顯示中間點、地圖顯示級別_this.addMaker(pp);}var local = new BMap.LocalSearch(m, { //智能搜索onSearchComplete: myFun});local.search(myValue);};var mapInclude=new AddMap();//初始化地圖//需傳入容器DOM（id），可傳坐標點定位mapInclude.init("map_show",{lng:104.072247,lat:30.663436});</script>

我這里是針對移動端大小進行的布局，只需要稍微修改一下布局就可以在PC端使用。

頁面初始化：?

搜索：?

點擊右上角確定選取的坐標點：

以上代碼復制粘貼下來即可運行

?

總結

以上是生活随笔為你收集整理的百度地图调用实例的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。