[AngularJS - app] AngularJS Location-picker app

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


				
时间: 2024-10-06 10:49:40

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

Android 编程下 App Install Location

从 API 8 开始(参考官方文档:App Install Location | Android Developers),你可以将你的应用安装在外部储存中(例如,安装到设备的 SD 卡上).这是一个可选的特征,你可以在你的应用的 AndroidManifest.xml 中声明 android:installLocation 属性.如果你没有声明这个属性,你的应用程序将会被安装在内部储存,并且不能被移到外置储存中. 修改 AndroidManifest.xml 文件中 <manifest> 元素

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

强大的angularjs也给我们预留了一套他的缓存机智,这样在某个程度上来说还是可以做到减轻一点服务器压力的.... <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> <link rel="stylesheet" href="css/amaze

AngularJS学习--- AngularJS中数据双向绑定(two-way data-binding) orderBy step4

1.切换工作目录 git checkout step-4 #切换分支,切换到第4步 npm start #启动项目 2.代码 app/index.html Search: <input ng-model="query"> Sort by: <select ng-model="orderProp"> <option value="name">Alphabetical</option> <opti

AngularJS学习--- AngularJS中模板链接和图像 ng-src step6

接上一篇文章,本文将主要介绍angularjs中的模板链接,和图像显示? 首先,切换分支,启动项目: git checkout step-6 npm start 1.效果 相较于前一篇文章,明显感觉多了图片,那么这些图片是怎么加载进去的呢?这里图片各不一样,如果用传统的方式去加载图片可能要写很多代码,这里看一下angularjs是如何实现的?? 2.实现代码 app/index.html <ul class="phones"> <li ng-repeat="

AngularJS学习--- AngularJS中XHR(AJAX)和依赖注入(DI) step5

前言:本文接前一篇文章,主要介绍什么是XHR,AJAX,DI,angularjs中如何使用XHR和DI. 1.切换工具目录 git checkout -f step-5 #切换分支 npm start #启动项目 2.什么是XHR和依赖注入(Dependency Injection)? 1)什么是XHR? XHR是XMLHttpRequest的简称,XMLHttpRequest 用于在后台与服务器交换数据,主要是为了实现在不重新加载整个网页的情况下,对网页的某部分进行更新.简单说,浏览器中URL

如何用一个app操作另外一个app.比如微信群控那样的

如何实现一个app.控制另外的app,比如市面上群控微信的,是用测试工具的原理?还是什么模拟点击的原理? 如何用一个app操作另外一个app.比如微信群控那样的 >> android 这个答案描述的挺清楚的:http://www.goodpm.net/postreply/android/1010000007186891/如何用一个app操作另外一个app比如微信群控那样的.html

app.listen(3000)与app是不一样的

前者是server代码如下 Server { domain: null, _events: { request: { [Function] domain: undefined, _events: [Object], _maxListeners: undefined, setMaxListeners: [Function: setMaxListeners], getMaxListeners: [Function: getMaxListeners], emit: [Function: emit],

【AngularJS】AngularJS 教程

AngularJS通过新的属性和表达式扩展了HTML.------------->扩展HTML属性 AngularJS可以构建一个单页面应用程序(SPAs: Single Page Applications). AngularJS表达式 AngularJS 使用 表达式 把数据绑定到HTML. AngularJS表达式 写在双大括号内: {{ expression }}. AngularJS表达式 把数据绑定到HTML,这与ng-bind指令有异曲同工之妙. AnguarJS表达式 将在表达式书

[ app运营 ] APP运营思考:APP上线前,我们该做些什么?

一.产品部分:想一想APP的承载够不够,是否要做压力测试?上架后,会迎来第一波用户,如何保证你APP的正常运行?将会出现哪些意外情况?我们遇到一个真实的案例,某游戏APP上架后,第一天就有3万次真实激活,但就在当天晚些,出现几百个差评,几乎都是说:“登陆慢.运行慢.垃圾游戏”这样的评论,第二天只好主动下架调整. 移动互联网,特别是APP store的世界,天天都在上演着一夜成名的故事,如果你不想在第一天就倒下的话,花点时间做压力测试吧. 二.市场部分:1. 想一下如何收集用户反馈,以及如何处理.