angular定位指令

最新推荐文章于 2024-03-02 10:25:13 发布
最新推荐文章于 2024-03-02 10:25:13 发布
阅读量613 收藏
点赞数
分类专栏： js
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/qq_28949495/article/details/51647981
版权
/**
 获取地理位置的服务
 */
    app.factory('geoFactory', ['$http','$q', function($http,$q) {


        function getGeo(){


            var def = $q.defer();


            var options = {
                enableHighAccuracy: true
            }


            navigator.geolocation.getCurrentPosition(function(position){
                var pc = position.coords,
                    lat = pc.latitude,
                    lng = pc.longitude;


                $http.jsonp('http://api.map.baidu.com/geoconv/v1/?coords='+lng+','+lat+'&from=1&to=5&ak=k2hXcaKk2NSwLQzrZvn8WQcB&callback=JSON_CALLBACK').success(
                    function(data){
                        $http.jsonp('http://api.map.baidu.com/geocoder/v2/?ak=k2hXcaKk2NSwLQzrZvn8WQcB&callback=?&location='+data.result[0].y+','+data.result[0].x+'&output=json&pois=0&callback=JSON_CALLBACK').success(function(result) {
                            def.resolve(result);
                        })
                    }
                )
            },function(error){
                switch(error.code)
                {
                    case error.PERMISSION_DENIED:
                        alert("请打开定位功能！")
                        break;
                    case error.POSITION_UNAVAILABLE:
                        alert("不支持定位服务！")
                        break;
                    case error.TIMEOUT:
                        alert("请求超时！")
                        break;
                    case error.UNKNOWN_ERROR:
                        alert("未知异常！")
                        break;
                }
            },options)


            return def.promise;
        }




        return {


            getGeo : getGeo


        }


    }])

//指令部分

    app.directive('geo', ['geoFactory',function (geoFactory) {
        return {
            restrict: 'AE',
            link:function(scope, element, attrs){


                function getGeo(){
                    $("#loaction_wrap").text("正在定位...");
                    geoFactory.getGeo()
                        .then(function(re) {
                            $(".geo").text(re.result.formatted_address);
                        });
                }


                getGeo();
                scope.refresh = function(){
                    getGeo()
                }


            }
        }
    }])

//html部分

<!DOCTYPE html>
<html>
<head lang="en">
    <meta charset="UTF-8">
    <meta content="width=device-width, initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0, user-scalable=no" name="viewport">
    <meta http-equiv="Cache-Control" content="no-cache">
    <title>定位服务指令</title>
</head>
<style>
    #loaction_wrap{
        height: 50px;
        line-height: 50px;
        width: 200px;
        background: #eee;
        margin: 50px auto;
        text-align: center;
        color: #666;
        font-size: 14px;
        cursor: pointer;
    }
    #allmap{
        border: 1px solid red;
        height: 100px;
        width: 100px;
    }
</style>
<body ng-app="myApp">
    <div id="loaction_wrap" geo  class="geo" ng-click="refresh()">
        正在定位
    </div>


<div id="allmap"></div>
<script src="./js/jquery.js"></script>
<script src="./js/angular.js"></script>
<script src="./js/app.js"></script>
<script src="./js/service.js"></script>
<script src="./js/directive.js"></script>
</body>
</html>

云盘

http://pan.baidu.com/s/1i4CamXJ

