Ionic3 高德Web定位

高德提供了Web平台定位的JS API,同样需要用到 APP_Key,并且需要注意是使用Web端的Key,如下图所示。必须是Web端的,其它平台的无效。 http://lbs.amap.com/dev/key/app http://lbs.amap.com/api/javascript-api/example/geocoder/regeocoding

使用方法

在 index.html 中引入以下脚本,注意版本是 1.4.1, 这个版本和其它版本在使用上有区别

  <script type="text/javascript" src="http://webapi.amap.com/maps?v=1.4.1&key=你的key"></script>

在对应的ts 文件中 写以下代码测试

///在文件中全局声明 AMap
declare let AMap ;

  goLocation() {
    let that = this;
    let mapObj = new AMap.Map('iCenter');
    mapObj.plugin('AMap.Geolocation', function () {
      let geolocation = new AMap.Geolocation({
        enableHighAccuracy: true,//是否使用高精度定位,默认:true
        timeout: 10000,          //超过10秒后停止定位,默认:无穷大
        maximumAge: 0,           //定位结果缓存0毫秒,默认:0
        convert: true,           //自动偏移坐标,偏移后的坐标为高德坐标,默认:true
        showButton: true,        //显示定位按钮,默认:true
        buttonPosition: 'LB',    //定位按钮停靠位置,默认:'LB',左下角
        buttonOffset: new AMap.Pixel(10, 20),//定位按钮与设置的停靠位置的偏移量,默认:Pixel(10, 20)
        showMarker: true,        //定位成功后在定位到的位置显示点标记,默认:true
        showCircle: true,        //定位成功后用圆圈表示定位精度范围,默认:true
        panToLocation: true,     //定位成功后将定位到的位置作为地图中心点,默认:true
        zoomToAccuracy:true      //定位成功后调整地图视野范围使定位位置及精度范围视野内可见,默认:false
      });
      mapObj.addControl(geolocation);
      geolocation.getCurrentPosition();
      AMap.event.addListener(geolocation, 'complete', that.onComplete.bind(that));//返回定位信息
      AMap.event.addListener(geolocation, 'error', (data)=>{ console.log('定位失败' + data);});      //返回定位出错信息
    });
  }

  //解析定位结果
  onComplete(data) {
    console.log(data);
    console.log(data.position.toString());
    console.log(data.formattedAddress);
    var str=['定位成功'];
    str.push('经度:' + data.position.getLng());
    str.push('纬度:' + data.position.getLat());
    if(data.accuracy){
      str.push('精度:' + data.accuracy + ' 米');
    }//如为IP精确定位结果则没有精度信息
    str.push('是否经过偏移:' + (data.isConverted ? '是' : '否'));
    // document.getElementById('tip').innerHTML = str.join('<br>');
  }

goLocation() 是测试函数,当点击某个按钮的时候,调用这个函数。

对应的 html代码很简单,就一个测试按钮

<button (click)="goLocation()">定位</button>

测试结果

以上是在 浏览器上测试的结果,如果是Ionic应用,在连接wifi的情况下,也可以进行定位,但是在不开wifi的情况下,无法定位。要想在android或者ios上实现定位,要借助大神写的cordova插件

本文参与腾讯云自媒体分享计划,欢迎正在阅读的你也加入,一起分享。

发表于

我来说两句

0 条评论
登录 后参与评论

相关文章

来自专栏小李刀刀的专栏

禁用Firefox自带的元素查看工具

对于web前端工程师来说,用Firefox+Firebug进行CSS和JavaScript的调试已经是非常熟悉和习惯了。如今,新版本的Firefox中又内嵌了一...

3728
来自专栏破晓之歌

vue引入各类ui库 原

本身集成并没有vue的部分,我们采用的方式是把ui-css部分拿来使用,js效果自己用jquery写到methods里

6155
来自专栏freesan44

实现 iOS 前台时的推送弹窗效果

原文链接:http://www.jianshu.com/p/67864e1c2085

1582
来自专栏数据小魔方

图表搬家

来这里找志同道合的小伙伴! 今天给大家聊一聊Excel图表的输出! 我们日常所做的图表,如果不是专门用做Excel报表的话,大部分还是要以图片的形式导出。 通...

3388
来自专栏前端新视界

jQuery 图片查看插件 Magnify 开发简介(仿 Windows 照片查看器)

前言 因为一些特殊的业务需求,经过一个多月的蛰伏及思考,我开发了这款 jQuery 图片查看器插件 Magnify,它实现了 Windows 照片查看器的所有功...

3399
来自专栏小程序·云开发专栏

解剖小程序的 setData

原文链接:https://godbasin.github.io/2018/10/05/wxapp-set-data/

1.6K3
来自专栏前端侠2.0

IE8 中,无法用$.focus()设置input的焦点

开始时,没有return false时,除IE8之外,其它浏览器都能回车与上下键切换input的焦点。

3141
来自专栏DeveWork

为WordPress 评论框添加HTML5 表单验证

WordPress 中最常用到的表单莫过于评论框了,但现在不少的WordPress 主题(包括WordPress官方的主题),其表单验证其实是借助javascr...

38710
来自专栏james大数据架构

Android一些关于分辨率和布局的设置

1、Android手机屏幕大小不一,有480x320, 640x360, 800x480.怎样才能让App自动适应不同的屏幕呢? drawable- hdpi、...

2079
来自专栏Albert陈凯

2018-06-18 Windows Intellij IDEA 常用快捷键

1839

扫码关注云+社区

领取腾讯云代金券