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


Posted in Javascript onJanuary 25, 2016

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

Javascript 相关文章推荐
将函数的实际参数转换成数组的方法
Jan 25 Javascript
Javascript模块化编程(一)AMD规范(规范使用模块)
Jan 17 Javascript
flash遮住div问题的正确解决方法
Feb 27 Javascript
js使用post 方式打开新窗口
Feb 26 Javascript
Javascript类型转换的规则实例解析
Feb 23 Javascript
Textarea输入字数限制实例(兼容iOS&amp;安卓)
Jul 06 Javascript
Vue 拦截器对token过期处理方法
Jan 23 Javascript
angular4 共享服务在多个组件中数据通信的示例
Mar 30 Javascript
使用Vuex解决Vue中的身份验证问题
Sep 28 Javascript
laydate时间日历插件使用方法详解
Nov 14 Javascript
Vue Router 实现动态路由和常见问题及解决方法
Mar 06 Javascript
微信小程序canvas动态时钟
Oct 22 Javascript
理解JavaScript表单的基础知识
Jan 25 #Javascript
jquery获取文档高度和窗口高度汇总
Jan 25 #Javascript
JavaScript数组的一些奇葩行为
Jan 25 #Javascript
JavaScript文本框脚本编写的注意事项
Jan 25 #Javascript
详解js私有作用域中创建特权方法
Jan 25 #Javascript
超赞的jQuery图片滑块动画特效代码汇总
Jan 25 #Javascript
理解js对象继承的N种模式
Jan 25 #Javascript
You might like
PHP+Apache环境中如何隐藏Apache版本
2017/11/24 PHP
PHP面向对象之里氏替换原则简单示例
2018/04/08 PHP
脚本安需导入(装载)的三种模式的对比
2007/06/24 Javascript
为你的网站增加亮点的9款jQuery插件推荐
2011/05/03 Javascript
js 剪切板的用法(clipboardData.setData)与js match函数介绍
2013/11/19 Javascript
js获取时间(本周、本季度、本月..)
2013/11/22 Javascript
jquery复选框全选/取消示例
2013/12/30 Javascript
JavaScript Window浏览器对象模型方法与属性汇总
2015/04/20 Javascript
Jquery实现遮罩层的简单实例(就是弹出DIV周围都灰色不能操作)
2016/07/14 Javascript
解决Vue页面固定滚动位置的处理办法
2017/07/13 Javascript
JS自定义函数实现时间戳转换成date的方法示例
2017/08/27 Javascript
Nuxt.js实战详解
2018/01/18 Javascript
JS获取并处理php数组的方法实例分析
2018/09/04 Javascript
基于jquery实现的tab选项卡功能示例【附源码下载】
2019/06/10 jQuery
JS实现点击下拉列表文本框中出现对应的网址,点击跳转按钮实现跳转
2019/11/25 Javascript
JS实现点餐自动选择框(案例分析)
2019/12/10 Javascript
python检测lvs real server状态
2014/01/22 Python
用Python自动清理电脑内重复文件,只要10行代码(自动脚本)
2021/01/09 Python
英国屋顶用品和材料超市:Roofing Supplies UK
2019/08/24 全球购物
Puma印度官网:德国运动品牌
2019/10/06 全球购物
经典c++面试题三
2015/07/08 面试题
编辑找工作求职信范文
2013/12/16 职场文书
商场活动策划方案
2014/01/24 职场文书
学生思想表现的评语
2014/01/30 职场文书
中学生班主任评语
2014/01/30 职场文书
还款承诺书范文
2014/05/20 职场文书
小学教师读书活动总结
2014/07/08 职场文书
2014年工作总结与下年工作计划
2014/11/27 职场文书
写给女朋友的检讨书
2015/05/06 职场文书
家长会开场白和结束语
2015/05/29 职场文书
2015年教师节感言
2015/08/03 职场文书
高中班长竞选稿
2015/11/20 职场文书
导游词之任弼时故居
2020/01/07 职场文书
图解上海144收音机
2021/04/22 无线电
Python中for后接else的语法使用
2021/05/18 Python
PHP RabbitMQ消息列队
2022/05/11 PHP