So verwenden Sie Google Maps, um den aktuellen Standort in AngularJS_AngularJS anzuzeigen

--In HTML5 stellen wir die Funktion navigator.geolocation.getCurrentPosition(f1, f2) bereit, die aufgerufen wird, wenn die Positionierung erfolgreich ist, f2 ist die Funktion, die aufgerufen wird, wenn die Positionierung fehlschlägt, und es werden die aktuellen geografischen Standortinformationen verwendet as Tatsächliche Parameter werden an die Funktionen f1 und f2 übergeben. Die f1-Funktion ruft lediglich die Google Maps-API auf.

Wie wird es angezeigt?

--Benötigen Sie sofortige Informationen und einen Bereich zum Anzeigen der Karte.

Auf der Seite

sieht es so aus:

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

Der Richtlinienteil lautet wie folgt:

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

Das Obige ist das relevante Wissen, das Ihnen der Herausgeber zur Verwendung von Google Maps zur Anzeige des aktuellen Standorts in AngularJS vorstellt. Ich hoffe, es wird für alle hilfreich sein.