关于定位导航问题
老师,我想在移动端实现定位导航功能,
于是上网查了挺多资料,
好像需要在开发者平台获取钥匙,
<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
)
如果比较麻烦的话有其他方法定位获取经纬度信息吗?
只需要实时获取当前经纬度信息就可以了!
正在回答
同学你好,可以按照以下步骤申请Key:
1、首先,注册开发者账号,成为高德开放平台开发者
2、登陆之后,进入「应用管理」 页面,点击「创建新应用」
3、设置 Key名称,选择「服务平台」中的「 Web 端 ( JSAPI ) 」,点击「提交」即可获取到key
关于定位导航功能:
高德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积分~
来为老师/同学的回答评分吧
0 星