第一步要做的是：解决百度地图接口无法访问的问题
解决方法：
1.添加白名单插件，在项目目录下执行
ionic plugin add cordova-plugin-whitelist
2.在index.html头部增加
开始百度地图的开发：
1.初始化：
var initialize = function () {
map = new BMap.Map('mapView');
};
2.定位
var geolocation = function () {
var geolocation = new BMap.Geolocation();
geolocation.getCurrentPosition(
function(res) {
if(this.getStatus() == BMAP_STATUS_SUCCESS){
myLoc = res.point;
posToAddrByBaidu(myLoc);
} else {
UiMsg.toast('failed'+this.getStatus());
}
})
};
百度地图提供的GPS坐标转换接口进行转换
//gps --> baidu location
var posToAddrByBaidu = function (data) {
var Ak = 'EAbtirflULkpVFArYBEyjKUM'; //你应用的AK
var getUrl ='http://api.map.baidu.com/geoconv/v1/?'+ 'coords=' + data.lng +','
+data.lat +';' + data.lng + ',' + data.lat + '&from' + 1 + '&to' + 5 +'&ak=' + Ak ;
var req = {
url: getUrl,
loading: "定位中..."
};
Ajax.do(req).then(
function (res) {
if(!!res.data && res.data.status == '0'){
var point1 = res.data.result[0];
var point2 = res.data.result[1];
//myLoc.lng = 2*point1.x - point2.x;
//myLoc.lat = 2*point1.y - point2.y;
//定位在转换的坐标上
loadLocation(point1.x, point1.y);
//存储当前位置
window.localStorage.setItem('currentPositionX', myLoc.lng);
window.localStorage.setItem('currentPositionY', myLoc.lat);
}
},
function () {
}
);}
3.显示地图
var loadBMap = function () {
var lastPositionX = window.localStorage.getItem('currentPositionX');
var lastPositionY = window.localStorage.getItem('currentPositionY');
if(!!lastPositionX && !!lastPositionY) {
map.centerAndZoom(new BMap.Point(lastPositionX, lastPositionY), 11); // 初始化地图,设置中心点坐标和地图级别
} else {
map.centerAndZoom(new BMap.Point(118.82814, 32.012405), 11); // 初始化地图,设置中心点坐标和地图级别
}
map.addControl(new BMap.MapTypeControl()); //添加地图类型控件
//map.setCurrentCity("南京"); // 设置地图显示的城市 此项是必须设置的
map.enableScrollWheelZoom(true); //开启鼠标滚轮缩放;
//缩放控件
var opts = {type: BMAP_NAVIGATION_CONTROL_ZOOM };
map.addControl(new BMap.NavigationControl(opts));
};
html:
ion-view[view-title="Map"] div.scroll{
height: 100%;
}
比直接用ios开发百度地图简便很多，但是更耗流量，精细度好像也没ios原生开发的高，这也没办法！
、
best wishes~
网友评论