在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);
}());
时间: 2024-10-10 15:22:29

在AngularJS中使用谷歌地图把当前位置显示出来的相关文章

javaweb中使用百度、谷歌地图进行定位

第一种  百度 直接上代码: <!DOCTYPE> <html> <head> <meta name="viewport" content="initial-scale=1.0, user-scalable=no" /> <meta http-equiv="Content-Type" content="text/html; charset=gbk" /> <ti

如何下载谷歌地球(Google Earth)中的卫星地图

一.准备工作 安装水经注万能地图下载器,如果没有安装本软件,可以百度"水经注软件"到官方网站下载. 二.下载地图 这里以下载"四川省"谷歌地球中的卫星地图为例. 启动水经注万能地图下载器,首先选择谷歌地球在线地图. 方法一:默认左下角已存在"谷歌地球",直接切换到"谷歌地球"即可,如下图. 方法二:直接选择"在线地图"->"卫星"->"卫星.谷歌地球",如

谷歌地球卫片地图如何OZI中制成导航地图

一.说明 本案例演示谷歌地球卫片地图如何OZI中制成导航地图. 谷歌地球卫片地图来源于"水经注万能地图下载器". 如果没有安装本软件,可以百度"水经注软件"到官方网站下载. 二.下载地图 启动水经注万能地图下载器,切换在线地图为"卫星.谷歌地球",点击"框选下载区域",框选需要下载的区域,双击框选区域,选择级数,如下图. 点击"确定"按钮,开始下载卫星地图. 下载完成后会弹出对话框询问是否要立即导出,选择&

在vue2中使用百度或者谷歌地图

在vue项目的开发过程中,我们会需要用到地图显示功能,那么如何在vue项目中引用百度地图或者谷歌地图呢?下面是我自己在开发过程中的引用方式,如果有更好的方式,欢迎提出. 一.在index.html文件的头部引入地图 其中src是引入地图的url,ak是你在地图官网申请的开发者公钥 二.在webpack.base.conf.js文件中的module.exports添加配置 externals:{ 'BMap': 'BMap' } 三.执行npm install 四.在需要地图的组件内import

谷歌地图下载拼接软件

选择多边形框选下载 特别BIGEMAP地图下载器提供了多种选择的下载方式,方便用户得到不同的应用当中: 1.矩形框选择区域下载 2.多边形选择区域下载 3.根据行政区(省市县区)域边界选择下载 4.导入外部边界文件下载(支持kml/kmz/shp格式) 5.标准分幅下载 6.指定矩形框经纬度范围下载 本文主要介绍应用多边形如何下载想要的区域 第一步:选在多边形工具 打开BIGEMAP软件,在软件的最上面工具栏选择[],单机左键选择. 第二步:通过单击[鼠标左键]在地图上任意位置开始绘制多边形,选

谷歌地图下载瓦片拼接地图

选择多边形框选下载 特别BIGEMAP地图下载器提供了多种选择的下载方式,方便用户得到不同的应用当中: 1.矩形框选择区域下载 2.多边形选择区域下载 3.根据行政区(省市县区)域边界选择下载 4.导入外部边界文件下载(支持kml/kmz/shp格式) 5.标准分幅下载 6.指定矩形框经纬度范围下载 本文主要介绍应用多边形如何下载想要的区域 第一步:选在多边形工具 打开BIGEMAP软件,在软件的最上面工具栏选择[],单机左键选择. 第二步:通过单击[鼠标左键]在地图上任意位置开始绘制多边形,选

后端接收不到AngularJs中$http.post发送的数据的问题

1.问题: 后端接收不到AngularJs中$http.post发送的数据,总是显示为null 示例代码: $http.post(/admin/KeyValue/GetListByPage, { pageindex: 1, pagesize: 8 }) .success(function(){ alert("Mr靖"); }); 代码没有错,但是在后台却接收不到数据,这是为什么呢? 用火狐监控:参数是JSON格式 用谷歌监控:传参方式是request payload 可以发现传参方式是

Javacript和AngularJS中的Promises

promise是Javascript异步编程很好的解决方案.对于一个异步方法,执行一个回调函数. 比如页面调用google地图的api时就使用到了promise. function success(position){ var cords = position.coords; console.log(coords.latitude + coords.longitude); } function error(err){ console.warn(err.code+err.message) } na

免费下载谷歌地图高清卫星地图

免费下载谷歌地图高清卫星地图 特别BIGEMAP地图下载器提供了多种选择的下载方式,方便用户得到不同的应用当中: 1.矩形框选择区域下载 2.多边形选择区域下载 3.根据行政区(省市县区)域边界选择下载 4.导入外部边界文件下载(支持kml/kmz/shp格式) 5.标准分幅下载 6.指定矩形框经纬度范围下载 本文主要介绍应用多边形如何下载想要的区域 第一步:选在多边形工具 打开BIGEMAP软件,在软件的最上面工具栏选择[],单机左键选择. 第二步:通过单击[鼠标左键]在地图上任意位置开始绘制