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. JSON: 介绍、应用

    ylbtech-JSON:  介绍.应用 JSONP(JSON with Padding)是 JSON 的一种“使用模式”,可以让网页从别的域名(网站)那获取资料,即跨域读取数据. 为什么我们从不同的 ...

  2. windows修改远程桌面端口3389

    regedit 按照路径打开,HKEY_LOCAL_MACHINE\SYSTEM\CurrentControlSet\Control\Terminal Server\WinStations\RDP-T ...

  3. PowerDesigner最基础的使用方法入门学习(一)

    1:入门级使用PowerDesigner软件创建数据库(直接上图怎么创建,其他的概念知识可自行学习) 我的PowerDesigner版本是16.5的,如若版本不一样,请自行参考学习即可.(打开软件即是 ...

  4. git基本的使用原理

    一:Git是什么? Git是目前世界上最先进的分布式版本控制系统. 二:SVN与Git的最主要的区别? SVN是集中式版本控制系统,版本库是集中放在中央服务器的,而干活的时候,用的都是自己的电脑,所以 ...

  5. Jmeter（八）HTTPCookie管理器

    Cookie绝对是日常工作以及技术中一个绕不过去的‘角色’,正常各种各样的业务需要Cookie的存在.Jmeter中也有支持发送Cookie的组件,但是,仅是后话:在此还是有必要先记一记Cookie到 ...

  6. linux下开启某个端口的方法：可用于SQL

  7. Linux下用node-inspector实现NodeJS远程调试开发

    1.首先安装 node-inspector npm install -g node-inspector -g表示全局安装,如果像我一样安装失败,再试几次,npm偶尔就会这样抽风... 这一步是关键的, ...

  8. (转)C#实现注册码

    原文地址:http://www.cnblogs.com/netcorner/archive/2011/08/31/2911922.html 开发软件时,当用到商业用途时,注册码与激活码就显得很重要了. ...

  9. Centos下安装Docker集群管理工具Shipyard

    一. Docker Shipyard是什么 ? shipyard是一个开源的docker管理平台,其特性主要包括: 支持镜像管理.容器管理. 支持控制台命令 容器资源消耗监控 支持集群swarm,可以 ...

  10. java的Map遍历

    java中的map遍历有多种方法,从最早的Iterator,到java5支持的foreach,再到java8 Lambda,让我们一起来看下具体的用法以及各自的优缺点 先初始化一个mappublic ...