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