700字范文,内容丰富有趣,生活中的好帮手!
700字范文 > vue获取地理位置自动定位---腾讯地图

vue获取地理位置自动定位---腾讯地图

时间:2021-08-03 22:01:29

相关推荐

vue获取地理位置自动定位---腾讯地图

前两天因为工作需求需要获取地理位置

打开腾讯地图定位

找到控制台

选择新建应用

应用名称和类型选择好了后

添加key

这里就获取到了定位

在vue视图中需要定位的

<div class="locationWrapper" @click="getPosition"><span class="address">{{(province+city)||'请选择所在区域'}}</span>

js代码

export default{name:'Header',data(){return{longitude:0,//经度latitude:0,//维度city:'',//城市province:''//省}},mounted() {//this.getLocation()},methods:{//获取定位getLocation(){var geolocation = new window.qq.maps.Geolocation("WVRBZ-RMI6R-S46WU-WARXB-6V4WO-UWBIO", "myapp");geolocation.getLocation(this.showPosition, this.errorPosition);},showPosition(position){console.log(position);this.longitude=position.lng;this.latitude=position.lat;this.city=position.city;this.province=position.province;},errorPosition(){console.log('定位失败');//继续定位this.getLocation();},getPosition(){//点击一次获取一次this.getLocation()}}}

在vue的public里面的index.html里面加入以下script代码

<script type="text/javascript" src="/web/mapComponents/geoLocation/v/geolocation.min.js"></script>

本内容不代表本网观点和政治立场,如有侵犯你的权益请联系我们处理。
网友评论
网友评论仅供其表达个人看法,并不表明网站立场。