在AngularJS中使用谷歌地图把当前位置显示出来
如何使用谷歌地图把当前位置显示出来呢?
--在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中使用谷歌地图把当前位置显示出来的更多相关文章
- 在WPF中使用谷歌地图和高德地图
原文:在WPF中使用谷歌地图和高德地图 在桌面软件开发中可能会遇到这样的需求:显示地图. 常用的地图API有Google Map和高德地图.二者都提供了各种平台的API. 为了方便集成,本文使用Jav ...
- AngularJS进阶(十九)在AngularJS应用中集成百度地图实现定位功能
在AngularJS应用中集成百度地图实现定位功能 注:请点击此处进行充电! 前言 根据项目需求,需要实现手机定位功能,考虑到百度业务的强大能力,遂决定使用百度地图第三方服务. 添加第三方模块的步骤与 ...
- javaweb中使用百度、谷歌地图进行定位
第一种 百度 直接上代码: <!DOCTYPE> <html> <head> <meta name="viewport" content ...
- 在CAD中插入谷歌地球卫星地图
本文主要介绍如何在CAD中插入谷歌地球卫星地图,作为参照光栅图像.谷歌地球卫星地图使用“迈高图-地图数据下载器”(以下简称:迈高图)下载.迈高图会给出相关插入参数(插入点和缩放比例),保证插入卫星地图 ...
- 结合谷歌地图多边形(polygon)与Sql Server 2008的空间数据类型计算某个点是否在多边形内的注意事项
首先在利用 GEOGRAPHY::STPolyFromText(@GeoStr, 4326) 这样的函数把字符串转换为Geography类型时,字符串里经纬度的顺序是 “经度[空格]纬度”,即“lon ...
- .NET开发笔记(二十三) 谷歌地图下载
关于如何将地球经纬度坐标系统转换成程序中常用到的平面2D坐标系统,网上的文章很多,参考http://www.cnblogs.com/beniao/archive/2010/04/18/1714544. ...
- Angularjs+node+Mysql实现地图上特定点的定位以及附加信息展示
注:本博文为博主原创,转载请注明出处. 在上一篇博文中主要讲述了如何利用AngularJs+Node+MySql构建项目,并实现地图上的多点标注,今天在这篇文章中,我们将在上一个项目的基础上,实现特定 ...
- Javacript和AngularJS中的Promises
promise是Javascript异步编程很好的解决方案.对于一个异步方法,执行一个回调函数. 比如页面调用google地图的api时就使用到了promise. function success(p ...
- Google Map Api 谷歌地图接口整理
一:基本知识: 1. 使用谷歌地图 API 的第一步就是要注册一个 API 密钥,需要注重一下两点: 1.假如使用 API 的页面还没有发布,只是在本地调试,可以不用密钥,随便用个字符串代替就可以了. ...
随机推荐
- urllib处理包的简单使用
我们可以使用urllib.request.urlopen()这个接口函数就可以打开一个网站,读取打印信息 你可以现在终端使用python from urllib import request if _ ...
- SQL数据库基础知识
- CGAffineTransform 缩放 / 旋转 / 平移
CGAffineTransform此类是一个3*3矩阵的变换. - (void)transformImageView { CGAffineTransform t = CGAffineTransform ...
- InterruptedException 异常
当一个方法后面声明可能会抛出InterruptedException 异常时,说明该方法是可能会花一点时间,但是可以取消的方法. 抛InterruptedException的代表方法有: 1. jav ...
- vmware+CentOs 6.9的安装步骤
一.安装步骤 linux分区 登录用户名和密码 登录用户名和密码后安装成功 二.远程控制Xshell的安装
- cf Queries on a String
#include<iostream> #include<cstring> #include<cstdio> using namespace std; #define ...
- oracle中游标详细用法
转自:http://blog.csdn.net/liyong199012/article/details/8948952 游标的概念: 游标是SQL的一个内存工作区,由系统或用户以变量的形式定 ...
- 【C++ Primer 第六章】 1. 定义模板
类模板 题目描述:实现StrBlob的模板版本. /* Blob.h */ #include<iostream> #include<vector> #include<in ...
- binlog和redo log日志提交
组提交(group commit)是MYSQL处理日志的一种优化方式,主要为了解决写日志时频繁刷磁盘的问题.组提交伴随着MYSQL的发展不断优化,从最初只支持redo log 组提交,到目前5.6官方 ...
- bzoj3687
3687: 简单题 Time Limit: 10 Sec Memory Limit: 512 MBSubmit: 700 Solved: 319[Submit][Status][Discuss] ...