Comment utiliser Google Maps pour afficher l'emplacement actuel dans AngularJS_AngularJS

--En HTML5, nous fournissons la fonction navigator.geolocation.getCurrentPosition(f1, f2). f1 est la fonction appelée lorsque le positionnement est réussi, f2 est la fonction appelée lorsque le positionnement échoue et les informations de localisation géographique actuelle sont utilisées. car les paramètres réels sont transmis aux fonctions f1 et f2. La fonction f1 appelle simplement l'API Google Maps.

Comment l'afficher ?

--Besoin d'informations rapides et d'une zone pour afficher la carte.

Sur la page

, cela ressemble à ceci :

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

La partie Directive est la suivante :

(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);
}());

Ce qui précède correspond aux connaissances pertinentes que l'éditeur vous présente sur la façon d'utiliser Google Maps pour afficher l'emplacement actuel dans AngularJS. J'espère que cela sera utile à tout le monde.