[AngularJS - app] AngularJS Location-picker app

最新推荐文章于 2025-09-09 14:35:06 发布

weixin_30386713

最新推荐文章于 2025-09-09 14:35:06 发布

阅读量63

点赞数

CC 4.0 BY-SA版权

文章标签： git 测试

原文链接：http://www.cnblogs.com/Answer1215/p/4207463.html

本文介绍两种用于移动应用的位置选择方法：Location-Picker利用逆地理编码服务获取位置选项；Location-Lookup则通过用户输入查询并结合Google Places服务来获取地理位置数据。

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

转载于:https://www.cnblogs.com/Answer1215/p/4207463.html