关于定位导航问题

关于定位导航问题

老师,我想在移动端实现定位导航功能,
于是上网查了挺多资料,
好像需要在开发者平台获取钥匙,

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

然后使用时需要用到vue的知识,现在我的页面都是用原生html、js写的,有办法把vue的代码换成普通js代码吗?(vue代码是网上搜的,链接地址:https://blog.csdn.net/weixin_42074377/article/details/80827855

如果比较麻烦的话有其他方法定位获取经纬度信息吗?
只需要实时获取当前经纬度信息就可以了!

正在回答

登陆购买课程后可参与讨论,去登陆

1回答

同学你好,可以按照以下步骤申请Key:

1、首先,注册开发者账号,成为高德开放平台开发者

2、登陆之后,进入「应用管理」 页面,点击「创建新应用」

http://img1.sycdn.imooc.com//climg/60cc2a340987b72913660649.jpg

http://img1.sycdn.imooc.com//climg/60cc2a390969de1e10410440.jpg

3、设置 Key名称,选择「服务平台」中的「 Web 端 ( JSAPI ) 」,点击「提交」即可获取到key

http://img1.sycdn.imooc.com//climg/60cc2aa8098f9b5113790667.jpg

关于定位导航功能:

高德JS API提供了AMap.Geolocation插件来实现定位,关于该插件的详细信息可以参考以下链接:查看AMap.Geolocation所有属性和方法

老师写了个例子,同学可以作为参考:

<!-- 引入高德JSAPI -->

<script type="text/javascript"

src='https://webapi.amap.com/maps?v=1.4.4&test=true&key=申请的key值'>

</script>

<script type="text/javascript">

// AMap.Geolocation插件来实现定位

AMap.plugin('AMap.Geolocation', function() {

var geolocation = new AMap.Geolocation({

// 是否使用高精度定位,默认:true

enableHighAccuracy: true,

// 设置定位超时时间,默认:无穷大

timeout: 10000

})

// 获取用户当前的精确位置信息

geolocation.getCurrentPosition();

// 连续定位,使用浏览器定位接口监控当前位置,移动端有效

geolocation.watchPosition();

// 监听成功、失败

AMap.event.addListener(geolocation, 'complete', onComplete)

AMap.event.addListener(geolocation, 'error', onError)

function onComplete(data) {

// data是具体的定位信息

console.log(data)

// 经纬度信息

console.log(data.position)

}

function onError(data) {

// 定位出错

}

})

</script>

祝学习愉快!

  • 柠檬楠 提问者 #1

    为什么我每次刷新以后都会报错呀,只有第一次进入页面的时候能成功得到坐标http://img1.sycdn.imooc.com//climg/60d41b6d09604b3a10640181.jpg

    2021-06-24 13:43:44
  • 好帮手慕然然 回复 提问者 柠檬楠 #2

    同学你好,老师测试了一下代码,在老师的电脑上是可以不断刷新获取定位信息的。

    建议同学可以通过控制台打印的message信息排查一下定位失败的原因,截图中message信息为Geolocation permission denied,猜测原因有以下几种:

    1、Geolocation permission denied:用户禁用了定位权限,需要用户开启设备和浏览器的定位权限,并在浏览器弹窗中点击“允许使用定位”选项。   

    2、Geolocation permission denied:浏览器禁止了非安全域的定位请求,比如Chrome、IOS10已陆续禁止,这时候需要升级站点到HTTPS。注意Chrome不会禁止localhost等域名HTTP协议下的定位。

    3、Geolocation permission denied:Access to geolocation was blocked over secure connection with mixed content,也就是在Https的页面中引用的http的资源。

    关于其他定位失败的原因,建议参考链接:https://lbs.amap.com/faq/js-api/map-js-api/position-related/43361

    祝学习愉快!

    2021-06-24 17:41:25
问题已解决,确定采纳
还有疑问,暂不采纳

恭喜解决一个难题,获得1积分~

来为老师/同学的回答评分吧

0 星
请稍等 ...
意见反馈 帮助中心 APP下载
官方微信

在线咨询

领取优惠

免费试听

领取大纲

扫描二维码,添加
你的专属老师