[AngularJS - app] AngularJS Location-picker app
2015-01-07 01:46
411 查看
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.
The selection returns data of the following type:
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
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-geocoderservice to fetch a set of options for the user. The user selection is then bound to the object passed in through the
ng-modelattribute.
<!-- 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 using
ng-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] Write a simple Redux store in AngularJS app
- Think in AngularJS:对比jQuery和AngularJS的不同思维模式
- A Step-by-Step Guide to Your First AngularJS App
- trackr: An AngularJS app with a Java 8 backend – Part IV 实践篇
- AngularJS(三)——在多个AngularJS controller之间共享数据
- AngularJS' Internals In Depth(深入理解 AngularJS)
- angularJS开发指南(angularJS developer guide) 之一
- Angularjs ng-table的使用(可以加button)以及angularjs学习资料
- trackr: An AngularJS app with a Java 8 backend – Part II
- trackr: An AngularJS app with a Java 8 backend – Part I
- AngularJS进阶(四)ANGULAR.JS实现下拉菜单单选
- Cordova+Angularjs 开发IOS App
- [AngularJS] Javascript scope and AngularJS $scope
- [AngularJS] TweenList 3D + AngularJS Animate
- trackr: An AngularJS app with a Java 8 backend – Part III
- Modular AngularJS App Design
- AngularJS 最佳实践 - 转自:http://www.lovelucy.info/angularjs-best-practices.html
- [AngularJS] 仿照Angular Bootstrap TimePicker创建一个分钟数-秒数的输入控件(minuteSecondPicker)
- 实践分享:开始用Cordova+Ionic+AngularJS开发App
- AngularJS进阶(四)ANGULAR.JS实现下拉菜单单选