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

Source: Internet
Author: User

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

Contact Us

The content source of this page is from Internet, which doesn't represent Alibaba Cloud's opinion; products and services mentioned on that page don't have any relationship with Alibaba Cloud. If the content of the page makes you feel confusing, please write us an email, we will handle the problem within 5 days after receiving your email.

If you find any instances of plagiarism from the community, please send an email to: info-contact@alibabacloud.com and provide relevant evidence. A staff member will contact you within 5 working days.

A Free Trial That Lets You Build Big!

Start building with 50+ products and up to 12 months usage for Elastic Compute Service

  • Sales Support

    1 on 1 presale consultation

  • After-Sales Support

    24/7 Technical Support 6 Free Tickets per Quarter Faster Response

  • Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.