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. [UE4]Overlay

    Overlay容器的子控件叠加,没有z-order属性设置,只能在编辑器中调整前后层级,也不能设置位置.可以理解是Canvas Panel的简化控件

  2. [UE4]碰撞的随机性

    物理引擎(包括碰撞)的计算具有随机性 原因: 一.每一帧的时间并不是严格相等 二.浮点数计算不是完全准确(两个浮点数运算,结果不可重复) 影响 在左边窗口(服务器端)打几发子弹把其中3个立方体的位置打 ...

  3. Centos 7: 改变docker的image存放目录

    1.创建新的数据目录 mkdir /data/docker 2.关闭docker进程 systemctl stop docker 3.修改配置文件/usr/lib/systemd/system/doc ...

  4. Javascript-多个数组是否有一样值

    //判断给出的所有数组 是否都有一样的值 function arrIsEqual(){ var array=[]; for(var i=0;i<arguments.length;i++){ ar ...

  5. javascript-时间戳

    // 获取当前时间戳(以s为单位) var timestamp = Date.parse(new Date()); timestamp = timestamp / 1000; console.log( ...

  6. 学习docker后的个人理解

    一.什么是docker Docker 是一个开源的应用容器引擎,基于 Go 语言 并遵从Apache2.0协议开源.可以让开发者打包他们的应用以及依赖包到一个轻量级.可移植的容器中,然后发布到任何流行 ...

  7. openstack cpu pinning

    为了减少CPU竞争,提高CPU cache命中率,可以把guest的vcpu pin到host的物理CPU上. 在openstack中,可以添加以下到flavor extra specs: hw:cp ...

  8. solr7.4 安装与使用

    1.solr7环境要求 solr7需要java8环境,且需要在环境变量中添加 JAVA_HOME变量. 2.solr 安装 下载地址 https://lucene.apache.org/solr/mi ...

  9. ELK集群部署实例（转）

    转载自:http://blog.51cto.com/ckl893/1772287,感谢原博. 一.ELK说明 二.架构图 三.规划说明 四.安装部署nginx+logstash 五.安装部署redis ...

  10. nodejs开篇基础<①>

    1.安装相关 //安装brew Homebrew ruby -e "$(curl -fsSL https://raw.githubusercontent.com/Homebrew/insta ...