多应用+插件架构,代码干净,二开方便,首家独创一键云编译技术,文档视频完善,免费商用码云13.8K 广告
# 百度地图文档--避坑 > 加入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> ~~~