In AngularJS, how does one use Google map to display the current location? angularjs Google

In AngularJS, how does one use Google map to display the current location? angularjs Google

-- In html5, navigator is provided for us. geolocation. getCurrentPosition (f1, f2) function, f1 is the function for locating successful calls, f2 is the function for locating failed calls, in addition, the current geographic location information is passed to the f1 and f2 functions as real parameters. The f1 function calls the Google map API.

How to display it?

-- Requires a prompt message and an area for displaying the map.

The page is roughly like this:

<map-geo-location height="400" width="600"></map-geo-location><script src="angular.js"></script><script src="http://maps.google.com/maps/api/js?sensor=false"></script><script src=="mapGeoLocation.js"></script>

The Directive section is as follows:

(Function () {var mapGeoLocation = ['$ Window', function ($ window) {var template = '<p> <span id = "status"> searching for address... </span> </p> '+' <br/> <div id = "map"> </div> ', mapContainer = null, status = null; function link (scope, elem, attrs) {// obtain Angular element status = Angular in angular mode. element (document. getElementById ('status'); mapContainer = angular. element (document. getElementById ('map'); mapContainer. attr ('style', 'heweigh T: '+ scope. height + 'px; width: '+ scope. width + 'px '); $ window. navigator. geolocation. getCurrentPosition (mapLocation, geoError);} // call the function maplocation(pos?status.html ('found your location! Longpolling: '+ pos. coords. longpolling + 'latitude: '+ pos. coords. latitude); var latlng = new google. maps. latLng (pos. coords. latitude, pos. coords. longpolling); var optons = {zoom: 15, center: latlng, myTypeCOntrol: true, mapTypeId: google. maps. mapTypeId. ROADMAP}; var map = new google. maps. map (mapContainer [0], options); var marker = new google. maps. markser ({position: latlng, map: map, title: "Your location"});} // call function geoerror(error1_status.html ('failed' lookup '+ error. message);} return {restrict: 'ea ', // default scope: {height:' @ ', width:' @ '}, link: link, template: template}]; angular. module ('citcitvemodule ', []). direcitve ('mapgeolocation', mapGeoLocation );}());

The above section describes how to use Google map to display the current position in AngularJS. I hope it will help you.

Articles you may be interested in:

• Address book based on AMAP location developed by AngularJS + Node. js + MongoDB