初學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定位已經完成了,當然還有很多其他功能,但是我暫時還沒有使用上,待以后使用的時候,再來追加~~

 


免責聲明!

本站轉載的文章為個人學習借鑒使用,本站對版權不負任何法律責任。如果侵犯了您的隱私權益,請聯系本站郵箱yoyou2525@163.com刪除。



 
粵ICP備18138465號   © 2018-2025 CODEPRJ.COM