Home > Developer > JavaScript
AngularJs uses Baidu map API to locate the current location and obtain address information. angularjsapi
1. Apply for a Baidu key in just a few steps.
2. Introduce files
<! -- Baidu map positioning --> <script src = "http://api.map.baidu.com/components? Ak = wufztjkpuz2g5rmgd0jwjv6xomieqvq "> </script> <script type =" text/javascript "src =" http://api.map.baidu.com/api? V = 2.0 & ak = wufztjkpuz2g5rmgd01_jv6xomieqvq "> </script>
Third, bind data to the input box you want to display
Complete address: <input type = "text" ng-model = "all"/> <br> city: <input type = "text" ng-model = "shi"/> <br> region: <input type = "text" ng-model = "qu"/> <br> sub-district: <input type = "text" ng-model = "jiedao"/>
Fourth, the code in the Controller
Angular. module ('myapp '). controller ('myctrl ', function ($ scope) {// obtain geographic location information $ scope. getAddr = function () {var geolocation = new BMap. geolocation (); geolocation. getCurrentPosition (// function (position) {if (this. getStatus () = BMAP_STATUS_SUCCESS) {$ scope. longpolling = position. point. lng; $ scope. latitude = position. point. lat; // obtain the address description $ scope according to the coordinates. getGeo () ;},{// indicates that the browser obtains the location with high precision. The default value is false enableHighAccuracy: true, // specifies the time-out time for obtaining the geographic location. The default value is unlimited, the Unit is millisecond // timeout: 5000, // The maximum validity period (30 S). When you obtain the location again, this parameter specifies how long it will take to obtain the location again. maximumAge: 30*1000}) ;}; $ scope. getGeo = function () {var myGeo = new BMap. geocoder (); // obtain the address description myGeo Based on the coordinates. getLocation (new BMap. point ($ scope. longpolling, $ scope. latitude), function (result) {if (result) {$ scope. geoaddress = {'fulladdress': result. addressComponents. city + result. addressComponents. district + result. addressComponents. street, 'city': result. addressComponents. city, 'region': result. addressComponents. district, 'street ': result. addressComponents. street,}; $ scope. all = result. addressComponents. city + result. addressComponents. district + result. addressComponents. street; $ scope. shi = result. addressComponents. city; $ scope. qu = result. addressComponents. district; $ scope. jiedao = result. addressComponents. street; alert (JSON. stringify ($ scope. all)} else {$ scope. showAlert ("locating failed, address resolution failed") ;}};}]);
Fifth, the complete code is as follows: (the general idea is like this! Here is a mark for future users)
<! DOCTYPE html> <meta charset = "UTF-8"> <script src = "http://cdn.static.runoob.com/libs/angular.js/1.4.6/angular.min.js"> </script> <script src = "http://api.map.baidu.com/components? Ak = wufztjkpuz2g5rmgd0jwjv6xomieqvq "> </script> <script type =" text/javascript "src =" http://api.map.baidu.com/api? V = 2.0 & ak = wufztjkpuz2g5rmgd01_jv6xomieqvq "> </script> <body> <div ng-app =" myApp "ng-controller =" myCtrl "> <button type =" button" ng-click = 'getaddr () '> click to locate </button> <br> complete address: <input type = "text" ng-model = "all"/> <br> city: <input type = "text" ng-model = "shi"/> <br> region: <input type = "text" ng-model = "qu"/> <br> Sub-District: <input type = "text" ng-model = "jiedao"/> </div> <script> var app = angular. module ('myapp', []); app. controller ('myctrl ', function ($ scope) {// obtain geographic location information $ scope. getAddr = function () {var geolocation = new BMap. geolocation (); geolocation. getCurrentPosition (// function (position) {if (this. getStatus () = BMAP_STATUS_SUCCESS) {$ scope. longpolling = position. point. lng; $ scope. latitude = position. point. lat; // obtain the address description $ scope according to the coordinates. getGeo () ;},{// indicates that the browser obtains the location with high precision. The default value is false enableHighAccuracy: true, // specifies the time-out time for obtaining the geographic location. The default value is unlimited, the Unit is millisecond // timeout: 5000, // The maximum validity period (30 S). When you obtain the location again, this parameter specifies how long it will take to obtain the location again. maximumAge: 30*1000}) ;}; $ scope. getGeo = function () {var myGeo = new BMap. geocoder (); // obtain the address description myGeo Based on the coordinates. getLocation (new BMap. point ($ scope. longpolling, $ scope. latitude), function (result) {if (result) {$ scope. geoaddress = {'fulladdress': result. addressComponents. city + result. addressComponents. district + result. addressComponents. street, 'city': result. addressComponents. city, 'region': result. addressComponents. district, 'street ': result. addressComponents. street,}; $ scope. all = result. addressComponents. city + result. addressComponents. district + result. addressComponents. street; $ scope. shi = result. addressComponents. city; $ scope. qu = result. addressComponents. district; $ scope. jiedao = result. addressComponents. street; alert (JSON. stringify ($ scope. all)} else {$ scope. showAlert ("location failed, address resolution failed") ;}};}); </script> </body>
The above is all the content of this article. I hope this article will help you in your study or work. I also hope to provide more support to the customer's home!
Start building with 50+ products and up to 12 months usage for Elastic Compute Service
1 on 1 presale consultation
24/7 Technical Support 6 Free Tickets per Quarter Faster Response
Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.
A comprehensive suite of global cloud computing services to power your business
Payment Methods We Support
