返回 导航

Cordova

hangge.com

Cordova - 获取真实的地理位置信息（通过自定义插件实现）

作者：hangge | 2016-05-15 10:50
在前文（Cordova - 使用Geolocation插件实现地理定位）中，我们通过 Cordova 的定位插件可以获取到当前的经纬度信息。但有时只获取到经纬度还不够直观，如果能再得到对应的地理位置信息就好了（比如：xx市xx区xx路）。既然 Geolocation 插件不提供这个功能，那我们自己实现一个好了。最终效果如下：

1，实现原理
我们使用 Swift 做一个转换插件，接收传入的经纬度坐标参数，然后返回对应的地理位置信息。
其内部通过 CLGeocoder 类来实现经纬度反编码成地址。

2，自定义插件的创建 
我们随便在本地建立一个文件夹（比如叫 HanggeCLGeocoderPlugin），在里面放置插件的相关功能实现代码和配置文件。目录结构如下：

下面分别介绍各个文件的内容和功能
（1）src文件夹
这个下面就是放置插件的功能实现代码了，可以看到目前 src 文件夹下只有一个 ios 子文件夹。因为本文只实现了 iOS 版的插件，如果还有 Android 版的插件，那么可以在 src 文件夹下再创建个 android 文件夹，然后把相关的 java 代码放到里面。
由于功能比较简单，在 ios 文件夹下只有一个实现类 HanggeCLGeocoderPlugin.swift，具体代码如下： 
import Foundation
import CoreLocation
import MapKit

@objc(HWPHanggeCLGeocoderPlugin) class HanggeCLGeocoderPlugin : CDVPlugin {
    
    //地理信息反编码
    func reverseGeocode(command:CDVInvokedUrlCommand)
    {
        //返回结果
        var pluginResult:CDVPluginResult?
        //获取参数
        let latitude = command.arguments[0] as! Double
        let longitude = command.arguments[1] as! Double
        
        
        let geocoder = CLGeocoder()
        let currentLocation = CLLocation(latitude: latitude, longitude: longitude)
        geocoder.reverseGeocodeLocation(currentLocation, completionHandler: {
            (placemarks:[CLPlacemark]?, error:NSError?) -> Void in
            //强制转成简体中文
            let array = NSArray(object: "zh-hans")
            NSUserDefaults.standardUserDefaults().setObject(array, forKey: "AppleLanguages")
            //获取失败
            if error != nil {
                pluginResult = CDVPluginResult(status: CDVCommandStatus_ERROR,
                    messageAsString: "错误：\(error!.localizedDescription))")
            }
            //获取成功
            else {
                var message = ""
                if let p = placemarks?[0]{
                    //print(p) //输出反编码信息
                    message = p.name!
                } else {
                    message = "未知位置"
                }
                pluginResult = CDVPluginResult(status:CDVCommandStatus_OK,
                    messageAsString: message)
            }
            
            //发送结果
            self.commandDelegate.sendPluginResult(pluginResult, callbackId: command.callbackId)
        })
    }
}
（2）hangge-clgeocoder-plugin.js
JS模块文件，这里封装了插件的调用方法。
我们直接使用 插件名称.插件方法() 即可，这样使用起来更加方便，代码也更加清晰。其内容如下： 
'use strict';

var exec = require('cordova/exec');

var HanggeCLGeocoderPlugin = {

  reverseGeocode: function([latitude,longitude], onSuccess, onFail) {
    return exec(onSuccess, onFail, 'HanggeCLGeocoderPlugin', 'reverseGeocode',
     [latitude,longitude]);
  }

};

module.exports = HanggeCLGeocoderPlugin;
（3）plugin.xml
插件的配置文件。用来配置插件的名字，JS模块文件位置，以及各个平台的功能实现源码位置（这里只实现的iOS的功能，所以只配置了iOS平台相关内容）。 
<?xml version="1.0" encoding="UTF-8"?>
<plugin xmlns="http://apache.org/cordova/ns/plugins/1.0"
    id="hangge-clgeocoder-plugin"
    version="0.1">

    <name>HanggeCLGeocoderPlugin</name>
    <description>This plugin use to reverse geocode location</description>

    <js-module src="hangge-clgeocoder-plugin.js">
        <clobbers target="window.HanggeCLGeocoderPlugin" />
    </js-module>

    <!-- iOS -->
    <platform name="ios">
        <config-file target="config.xml" parent="/*">
            <feature name="HanggeCLGeocoderPlugin">
                <param name="ios-package" value="HWPHanggeCLGeocoderPlugin" />
            </feature>
        </config-file>
        <source-file src="src/ios/HanggeCLGeocoderPlugin.swift" />
    </platform>
</plugin>

3，自定义插件的安装
（1）由于插件是使用Swift语言写的，首先在“终端”中进入到项目文件夹，并运行如下命令添加 Swift 支持插件： 
cordova plugin add cordova-plugin-add-swift-support
（2）假设我们做的自定义插件是在用户“文稿”目录下，运行如下命令把这个插件添加到工程中来： 
cordova plugin add ~/Documents/HanggeCLGeocoderPlugin
当然 Geolocation 插件我们也是要安装的，这里就不在多讲了。
进入项目文件夹下的 plugins 文件夹可以看到，自定义插件已经成功的添加进来。当然，这个自定义插件在各个平台工程下也同步安装了。


（3）以后如果想移除这个自定义插件，运行如下命令即可： 
cordova plugin rm hangge-clgeocoder-plugin

4，自定义插件的使用 
修改首页 index.html 为如下内容。当点击“获取位置”按钮后，除了弹出经纬度信息外还有具体的地理位置信息。 
<!DOCTYPE html>
<html>
    <head>
        <title>Capture Photo</title>
        <meta http-equiv="Content-type" content="text/html; charset=utf-8">
        <script type="text/javascript" charset="utf-8" src="cordova.js"></script>
        <script type="text/javascript" charset="utf-8">

            document.addEventListener("deviceready",onDeviceReady,false);

            //Cordova加载完成会触发
            function onDeviceReady() {
            }

            function getCurrentPosition(){
                //定位数据获取成功响应
                var onSuccess = function(position) {
                  //获取位置信息
                  var latitude = position.coords.latitude;
                  var longitude = position.coords.longitude;
                  HanggeCLGeocoderPlugin.reverseGeocode([latitude,longitude],
                    function(address) {
                      alert('纬度: '          + latitude          + '\n' +
                            '经度: '         + longitude         + '\n' +
                            '位置: '          + address          + '\n');
                    },
                    function(errorMessage){
                        alert("定位失败："+errorMessage);
                    });
                };

                //定位数据获取失败响应
                function onError(error) {
                    alert('code: '    + error.code    + '\n' +
                          'message: ' + error.message + '\n');
                }

                //开始获取定位数据
                navigator.geolocation.getCurrentPosition(onSuccess, onError);
            }
        </script>
    </head>
    <body style="padding-top:50px">
        <button style="font-size:23px;" onclick="getCurrentPosition();">获取位置</button>
    </body>
</html>
插件源码下载：HanggeCLGeocoderPlugin.zip
评论

全部评论（1）

回到顶部