初学HBuilder之MUI框架---实现百度地图定位功能

　　　　最近接触了一款移动端APP框架，CSS库是MUI，JS库是5+Runtime。 个人感觉这两个库使用起来特别方便。

　　　　话不多说，直接上代码：

　　　　这是引用百度地图的JS

<script type="text/javascript" src="http://api.map.baidu.com/api?v=2.0&ak=HR3RRyTsXYdQ3QzzG5yUkg0q"></script>
    <script type="text/javascript" src="http://developer.baidu.com/map/jsdemo/demo/convertor.js"></script>

　　　　这个是MUI封装好的JS，可用来调用移动设备底层功能：

<script src="../js/mui.min.js"></script>

　　　　HTML代码：

　

<div id="allmap">
	地图加载中...
</div>

　　　　JS调用底层：

mui.plusReady(function(){
	plus.geolocation.getCurrentPosition(translatePoint,function(e){
		mui.toast("异常:" + e.message);
	});
});

　　　　最核心的部分，创建地图并且转换坐标：

function translatePoint(position){
	var currentLon = position.coords.longitude;
	var currentLat = position.coords.latitude;
	var gpsPoint = new BMap.Point(currentLon,currentLat);
	BMap.Convertor.translate(gpsPoint,2,initMap); //坐标转换
}
function initMap(point){
	map = new BMap.Map("allmap"); //创建地图
	map.addControl(new BMap.NavigationControl());
	map.addControl(new BMap.ScaleControl());
	map.addControl(new BMap.OverviewMapControl());
	map.centerAndZoom(point,15);
	map.addOverlay(new BMap.Marker(point));

}

　　这样，一个移动端的百度地图GPS定位已经完成了，当然还有很多其他功能，但是我暂时还没有使用上，待以后使用的时候，再来追加~~

 

转载于:https://www.cnblogs.com/zlmxy/p/5311762.html