How to use Google Maps to show the current position in Angularjs _angularjs

Source: Internet
Author: User


--in HTML5, we provide the navigator.geolocation.getCurrentPosition (F1, F2) function, F1 is to locate the function that is successfully invoked, F2 is the function that locates the failed call, and the current geographic information is passed to the F1 and F2 functions as arguments. The F1 function calls the Google Maps API.



How to show it?



--Need a hint and a region to show the map.



On the page, roughly like this:


<map-geo-location height= "width=" ></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" > looking for address... < / span > < p >' + '< br / > < div id = "map" > < div >',
mapContainer = null,
status = null;
function link(scope, elem, attrs){
//Get the angular element in an angular way
status = angular.element(document.getElementById('status'));
mapContainer = angular.element(document.getElementById('map'));
mapContainer.attr('style', 'height:' + scope.height + 'px;width:' + scope.width + 'px');
$window.navigator.geolocation.getCurrentPosition(mapLocation, geoError);
}
//Called on successful positioning
function mapLocation(pos){
status.html('found your location! Longitude: ' + pos.coords.longitude + ' Latitude: ' + pos.coords.latitude);
var latlng = new google.maps.LatLng(pos.coords.latitude, pos.coords.longitude);
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"
};
}
//Called on location failure
function geoError(error){
status.html('failed lookup ' + error.message);
}
Return {
Restrict: 'EA', / / default
Scope:{
Height: '@,
Width:'@'
}
Link: link,
template: template
}
]
angular.module('direcitveModule',[])
.direcitve('mapGeoLocation', mapGeoLocation);
} (); 


The above is a small set for you to introduce in the Angularjs how to use Google Maps to show the current position of the relevant knowledge, hope to help everyone.


Related Article

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.