vue H5中获取用户当前位置、城市(高德地图)
首先先在项目的public/index.html中引入高德地图(key值申请不懂的可以看官方文档:准备-入门-教程-地图 JS API v2.0 | 高德地图API<script type="text/javascript" src="https://webapi.amap.com/maps?v=2.0&key=您申请的key值"></script>高德地图的引入在
·
首先先在项目的public/index.html中引入高德地图(key值申请不懂的可以看官方文档:准备-入门-教程-地图 JS API v2.0 | 高德地图API
<script type="text/javascript" src="https://webapi.amap.com/maps?v=2.0&key=您申请的key值"></script>
高德地图的引入在其他<script>之前,放前面先让高德地图先加载 ,不然会经常出现AMap is not defined的问题~
接着在你需要获取当前位置的页面引入AMap
import AMap from "AMap";
在mounted中
AMap.plugin("AMap.Geolocation", () => {
var geolocation = new AMap.Geolocation({
// 是否使用高精度定位,默认:true
enableHighAccuracy: true,
// 设置定位超时时间,默认:无穷大
timeout: 10000,
});
geolocation.getCityInfo((status, result) => { //只能获取当前用户所在城市和城市的经纬度
if (status == "complete") {
console.log("result",result)
}
})
geolocation.getCurrentPosition((status, result) => { //获取用户当前的精确位置
if (status == "complete") {
console.log("result",result)
}
})
})
getCurrentPosition需要在https环境下才不会报错,我都是部署到测试环境进行测试的。
更多推荐
已为社区贡献1条内容
所有评论(0)