欢迎您访问程序员文章站本站旨在为大家提供分享程序员计算机编程知识!
您现在的位置是: 首页  >  IT编程

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

程序员文章站 2023-09-06 09:43:57
--在html5中,为我们提供了navigator.geolocation.getcurrentposition(f1, f2)函数,f1是定位成功调用的函数,f2是定位失...

--在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中如何使用谷歌地图把当前位置显示出来的相关知识,希望对大家有所帮助。