APP-3-百度地图应用

需要根据上一步完成百度地图应用的测试，本文介绍Hbuilder通过MUI框架完成百度地图的定位。

1.代码部分

<!DOCTYPE html>

<html>

    <head>

        <meta charset="utf-8">

        <meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no" />

        <script src="https://cdn.bootcss.com/jquery/1.9.1/jquery.js"></script>

        <script src="http://api.map.baidu.com/api?v=2.0&ak=PG4DBjFTHfawSwT10GLLn4YZhQCmGYGA"></script>

        <script src="http://developer.baidu.com/map/jsdemo/demo/convertor.js"></script>

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

        <link href="../../css/mui.min.css"  rel="stylesheet"/>

        <link href="../../css/iconfont.css" rel="stylesheet"/>

        <title>地图应用-地图定位</title>

        <style type="text/css">

            body,

            html,

            #allmap {

                width: 100%;

                height: 95%;

                /*overflow: hidden;*/

                font-family: "微软雅黑";

            }

        </style>

    </head>

    <body>

        <header class="mui-bar mui-bar-nav">

            <a class="mui-action-back mui-icon mui-icon-left-nav mui-pull-left"></a>

            <h1 class="mui-title mui-body-font">地图定位</h1>

        </header>

        <div id="allmap">

            地图加载中。。。

        </div>

        <div class="mui-content-padded">

            <button type="button" class="mui-btn mui-btn-block mui-btn-primary" onclick="getGeocode()">

                获取定位信息

            </button>

        </div>

    </body>

    <script type="text/javascript">

        var exchange = {

            enableHighAccuracy: true,

            coordsType: 'bd09ll',

            timeout: 6000,

            maximumAge: 5000,

            provider: 'baidu'

        };

/*        // 扩展API加载完毕后调用onPlusReady回调函数

        document.addEventListener( "plusready", onPlusReady, false );

        // 扩展API加载完毕，现在可以正常调用扩展API

        function onPlusReady() {

            // 获取定位

        }*/

        getlocation();

        function getlocation(){

            // 获取位置信息

            //plus.nativeUI.showWaiting();

            navigator.geolocation.getCurrentPosition(getinfo,exception,exchange);

        }

        function initMap(point){

            // 手机内置地图

/*            var map=new plus.maps.Map("allmap");

            var point = new plus.maps.Point(116.331398,39.897445);*/

            // 百度地图

            map = new BMap.Map("allmap");

            map.addControl(new BMap.NavigationControl());

            map.addControl(new BMap.ScaleControl());

            map.addControl(new BMap.OverviewMapControl());

            map.centerAndZoom(point, 18);

            // 地图滚动大小

            map.enableScrollWheelZoom(true);

            // 创建标注

            var marker = new BMap.Marker(point);

            // 将标注添加到地图中

            map.addOverlay(marker);

            // 跳动的动画

            marker.setAnimation(BMAP_ANIMATION_BOUNCE);

        }

        function getinfo(p){

            var curlat = p.coords.latitude;

            var curlon = p.coords.longitude;

            var curadd = p.addresses;

            //坐标

            console.log(curlat + ',' + curlon);

            var gpsPoint = new BMap.Point(curlon, curlat);

            //坐标转换

            BMap.Convertor.translate(gpsPoint, 0, initMap);

        }

        function exception(e){

            alert(e.Message);

        }

        function getGeocode(){

            getlocation();

        }

    </script>

</html>

2.启动夜神模拟器

　

　调整夜神模拟器自带定位（否则百度地图定位有偏差）

　

　

3.模拟器测试

　3.1Hbuilder运行模拟器

　

　3.2模拟器程序运行

　

　

