百度地圖bMap · 從零開始的避坑指南

# 百度地圖文檔--避坑 > 加入bMap模塊 ![](https://box.kancloud.cn/a47862510b047e56572c23ed570d7599_491x168.png) > 添加config文件 ![](https://box.kancloud.cn/99882223f1eaff7d2ce2580b874be103_816x475.png) > open打開地圖 ----需要在win頁面 ![](https://box.kancloud.cn/339c34ad2eb1021d4b48641941d32fc7_270x395.png) 項目參考---具體代碼如下： >打開地圖--從數據庫得到坐標在地圖上標注--將自己的位置設置為地圖中心--點擊顯示導航位置 **注：需要在云編譯之后才可以測試導航（如果底圖沒有顯示，請云編譯），經測試--自定義loader有時會不能用** ~~~ <script type="text/javascript"> apiready = function() { api.parseTapmode(); var header = $api.byId('aui-header'); $api.fixStatusBar(header); var headerPos = $api.offset(header); api.openFrame({ name: 'index_frm', url: './index_frm.html', bounces: false, slidBackEnabled: 'false', rect: { x: 0, y: headerPos.h, w: 'auto', h: 'auto' } }) //百度地圖 map = api.require('bMap'); // 獲取當前位置 map.getLocation({ accuracy: '100m', autoStop: true, filter: 1 }, function(ret, err) { if(ret.status) { var currLon, currLat; //設置當前位置 currLon = ret['lon']; currLat = ret['lat']; //獲取門店坐標 api.ajax({ url: domainName + '/App/Store/mapList', method: 'post', }, function(ret, err) { if(ret) { var shopLocation = []; for(var i = 0; i < ret['data'].length; i++) { shopLocation[i] = { id: ret['data'][i]['store_id'], lon: ret['data'][i]['lon'], lat: ret['data'][i]['lat'] } }; // alert(JSON.stringify( shopLocation )); openMap(currLon, currLat, shopLocation); //將當前位置設置為中心點 } else { alert('獲取門店坐標失敗！'); } }); } else { alert(err.code); } }); //打開地圖 }; function openMap(currLon, currLat, shopLocation) { map.open({ rect: { x: 0, y: 0, }, center: { lon: currLon, lat: currLat }, zoomLevel: 15, showUserLocation: true, fixedOn: 'index_frm', fixed: true }, function(ret) { if(ret.status) { //添加標注-- map.addAnnotations({ annotations: shopLocation, icon: 'widget://wgt/icon.png', draggable: true }, function(ret) { if(ret) { alert(JSON.stringify(ret)); var targetLon, targetLat; for(var i = 0; i < shopLocation.length; i++) { if(shopLocation[i]['id'] == ret['id']) { targetLon = shopLocation[i]['lon']; targetLat = shopLocation[i]['lat']; }; }; //添加導航 map.searchRoute({ id: ret['id'], type: 'drive', policy: 'ecar_time_first', start: { lon: currLon, lat: currLat }, end: { lon: targetLon, lat: targetLat } }, function(ret, err) { if(ret.status) { map.drawRoute({ //在地圖上顯示路線 id: ret['id'], autoresizing: false, styles: { start: { icon: 'widget://wgt/icon.png' }, end: { icon: 'widget://wgt/icon.png' } } }, function(ret) { api.alert({ msg: JSON.stringify(ret) }); }); } else { api.alert({ msg: JSON.stringify(err) }); } }); } }); // alert('地圖打開成功'); } }); } </script> ~~~