Cara menggunakan Peta Google untuk memaparkan lokasi semasa dalam AngularJS_AngularJS

--Dalam HTML5, kami menyediakan fungsi navigator.geolocation.getCurrentPosition(f1, f2) f1 ialah fungsi yang dipanggil apabila penentududukan berjaya, f2 ialah fungsi yang dipanggil apabila kedudukan gagal dan maklumat lokasi geografi semasa digunakan. sebagai parameter sebenar dihantar ke fungsi f1 dan f2. Fungsi f1 hanya memanggil API Peta Google.

Bagaimana untuk memaparkannya?

--Memerlukan maklumat segera dan kawasan untuk memaparkan peta.

Pada halaman

, ia kelihatan seperti ini:

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

Bahagian Arahan adalah seperti berikut:

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

Di atas ialah pengetahuan berkaitan yang diperkenalkan oleh editor kepada anda tentang cara menggunakan Peta Google untuk memaparkan lokasi semasa dalam AngularJS, saya harap ia akan membantu semua orang.