zoukankan      html  css  js  c++  java
  • 初学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定位已经完成了,当然还有很多其他功能,但是我暂时还没有使用上,待以后使用的时候,再来追加~~

  • 相关阅读:
    Qt:The CDB Process Terminated!调试失败
    关于【error C3646: 未知重写说明符】的若干种可能性
    QT:圆角设置
    Qt修改图片的背景色及设置背景色为透明的方法
    index首页加载数据库数据方法
    jsp+jstl实现登录验证
    java 分页
    初始Ajax学习笔记
    python wechat
    python json dumps load 区别
  • 原文地址:https://www.cnblogs.com/zlmxy/p/5311762.html
Copyright © 2011-2022 走看看