APP-4-百度地图定位的更多相关文章

  1. Android 百度地图定位(手动+自动) 安卓开发教程

    近由于项目需要,研究了下百度地图定位,他们提供的实例基本都是用监听器实现自动定位的.我想实现一种效果:当用户进入UI时,不定位,用户需要定位的时候,自己手动点击按钮,再去定位当前位置.  经过2天研究 ...

  2. Android使用百度地图定位并显示手机位置后使用前置摄像头“偷拍”

    今天老板让我验证一下技术可行性,记录下来. 需求 :定位手机的位置并在百度地图上显示,得到位置后使用前置摄像头进行抓拍 拿到这个需求后,对于摄像头的使用不太熟悉,于是我先做了定位手机并在百度地图上显示 ...

  3. 百度地图定位SDK 之构想

    百度地图定位 前提 从香港旅游回来,心中油然升起一股热血滂湃,激励自己发现市场需求,向创业奋进,朝着梦想前进. 简介 百度Android定位SDK支持Android1.5以及以上设备,提供: 定位功能 ...

  4. IOS中使用百度地图定位后获取城市坐标,城市名称,城市编号信息

    IOS中使用百度地图定位后获取城市坐标,城市名称,城市编号信息 /**当获取到定位的坐标后,回调函数*/ - (void)didUpdateBMKUserLocation:(BMKUserLocati ...

  5. ios调用百度地图定位遇到的奇葩问题

    app项目过程中需要用到百度地图,然后网上可以查资料看官网文档,最后弄了好几天还是不行,找了各位前辈帮忙虽然解决了,但是把代码拷贝到我的项目时又无法定位了,最后查看了下原因是info配置出了问题,不是 ...

  6. android 百度地图定位功能实现

    历经几天时间,终于把定位功能给实现了,可谓是费劲千辛万苦啊,有定位知识还有图层知识,在这里我把代码给大家贴出来,一起分享一下下啦. package com.example.foreveross.off ...

  7. Android百度地图定位

    在谈到百度地图.如今,每个人都知道这个时候应该可以了吧.而更多的字不拉.直接朝话题. 访问百度地图api您必须应用key,应用在这里key不用说,有官方的文件说明如何应用上述key. 在这里,百度地图 ...

  8. 【MUI】百度地图定位功能

    博主最近进行一款APP开发,需要用到定位功能,经过一番折腾,终于搞定,不废话,代码如下 mui.plusReady(function() { var longitude, latitude; //va ...

  9. Android 给app加入百度地图

    1.获取sha1值 (1)win+R进入cmd窗口 (2)输入以下代码 C:\SoftApplication\javajdk\jdk1.8.0_151\bin>keytool -list -v ...

  10. iOS 学习笔记五 【2016年百度地图定位详细使用方法】

    具体介和配置绍在此就不详述了,详情请看百度地图API文档, 在这里具体讲解下,新版百度地图的定位与反地理编码的使用: 1.导入头文件 #import <BaiduMapAPI_Map/BMKMa ...

随机推荐

  1. LeetCode 搜索二维矩阵 II

    Write an efficient algorithm that searches for a value in an m x n matrix. This matrix has the follo ...

  2. DevOps安装、部署持续集成

    1.重启docker服务,开启iptables转发功能 # systemctl start docker # vi /etc/sysctl.conf # sysctl -p [root@localho ...

  3. [UE4]Tool Tip - 提示信息

    一.每一个Widget都有Tool Tip,在运行时鼠标移动到UI上,就会显示填写的Tool Tip文字   二.Toop Tips的字体样式和大小不可更改.但是可以Tool Tip可以绑定到一个Wi ...

  4. [UE4]小技巧：自动添加函数返回值

    将一个变量拖放到返回节点上面会自动创建响应类型的返回值 同样的,函数参数也可以这样来做:

  5. [UE4]下拉菜单

  6. 解决DevExpress10.2.4版本在VS2012工具箱控件不显示的问题

    DevExpress10.2.4支持vs2010,安装vs2010或找一台装有vs2010的机器安装DevExpress10.2.4 执行DevExpress10.2.4的工具ToolboxCreat ...

  7. Struts2 --简单留言系统

    1.创建数据表,与servlet中相同 2.创建web项目,添加struts2模块,url 选 /*,web.xml中会自动注册struts2,同时src下会自动生成struts2配置文件struts ...

  8. Java——ikanalyzer分词·只用自定义词库

    需要包:IKAnalyzer2012_FF_hf1.jarlucene-core-5.5.4.jar需要文件: IKAnalyzer.cfg.xmlext.dicstopword.dic 整理好的下载 ...

  9. JQuery字符串的操作

    一.String对象属性 1.length属性: length算是字符串中非常常用的一个属性了,它的功能是获取字符串的长度.当然需要注意的是js中的中文每个汉字也只代表一个字符,这里可能跟其他语言有些 ...

  10. 元组,列表的增删改查, for,range 循环

    1. list(增删改查) 列表可以装大量的数据. 不限制数据类型. 表示方式:[] 方括号中的每一项用逗号隔开 列表和字符串一样.也有索引和切片 常用的功能: 1. 增: append() 2. 删 ...