艹莓
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
详解如何在Angular中快速定位DOM元素
08-30
本篇文章主要介绍了详解如何在Angular中快速定位DOM元素，非常具有实用价值，需要的朋友可以参考下
AngularJS进阶(二十)HTML5实现获取地理位置信息并定位功能
IT全栈 华强工作室
12-06 5万+
HTML5实现获取地理位置信息并定位功能 注：请点击此处进行充电! 前言 这篇文章主要介绍了HTML5实现获取地理位置信息并定位功能,本文讲解了原生HTML5、百度地图、谷歌地图等三种获取理位置信息并定位的方法,需要的朋友可以参考下。 HTML5提供了地理位置定位功能（GeolocationAPI），能确定用户位置，我们可以借助HTML5的该特性开发基于地理位置信息的应用。本文
angular-BMap获取当前位置，获取具体菜场列表及地图上标记
11-09
angular-BMap获取当前位置，获取具体热点列表及地图上标记 定位 获取热点 地图上标记
AngularJs 利用百度地图API 定位当前位置 获取地址信息
pandongzi_2017的博客
01-18 4918
利用angular+百度地图API实现定位获取当前地址信息
ionic5/angular11集成百度地图JSAPI及ionic官方定位插件Geolocation实现定位
weixin_44341110的博客
04-24 766
一、添加Geolocation定位插件。 ionic cordova plugin add cordova-plugin-geolocation npm install @ionic-native/geolocation 二、在ionic项目下src/app/index.html里导入百度地图JSAPI。 <script type="text/javascript" src="https://api.map.baidu.com/api?v=2.0&ak=你的百度地图密钥">&
angular实例
02-28
HTML5提供了离线存储、媒体播放、地理定位等现代Web特性，结合Angular的响应式设计，可以实现跨平台的用户体验。为了在真机上进行演示，开发者通常会借助工具如Cordova或Capacitor，将Angular应用打包成原生移动应用...
angular 安装.docx
04-24
接下来，你可以开始学习 Angular 的核心概念，如组件、服务、指令、路由等，以及如何使用 Angular CLI 进行构建和测试。Angular 提供了丰富的文档和社区支持，助你成为一名熟练的 Angular 开发者。
D3 on Angular
05-11
- **坐标系统**：SVG使用一套坐标系统来定位图形元素，了解这个系统对于绘制准确的图形至关重要。 - **D3与SVG**：D3.js通过SVG来实现大多数图形的绘制，因此熟悉SVG是创建动态可视化的基础。 #### 十、数组助手 ...
angular-1.5.3
04-09
8. **错误处理**：1.5.3版本可能会改善错误报告和处理机制，帮助开发者更快地定位和修复问题。 9. **兼容性与稳定性**：作为一个维护版本，1.5.3会修复已知的bug，保证与其他库和浏览器的兼容性，同时提升整体的...
Angular2开发——组件规划篇
08-31
而在Angular2中，标签型指令被重新定义为组件，专门负责处理与视图（DOM）相关的任务，如数据展示和动画效果。属性型指令则保留下来，用于增强组件功能，如处理用户输入和响应事件。Angular2中的许多内置特性，如`...
AngularGeo:用于抽象地理定位 API 的 Angular 服务
06-15
角度地理 用于抽象地理定位 API 的 Angular 服务。 支持从浏览器获取当前用户的位置，以及地理编码/反向地理编码 lat/lng 值。 安装和使用 通过 bower 安装或在本地克隆 repo bower install angularGeo 包括 angularGeo 脚本以及所需的提供程序（和提供程序的脚本）。 例如，如果您想使用 Google Maps geolocation apis： < script src = "https://maps.googleapis.com/maps/api/js?v=3.exp&sensor=false" > < / script > < script src = "scripts/modules/angularGeo/angulargeo.js" > < / script > < script src = "scripts/mo
Angular 光标指向定位
weixin_42481234的博客
02-17 746
import { Component, ElementRef, ViewChild, AfterContentInit } from '@angular/core'; @Component({ selector: 'custom-form', template: ` <form> <input placeholder="Name" #nameInput /> </form> ` }) .
AngularJS进阶(十九)在AngularJS应用中集成百度地图实现定位功能
热门推荐
IT全栈 华强工作室
12-06 5万+
在AngularJS应用中集成百度地图实现定位功能 注：请点击此处进行充电! 前言 根据项目需求，需要实现手机定位功能，考虑到百度业务的强大能力，遂决定使用百度地图第三方服务。 添加第三方模块的步骤与前面介绍的“在AngularJS应用中集成科大讯飞语音输入功能”步骤相同，在此不再赘述。 问题 1.有些手机无法实现定位功能(以我的手机为例:MX2，刚
#angular# 错误查找与解决
weixin_46285770的博客
10-16 200
方法一 将界面中报错信息输入搜索引擎进行查找 方法二 若引用的为#Github#中组件，可在其Issues中输入报错信息查找是否有相应问题解决方法，如图.
HTML5 JavaScript,获取地理位置信息(navigator.geolocation)
houyanhua1的专栏
03-26 1984
demo.html：&lt;!DOCTYPE html&gt; &lt;html lang="en"&gt; &lt;head&gt; &lt;meta charset="UTF-8"&gt; &lt;title&gt;Document&lt;/title&gt; &lt;/head&gt; &lt;body&gt;
使用navigator对象的geolocation获取地理位置
实践求真知
11-22 2318
一 介绍 HTML5为navigator新增了一个geolocation属性，这个属性是一个Geolocation对象，通过该对象获取浏览者的地理位置。 下面应用示范了geolocation的用法。   二 代码 var geoHandler = function(position) { var geoMsg = "用户的所在的地理位置信息是："; geoM
AngularJS之一个元素上绑定多个指令作用域
weixin_34390996的博客
06-20 110
原文地址：http://www.mamicode.com/info-detail-1481272.html 转载于:https://www.cnblogs.com/gongshunkai/p/7056810.html
简单两步，实现高德地图的定位和展示，内含坐标系转换（示例为Angular框架+TypeScript代码）
最新发布
Neodeveloper
03-02 766
高德地图开放平台为开发者提供了强大的地图展示和相关计算功能，可以在前端代码中方便的集成，本文做一些简单和关键步骤的介绍，虽是基于Angular平台，但同样可以给JS、VUE做一些参考。
地图处理方法-判断一个点是否在某个区域内
03-25 1332
转自: https://blog.csdn.net/xsmxxl/article/details/78434185?spm=1001.2014.3001.5502 https://blog.csdn.net/qq_25800311/article/details/82917726 背景： 比如滴滴会根据乘客所在的不同区域，给出不同的价格。市区堵一点，那么价格也高点。获取服务范围只规定在某个范围内 原理： 求解从该点向右发出的水平线射线与多边形各边的交点，当交点数为奇数，则在内部。 ...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值