vue中导入百度地图获取当前位置

一般来说获取当前位置有两种方式：
1.通过script标签导入
2.通过vue-baidu-map获取到BMap
我们采用第一种方式，因为第二种方式需要导入一个地图组件（如果不想展示地图），并且获取BMap对象是从组件的Ready的回调中获取，速度就很感人了。
废话不多说，上代码。

一、首先在百度api注册获得ak密钥

二、进行引入

(1)、第一种方式：
　　　　直接在vue中index.html中用script标签引入。

//你的ak密钥需要替换真实的你的ak码
<script type="text/javascript" src="http://api.map.baidu.com/api?v=2.0&ak=uvN6vatvU44OQ0a9yuXdQZxTXODHGuLI"></script>

(2)、第二种方式：

新建js文件，我命名为loadResources，里面创建script

// 这段代码写在js文件里
export function loadBMap(funcName) {const script = document.createElement("script");script.src = "http://api.map.baidu.com/api?v=2.0&ak=uvN6vatvU44OQ0a9yuXdQZxTXODHGuLI&callback=" + funcName;document.body.appendChild(script);
}

三、运用到具体文件中

第二种方式需要在你用到的地方进行引入文件

//根据你文件的真实路径引入
import {loadBMap} from '../loadResources'created() {window.initBaiduMapScript = () =>{console.log(BMap);this.getlocation();}loadBMap('initBaiduMapScript');
},
methods:{getlocation(){this.$nextTick(function(){try{const geolocation =new BMap.Geolocation();geolocation.getCurrentPosition(function(r){console.log(r,"aaaa");if(this.getStatus() == BMAP_STATUS_SUCCESS){const{lat =null, lng=null} = r.point;}});}catch(e){console.log(e)}})}
}

因为我们不需要地图效果，因此只需要获取到经纬度就好，这边执行完就已经可以获取到经纬度了。在控制台区域可以看到我们打印出来的console.log(r,“aaaa”);证明已经获取成功。

本文来自互联网用户投稿，文章观点仅代表作者本人，不代表本站立场，不承担相关法律责任。如若转载，请注明出处。 如若内容造成侵权/违法违规/事实不符，请点击【内容举报】进行投诉反馈！