当前位置： 移动技术网 > IT编程>脚本编程>AngularJs > 在AngularJS中如何使用谷歌地图把当前位置显示出来

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

2018年06月17日  | 移动技术网IT编程  | 我要评论

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

您可能感兴趣的文章:

如对本文有疑问， 点击进行留言回复！！

相关文章:

验证码：
最近更新的文章
大家感兴趣的文章
移动技术网