Ionic3 高德Web定位

作者: spilledyear | 来源:发表于2017-11-08 20:44 被阅读249次

高德提供了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插件

相关文章

  • Ionic3 高德Web定位

    高德提供了Web平台定位的JS API,同样需要用到 APP_Key,并且需要注意是使用Web端的Key,如下图所...

  • 高德定位

    #import

  • WeChat-H5-ios的坑

    一.高德地图定位问题 类似 Chrome 等浏览器框架目前禁止非 https 环境进行定位,所以原本的高德定位ap...

  • 使用高德api实现对经纬度和地址的互换

    需求:对用户输入的地址在高德地图上进行定位显示运用技术栈:React+TS请求方式:axios操作平台:Web 地...

  • Ionic 3 应用跳转高德地图 APP

    首先检测我们的 Ionic3 应用是否安装高德地图 APP,如果安装则打开该APP。 介绍 App Availab...

  • 高德 定位稀释

    需求:司机接到乘客后要上传经纬度,总不能一秒一个的上传吧。需要把经纬度拉稀。 参考文献:iOS开发:后台定位并上传...

  • 高德定位SDK

    cocos2d-x技术群新群:117871561每一次的坚持,都是一首体现自身价值的诗。坚定不移,就会铸就一部价值...

  • 高德地图定位

    1.在高德地图官网上注册 成功开发者2.添加一个应用 注册一个appKey3.用cocoa pod 中 写入 ...

  • 获取SHA1

    今天遇到集成高德地图,不,是融云中的高德地图定位,填坑的。定位失败,一直提示定位失败,报错说key过期或者不正确。...

  • Android高德地图定位SDK 只有经纬度没有地址等信息

    Android高德地图定位SDK 返回信息中只有经纬度问题解决 高德地图最新定位SDK,在定位成功后,除经纬度信息...

网友评论

  • 571bace86dd5:那如果微信调用是不是能嵌入websdk呢,移动端使用cordova开发
  • dml1874:您给的这个例子能把地图显示出来吗?
    我复制了代码,能定位,但是不能显示地图
    dml1874:@spilledyear 好的,多谢多谢
    spilledyear:@dml1874 可以的,你可以看看官网给的例子,默认就是又地图显示的,我特意去掉的。
  • dml1874:楼主能把android 的也实现定位😁
    spilledyear:@dml1874 可以看看这个 http://www.jianshu.com/p/54871fc4bba7
    dml1874:@spilledyear 方便把地址给我吗?
    spilledyear:@dml1874 安卓定位目前使用的别人写的一个插件

本文标题:Ionic3 高德Web定位

本文链接:https://www.haomeiwen.com/subject/gbzymxtx.html