在AngularJS中如何使用谷歌地图把当前位置显示出来

--在html5中，为我们提供了navigator.geolocation.getCurrentPosition（f1, f2）函数，f1是定位成功调用的函数，f2是定位失败调用的函数，而且会把当前的地理位置信息作为实参传递给f1和f2函数。f1函数调用谷歌地图的API即可。
如何展示呢？
--需要一个提示信息和展示地图的一个区域。
页面上，大致是这样：

<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>

Directive部分如下：

（function（）{var mapGeoLocation = ["$window", function（$window）{var template = "<p><span id="status">正在查找地址...</span></p>" + "<br /><div id="map"></div>",mapContainer = null,status = null;function link（scope, elem, attrs）{//以Angular的方式获取Angular元素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）;}//定位成功时调用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"}）;}//定位失败时调用function geoError（error）{status.html（"failed lookup " + error.message）;}return {restrict: "EA", //默认scope:{height: "@",width:"@"},link: link,template: template}}];angular.module（"direcitveModule",[]）.direcitve（"mapGeoLocation", mapGeoLocation）;}（））;

以上所述是小编给大家介绍的在AngularJS中如何使用谷歌地图把当前位置显示出来的相关知识，希望对大家有所帮助。