From: http://rangle.io/blog/two-ways-to-build-a-location-picker-for-a-mobile-angularjs-application/

Building mobile apps often requires working with location information. While, the Cordova geo-location plugin makes it quite trivial to get the latitude and longitude values for the user’s current location, what we often want is location identifiers that are meaningful to the user - and not necessarily corresponding to the place where the user is right now. Below we look at two ways at acquiring meaningful location identifiers.

Location-Picker

The Location-Picker packages this into a simple directive. It utilizes thereverse-geocoder service to fetch a set of options for the user. The user selection is then bound to the object passed in through the ng-model attribute.

<!-- Requires access to the user's geo-location data -->
<location-picker
ng-model="pickedLocation"
limit-to="5"></location-picker>

Location-Lookup

The location-predictions directive generates a set of options which are passed into the Location-Lookup directive. Which in turn displays them as a list for the user to choose from. Once the user picks a location it uses the Google Places service to fetch the geo-location data for it.

<!-- Requires user to enter a query -->
<location-lookup
ng-model="lookedUpLocation"
limit-to="4"></location-lookup>

Usage

Both, location-lookup and location picker, directives are fairly straight forward to use. They essentially behave as a <select> element. The selection is captured usingng-model. Optionally you can limit the number of choices by using the limit-toattribute.

The selection returns data of the following type:

{
name: 'CN Tower',
description: 'CN Tower, Front Street West, Toronto, ON, Canada',
latitude: 43.642566,
longitude: -79.38705700000003
}

It is easy to use, we have this kind of requriement in the proejct, can refer to this blog.

Git: https://github.com/winkerVSbecks/locator


												

[AngularJS - app] AngularJS Location-picker app的更多相关文章

  1. Android 编程下 App Install Location

    从 API 8 开始(参考官方文档:App Install Location | Android Developers),你可以将你的应用安装在外部储存中(例如,安装到设备的 SD 卡上).这是一个可 ...

  2. 夺命雷公狗—angularjs—16—angularjs里面的缓存

    强大的angularjs也给我们预留了一套他的缓存机智,这样在某个程度上来说还是可以做到减轻一点服务器压力的.... <!DOCTYPE html> <html lang=" ...

  3. 夺命雷公狗—angularjs—10—angularjs里面的内置函数

    我们没学一门语言或者框架,几乎里面都有各自的语法和内置函数,当然,强悍的angularjs也不例外,他的方法其实常用的没多少,因为很多都可以用源生jis几乎都能完成一大部分.. <!doctyp ...

  4. 【js】手机浏览器端唤起app,没有app就去下载app 的方法

    这种功能的作用: 1.一般公司有自己的app,而app是需要不断有新用户涌入才能持续运营,达到不错的收入.就需要使用这种方式进行引入新的用户. 2.一些内容在网页端体验不好,或者一些功能需要app内才 ...

  5. iOS App Store上架新APP与更新APP版本

    iOS App Store上架新APP与更新APP版本 http://www.jianshu.com/p/9e8d1edca148

  6. walk around by The provided App differs from another App with the same version and product ID 分类: Sharepoint 2015-07-05 08:14 4人阅读 评论(0) 收藏

    'm currently developing a SharePoint 2013 application. After a few deployments via Visual Studio, I ...

  7. Android项目实战(二十二):启动另一个APP or 重启本APP

    一.启动另一个APP 目前公司项目需求,一个主APP,需要打开某些小APP,这些小APP是整合了Unity的,但是还是android程序(所有小APP的包名是已知的). 以前没做过,查询了一下实现方法 ...

  8. Android 一个app启动另一个app

    最近,一个app启动另一个app,这个玩法挺火的嘛,有没有试过更新QQ到5.1版本,QQ的健康里面就可以添加其他app,实现从QQ跳转到其他app应用.这个挺好玩的,一下子带来了多少流量啊. 一.先来 ...

  9. 【AngularJS】AngularJS 教程

    AngularJS通过新的属性和表达式扩展了HTML.------------->扩展HTML属性 AngularJS可以构建一个单页面应用程序(SPAs: Single Page Applic ...

随机推荐

  1. Nhibernate与Dapper对比,及Nhibernate增删改和9种查询语法

    1,Sql语法. NH:HQL Dapper:原生Sql. 点评:原生Sql可以直接放在数据库里执行,Hql不行,且Hql增加学习负担.(Hn也可以原生Sql,但好像用的不多呀) 2,开发速度. NH ...

  2. memcached性能监控

    在上文“在Windows .NET平台下使用Memcached”中,我给大家介绍了如何在Windows平台上部署Memecached服务端,如何在.NET平台中应用Memcached,详细介绍了两种流 ...

  3. EF框架step by step(8)—Code First DataAnnotations(2)

    上一篇EF框架step by step(7)—Code First DataAnnotations(1)描述了实体内部的采用数据特性描述与表的关系.这一篇将用DataAnnotations描述一下实体 ...

  4. Android 退出提示框 代码

    转自:http://hi.baidu.com/ittdt/item/d932cf37f486f886c3cf29ea new AlertDialog.Builder(MainEngine.contex ...

  5. linux下socket keep alive讲解

    [需求] 不影响服务器处理的前提下,检测客户端程序是否被强制终了.[现状]服务器端和客户端的Socket都设定了keepalive属性.服务器端设定了探测次数等参数,客户端.服务器只是打开了keepa ...

  6. 【JMeter】JMeter完成一个MySql压力测试

    jmeter也可以用来做数据库的压力测试,并且兼容各种数据库类型,只需要更改对应的数据库驱动类和url.以下为整理到的数据库驱动类对应url.并且给出一个mysql数据库select的简单应用.如下: ...

  7. GCC 编译命令

    今天突然被同事问道一个GCC编译命令为的问题,感觉对相应内容生疏了,赶紧整理下相关内容,梳理下相关知识. GCC命令提供了非常多的命令选项,但并不是所有都要熟悉,初学时掌握几个常用的就可以了,到后面再 ...

  8. Java HashMap存储问题

    public static boolean isIsomorphic(String s, String t) { Map map1 = new HashMap<>(); Map map2 ...

  9. VTK三维重建(2)-根据脚部骨骼CT的三维重建和显示

    [效果演示] 根据脚部的骨骼CT扫描的照片,利用VTK完成读取和三维重建. [程序实现] void main () { vtkRenderer *aRenderer = vtkRenderer::Ne ...

  10. iOS程序性能优化

    iOS程序性能优化 一.初级 使用ARC进行内存管理 在iOS5发布的ARC,它解决了最常见的内存泄露问题.但是值得注意的是,ARC并不能避免所有的内存泄露.使用ARC之后,工程中可能还会有内存泄露, ...