Ionic2NativeGeolocation-master
说明：&&GPS 定位,Cordova PhoneGap(GPS Location Cordova PhoneGap)
文件列表：
Ionic2NativeGeolocation-master
Ionic2NativeGeolocation-master\README.md
Ionic2NativeGeolocation-master\plugin.xml
Ionic2NativeGeolocation-master\src
Ionic2NativeGeolocation-master\src\android
Ionic2NativeGeolocation-master\src\android\GPSActivity.java
Ionic2NativeGeolocation-master\www
Ionic2NativeGeolocation-master\www\NativeGeolocation.js
近期下载者：
相关文件：Ionic开发实战
折磨的两个月！Ionic从零单排，到项目发布！遇到了很多问题但都一一解决了，此篇文章留作记录。
当初想着因为项目不大人力足够的并且因为团队没有移动开发经验的情况下，是不是能够是用hybrid app来代替原生来完成这个项目，经过一些技术调研之后选择了Ionic。当时是对Ionic一无所知，凭借一些盲目的自信，想着方正有开发文档能有什么问题呢。现在想想都觉得当时有点冲动万一中间出现什么坑或者无法解决的问题都找不到可以咨询的人。不过好歹结果是好的，基本实现了当初需求设计，并且效果还不错。
因为Ionic是基于angularjs框架开发的，所以在使用Ionic之前需要对angularjs有一定的了解。
可以看我另一篇文章：
1.Ionic环境安装
Ionic开发是依赖于Nodejs环境的，所以在开发之前我们需要安装好Nodejs。下载安装：
安装完成之后打开PowerShell输入命令node -v和npm -v验证是否安装成功，如果返回版本号则说明成功。
在PowerShell命令行中执行：
npm install -g cordova ionic
这是使用npm包管理器安装cordova和ionic，-g的意思是全局安装，全局安装后在PowerShell中任何目录下都可以使用cordova和ionic的命令。
PS. 安装过程需要打开VPN翻墙，貌似是资源被墙了，无语。
2.创建Ionic项目
Ionic官网提供了三个项目模板blank、tabs和sideMenu ，参阅：
我们使用blank空模板创建一个我们的应用，并且完成一个简单的tabs导航的小应用，打开PowerShell cd到开发目录，执行：
ionic start myIonic blank
其中myIonic为我们的项目名称
执行过程它会从github下载项目源码，请等待。。。
执行完毕后你到开发目录下查看会发现多了一个名为myIonic的文件夹，这个文件夹就是Ionic项目的所在目录了。
目录下有以下文件：
//google之后这个目录应该是在编译cordova时自定义的脚本命令，方便整合到我们的编译系统和版本控制系统中
//cordova插件的目录，插件的安装下一节详述
//scss文件，发布时编译这个目录下的文件输出到www的css目录中
//我们的开发目录，页面、样式、脚本和图片都放在这个目录下
--index.html
bower.json
//bower配置文件
config.xml
//Ionic的配置文件 ?可以配置app的id，名称、描述起始页和一起其他配置
gulpfile.js
//gulp构建工具的执行文件，在这个文件中创建任务实现编译scss，css、js优化等
ionic.project
//Ionic的项目文件可以配置Ionic命令中livereload的监控文件
package.json
//npm配置文件
在开发初期的调试我们一般会使用浏览器作为我们的调试工具，Ionic提供了一个serve命令为我们的应用创建web站点可以非常方便的调试应用， cd到开发目录下，执行命令：
ionic serve
执行完毕后Ionic会自动帮我们打开我们的默认浏览器并跳转到我们的应用页面，浏览器打开页面时Ionic已经给我们开启了livereload模式，开启之后我们编辑www下的文件后保存时Ionic会通过websocket通知浏览器刷新页面，我们就不用每次修改完毕手动刷新页面了，又极大的提高了我们的工作效率。
PS. 开启livereload后Ionic会默认监听www下面的文件，如果需要自定义的话请编辑ionic.project的watchPatterns来设置需要监听的范围
"name": "myIonic",
"app_id": "",
"watchPatterns": [
"www/js/*",
"www/js/*/*",
"www/*.html",
"www/templates/*.html",
"www/css/*.css"
www/index.html作为我们的程序入口文件，首先编辑这个文件，在body标签中加入
class="bar-positive"&
这段标签对于对Ionic不熟悉的人来说可能有点陌生，Ionic针对移动端自定义了一套样式库，并且使用Angular的指令封装了各个模块，ion-nav-bar是导航页面头部、ion-nav-view是导航内容页面。inde.html入口页面我们已经写完了，接下来我们新建两个我们自己的页面。我们在www目录下新建一个templates文件夹，存放我们的页面并新建页面：tabs.html
作为我们tab应用的主页面：
&ion-tabs class="tabs-icon-top tabs-positive"&
&ion-tab title="Home" icon="ion-home" href="#/tab/home"&
&ion-nav-view name="home-tab"&&/ion-nav-view&
&/ion-tab&
&ion-tab title="About" icon="ion-ios-information" href="#/tab/about"&
&ion-nav-view name="about-tab"&&/ion-nav-view&
&/ion-tab&
&/ion-tabs&
ion-tab为tab应用的底部菜单项 title是菜单按钮显示的文字，icon是菜单按钮图标，href是点击菜单的跳转地址，子元素ion-nav-view是点击菜单后子页面显示的位置，ion-nav-view属性name为该tab的名称，后面添加子页面会详细描述。
然后在app.js中加入该页面的路由
$stateProvider
.state('tabs', {
url: "/tab",
templateUrl: "templates/tabs.html",
$urlRouterProvider.otherwise("/tab");
保存之后页面会自动刷新显示的应该是介个样子：
哈，我们tab应用的大概样子已经出来了，但是现在点击下面的菜单并没有什么反应，接下来我们就要开始添加我们的子页面了，在templates文件夹中新建：home.html、facts.html、about.html
home.html 首页
view-title="Home"&
class="padding"&
class="button icon icon-right ion-chevron-right" href="#/tab/facts"&Scientific Facts&
facts.html
view-title="Facts"&
class="padding"&
class="button icon icon-right ion-chevron-right" href="#/tab/home"&Home&
about.html
view-title="About"&
class="padding"&
ion-view是我们子页面的内容，属性view-title可以设置页面头部的标题名称，添加好文件后我们需要在app.js中加入各个页面的路由，并且需要对之前的tabs路由做一个调整。
$stateProvider
.state('tabs', {
url: "/tab",
abstract: true,
templateUrl: "templates/tabs.html",
.state('tabs.home', {
url: "/home",
'home-tab': {
templateUrl: "templates/home.html"
.state('tabs.facts', {
url: "/facts",
'home-tab': {
templateUrl: "templates/facts.html"
.state('tabs.about', {
url: "/about",
'about-tab': {
templateUrl: "templates/about.html"
$urlRouterProvider.otherwise("/tab/home");
大家发现tabs路由增加了一个abstract字段，该字段在angular中的解释是抽象页面，不能独立作为页面展示只能作为其他页面父页面，当加载子页面之前加载父页面。
其他子页面的路由和tabs路由的配置有所不同名称命名是父路由.子路由的形式，并且增加了一个views字典，字段的key值对应着我们前面所说的tabs.html中ion-nav-view的name属性，表示该路由跳转的页面属于某个tab的子页面，同时修改我们的otherwise默认页为/tab/home。
保存之后浏览器自动刷新，我们来看一下效果。
好了，我们来点点看吧，页面切换Ionic已经帮我们实现了类似原生app的切换动画效果，是不是有一点原生app的感觉了？下面章节我们会实现在移动端的部署。
3.部署到手机和cordova插件的使用
一个简单的Web应用我们已经开发完成了，接下来我们就要做一些部署到移动端之前的准备了。
Ionic支持两个平台ios、android，默认的Ionic项目并没有添加这两个平台，我们需要手动添加，cd到开发目录下执行命令：
ionic platform add android
ionic platform add ios
一般项目都需要两个平台同时部署，所以我们就添加两个，执行完毕之后执行命令查看你已经添加的平台列表：
ionic platform list
Installed platforms: android 4.0.0, ios 3.8.0
Available platforms: amazon-fireos, blackberry10, browser, firefoxos, windows, windows8, wp8
接下来的部署我们分开讲述：
Android部署分真机和虚拟机，其实方法类似，在部署之前需要安装JDK、Android SDK到开发环境中，配置好JDK的JAVA_HOME和Android SDK的ANDROID_HOME到环境变量中去，并把Android SDK安装目录添加到Path中。
配置好之后打开PowerShell输入命令返回正确：
adb version
接下来就简单了，把手机连接到电脑，并开启usb调试模式，执行命令：
ionic run android
Ionic开始编译项目生成apk并远程安装到手机上后自动打开应用，是不是很简单？
ios部署需要一台mac电脑，在mac电脑上面根据本篇ionic的安装过程安装环境之后，添加ios平台到项目，因为apple开发的证书限制我们在没有申请购买apple账号的情况下，使用虚拟机来部署我们的应用，在部署之前需要使用npm安装一个ios-sim插件用来调用模拟器的，执行命令：
sudo npm install -g ios-sim
安装好之后，cd 到开发目录下执行：
sudo ionic build ios
开始编译项目，编译完成之后用Xcode打开开发目录下platform-&ios-&myIonic.xcodeproj的项目文件，Xcode中选择要运行的虚拟机版本并执行快捷键cmd+R运行虚拟机，虚拟机打开后会自动运行你应用。
PS. 为什么不用run ios 命令直接启动虚拟机呢，因为我的环境下执行run会报错，虚拟机会打开但是无法运行程序，找了半天解决解决方案没有结果，索性直接用Xcode了，效果是一样样的
到了这一步我们的app已经部署完毕了，接下来我们要为我们的app添加一个拍照功能，需要引用到cordova插件，而Ionic把一些常用到的插件用angularjs服务做了一层封装： 我们只需要在项目中安装ngCordova插件就可以想使用angularjs的服务一样在我们的项目中调用了，我们先安装ngCordova（安装需要bower包管理器，并打开VPN。。。）：
bower install ngCordova
安装完毕之后再www/index.html中引用
type="text/javascript" src="lib/ngCordova/dist/ng-cordova.js"&&
type="text/javascript" src="cordova.js"&&
PS. ng-cordova.js需要在cordova.js引用之前
并在app.js中添加依赖注入关系，另外我发现一个问题如果安装的ngCordova的0.1.18-alpha版本，在引用时会报错，我撤回0.1.17-alpha版本就没有问题了，不知道是什么原因。
angular.module('starter', ['ionic', 'ngCordova'])
接下来cd到开发目录，我们使用ionic命令来安装插件：
cordova plugin add cordova-plugin-camera
安装完毕之后会在项目目录下的plugins文件夹中多出一个cordova-plugin-camera，这就是我们插件目录。
下面我要在home页面中增加一点按钮调用摄像头，我们先在www/js中新增一个controller.js文件编写以下代码，并在index.html中引用：
(function () {
'use strict'
.module('starter')
.controller("homeCtrl", homeCtrl, ['$cordovaCamera'])
function homeCtrl ($scope, $cordovaCamera) {
$scope.openCamera = function () {
var options = {
quality: 50,
destinationType: Camera.DestinationType.DATA_URL,
sourceType: Camera.PictureSourceType.CAMERA,
allowEdit: true,
encodingType: Camera.EncodingType.JPEG,
targetWidth: 100,
targetHeight: 100,
popoverOptions: CameraPopoverOptions,
saveToPhotoAlbum: false
$cordovaCamera.getPicture(options).then(function(imageData) {
var image = document.getElementById('myImage');
image.src = "data:image/base64," + imageD
}, function(err) {
我们新建了一个homeCtrl并添加$cordovaCamera的引用，在controller中定义一个openCamera方法来调用摄像头，在home.html中加入以下代码：
class="button icon icon-right ion-chevron-right" href="#/tab/facts"&Scientific Facts&
class="button icon icon-right ion-chevron-right" ng-click="openCamera()"&Camera&
增加了一个按钮去调用我们定义的方法openCamera，最后一步在app.js中绑定home路由和controller，在app.js中修改代码：
.state('tabs.home', {
url: "/home",
'home-tab': {
templateUrl: "templates/home.html",
controller:"homeCtrl"
到此我们的app增加的打开摄像头功能已经开发完了，我们来测试下，运行ionic的run方法来看看效果吧。
我们在前面已经说过，在开发前期我们一般会在web中调试，而Ionic为我们提供了非常方面的web调试环境，只需要执行ionic serve就可以实现lievereload，而在部署到移动端后也可以开启livereload的，我们只需要修改下我们run命令参数：
ionic run android
这是android的调试模式，无论在虚拟机上还是在手机上都可以实现livereload，ios则只需要把android修改为ios即可，不用每次开发完成编译再部署！-c是开启客户端日志输出，-s是开启服务器端日志输出。–livereload参数的的意义在于修改生成包中的起始页面地址，修改为远程服务器地址这样就可以做到修改即通知客户端刷新页面了。
5.ios打包、android打包
能使用Ionic来开发app的很可能对Ios和android的app打包发布流程不是很熟悉，我这里简单说明下：
Android的打包比较简单执行命令：
ionic build android -release
找到www/platform目录下生成的apk包，此时的apk还不能被安装到手机上，还需要一步签名操作，大家可以参考：
ipa文件的打包需要现在apple develop网站上注册一个账号，在网站申请生产环境的证书导入到你的开发机中和开发机绑定才可以使用xcode导出，详情参阅：
android使用crosswalk
android内置浏览器大家都知道性能是硬伤，尤其是低端机，所有ionic支持使用crosswalk浏览器代替系统内置浏览器内核，使用crosswalk后性能提升效果比较明显，但是apk的包体积会增大大约20M，是不用取决于项目使用场景。
使用crosswalk非常简单：
ionic browser add crosswalk
执行完成后在插件列表里会增加一个cordova-plugin-crosswalk-webview插件。
安装完成后在打包时会自动下载对应的crosswalk包，如果下载失败尝试使用vpn，下载完成集成过程中我遇到了一些报错，报错的原因大致就是我的android sdk没有安装完全，这个大家在使用时需要注意下。
Ionic作为一个hybrid应用的开发框架总体来说还是很不错的，因为它的开发效率很高，并且可以跨平台的发布这两点可以让很多人心动了。另外Ionic在实际应用中的表现情况是这样的，在IOS平台中运行效率和原生的效果非常好，但是在Android中的就不是太理想了尤其是Android的低端机，不过Ionic的团队对于这方面的性能优化还在不断的努力，希望Ionic未来更牛逼。
另外从这次的项目中体会到了尤其是一些新兴技术在国内的资料太少，遇到问题不得不翻墙去找国外资料，但是碍于英文水平往往过程是非常痛苦的，所以学好英语是非常重要的！！！
最后介绍下这个应用是一款中介行业的房源管理软件，集成了gps、推送（最好用极光推送他们有对phonegap插件的支持）、摄像头拍照、时间控件、文件上传等原生API
用ionic快速开发hybird App（已附源码,在下面+总结见解）
Ionic3项目实战
ionic3+angular4+cordova 项目实例
ionic项目实战-小白踩坑走起【起·持续更新】
Ionic入门开发
IONIC3 打包安卓apk详细过程（大量图文）
没有更多推荐了，GPS定位的经纬度有偏差……该怎么办
[问题点数：40分]
本版专家分：0
CSDN今日推荐
本版专家分：173
本版专家分：23396
2014年4月 荣获微软MVP称号2013年4月 荣获微软MVP称号2012年4月 荣获微软MVP称号2011年4月 荣获微软MVP称号2010年4月 荣获微软MVP称号
2008年12月 移动平台大版内专家分月排行榜第一
2009年3月 移动平台大版内专家分月排行榜第三2009年1月 移动平台大版内专家分月排行榜第三2008年11月 移动平台大版内专家分月排行榜第三
本版专家分：1688
本版专家分：219
本版专家分：0
本版专家分：1285
本版专家分：0
本版专家分：1688
本版专家分：837
本版专家分：0
本版专家分：426
本版专家分：0
匿名用户不能发表回复！|
其他相关推荐
网页获取地理位置，因本次任务是放在微信摇一摇 中使用所以自然而然的就用了微信的地理位置获取 wx.ready(function () {
wx.getLocation({
type: 'wgs84', // 默认为wgs84的gps坐标，如果要返回直接给openLocation用的火星坐标，可传入'gcj02'
最近公司提供了一个学习iOS的机会，问我是否愿意学习iOS，还是继续只做android开发。我感觉非常幸运，能有此机会去学习iOS，当即说要学习iOS开发。
学习了几天啦，做了一个小demo实现了获取经纬度，海拔，航向，及具体位置信息的功能。
iOS使用定位不像android直接指定使用gps，获取网络获取。iOS定位需要使用Core Location框架，它提供了三种技术来获取位置：GPS、
WGS-84转GCJ-02(火星坐标)
CLLocationManager类可以实时的获得我们位置的经纬度，并且可以通过经纬度在MapView上定位:
//创建CLLocationManager对象
CLLocationManager *locationManager = [[CLLocationManager alloc] init];
//设置委托对
1、你要用百度地图的定位坐标，否则是有偏差的
BDLocation location 获取坐标系的时候，你看看你的
LocationClientOption option = new LocationClientOption();option.setCoorType(&bd09ll&);// 可选，默认gcj02，设置返回的定位结果坐标系 是不是设置的
1.原因解释我们在编写android程序时，通过android系统服务之LOCATION_SERVICE得到的经纬度坐标，不论你的provider是不是GPS_PROVIDER，这个坐标都是真实的地理坐标，称之为wgs坐标。因为国家安全的原因，国家规定这个wgs坐标不允许直接出现在网络上，所以各大地图app使用的都是wgs坐标经过加密后产生的假坐标，Google地图以及大多数别的地图使用的是国测局...
GPS返回的经纬度是以火星坐标为准，以此经纬度在Google地球上和Google地图上查找，两者显示存在偏差，本示例解决了此问题
百度坐标和GPS坐标转换在很近的距离时偏差非常接近。
假设你有百度坐标：x1=116.397428，y1=39.90923
把这个坐标当成GPS坐标，通过接口获得他的百度坐标：x2=116.，y2=39.通过计算就可以得到GPS的坐标：
x = 2*x1-x2，y = 2*y1-y2
我们的踩点工作人员一直反应用手机踩回来的gps坐标,在百度地图上偏差非常大,一直怀疑我们的程序有问题; 为了处理这个问题,我们做了专项的分析跟踪.结果证实了手机踩点的精度还是非常高的,我们采集了几套数据与一个专用的gps手机做了对比,偏差都在30m以内,而且这个最大的30m是在第一次测试的时候产生的,受信号问题影响比较大;之后的数据偏差都是在10m以内。然后把采集的数据经过百度地图的坐标转换工具转
转自：http://www.tufangbian.com/bbs/viewthread.php?tid=68
在这个神奇的国度里，我们总得学习一些有中国特色的东东，例如“火星坐标”。也许有人还不知道这是什么玩意，我就简要介绍一下吧。
如果你有带GPS模块的智能手机，打开定位功能，然后访问Google地图。只要你身处中国大陆，你就会发现定位不准，大概有几百米的偏差。然而运行一些导航软件，你又会发现定位很准确，说明手机的GPS模块确实是正常的。
这种现象是怎么造成的呢？答案古之立大事者不惟有超世之才亦必有坚韧不拔之志
ionic 中获取经纬度 地址解析
这种方式实现起来 ，亲测定位不准，可能是在室内的缘故，需要再进行测试。记录下来，以供参考。
ionic2 下。 步骤如下
经纬度的获取用两中方式。
使用html5 浏览器的获取经纬度，不是很准确，代码如下。
function getLocation(){
if (navigator.geolocation){
navigator.geolocation.getCurrentPosition(showPosition,showError);
alert("浏览器不支持地理定位。");
function showError(error){
switch(error.code) {
case error.PERMISSION_DENIED:
alert("定位失败,用户拒绝请求地理定位");
case error.POSITION_UNAVAILABLE:
alert("定位失败,位置信息是不可用");
case error.TIMEOUT:
alert("定位失败,请求获取用户位置超时");
case error.UNKNOWN_ERROR:
alert("定位失败,定位系统失效");
function showPosition(position){
var lat = position.coords. //纬度
var lag = position.coords. //经度
console.log('纬度:'+lat+',经度:'+lag);
alert('纬度:'+lat+',经度:'+lag);
getLocation();
接入百度地图中浏览器获取地址的方案。
1.百度中注册创建应用获取 AK.
2.在 项目的工程中引入这个script.
3.在ts 文件中加入引用
2 关键代码如下： //参考百度Demo
var geolocation = new BMap.Geolocation();
geolocation.getCurrentPosition(function(r){
alert('您的位置：'+r.point.lng+','+r.point.lat);
},{enableHighAccuracy: true})
3.在经纬度获取后进行地址的解析：
方式1 ：引入了jquery库
（注意：output 输出格式
示例 这种方式是返回的json格式，也可以解析成xml格式 ）
showPosition(a,b) //蚕食列表： 纬度，精度
var latlon = a+','+b;
//百度地图接口
var url = "http://api.map.baidu.com/geocoder/v2/?ak=C93bebdb830b9b557abce78b&callback=renderReverse&location="+latlon+"&output=json&pois=0";
console.log(url);
type: "GET",
dataType: "jsonp",
beforeSend: function(){
alert("正在定位"); //定位解析中
success: function (json) {
if(json.status==0){
alert(json.result.formatted_address); //获取地址
alert(json.result.addressComponent.city.replace(/市/,"")); //城市
error: function (XMLHttpRequest, textStatus, errorThrown) {
console.log("地址位置获取失败");
解析数据格式为xml 的关键代码：
showPosition(position){
var lat = position.coords. //纬度
var lag = position.coords. //经度
console.log('纬度:'+lat+',经度:'+lag);
//alert('纬度:'+lat+',经度:'+lag);
let location="location"+lat+","+
//location=39..351577
url:string="http://api.map.baidu.com/geocoder/v2/?callback=renderReverse&"+location+"&output=xml&pois=1&ak=ZvHBi1sMixcYD5na40b0NxIv";
this.http.get(url)
.timeout(5000)
.toPromise()
.then(response =& {
console.log(response.text());
//result GeocoderSearchResponse
$(response.text()).find("result").each(function() {
var field = $(this);
var dataType = field.find("formatted_address").text();//读取子节点的值
console.log(dataType);
//得到解析的地址
alert(dataType);
// alert(resp);
.catch(error=& {
} 方式2 ：经纬度传后台，通过百度地图接口解析获取地址。
总结： 经纬度获取的时候偏差很大，解决方法可以尝试，制作插件，引入百度地图的android sdk
进行封装。
，在ios 上是可以的，但是在安卓上使用就呵呵了。
ionic用插件（cordova-plugin-baidumaplocation）定位并调百度地图在上面显示
Ionic3+GPS定位
ionic添加百度地图定位插件cordova-plugin-baidu-geolocation.git
应用百度地图逆地址解析：经纬度--&地址
百度地图API接口
地图标注 地址经纬度解析
AngularJS进阶(二十)HTML5实现获取地理位置信息并定位功能
Ionic使用ngCordova插件，以Geolocation地理定位为例
ionic开发webApp---百度定位
没有更多推荐了，