获取当前定位的经纬度并在容器内显示当前位置 (安卓上的位置有点偏差)
![H5调用腾讯地图-LMLPHP]( "H5调用腾讯地图-LMLPHP")
在vue的index.html中需要引用
![H5调用腾讯地图-LMLPHP]( "H5调用腾讯地图-LMLPHP")
template
<div id="container" style="width:600px;height:500px;"></div>
javaScript
<script>
export defalut {
data(){
return {
longitude:0,//经度
latitude:0,//纬度
city:''
}
},
mounted(){
this.getMyLocation(); //腾讯地图定位当前的位置
},
methods: {
//第一部分
//定位获得当前位置信息
getMyLocation() {
var geolocation = new qq.maps.Geolocation("you key", "youkeyname");
//geolocation.getIpLocation(this.showPosition, this.showErr);
geolocation.getLocation(this.showPosition, this.showErr);//或者用getLocation精确度比较高
},
showPosition(position) {
console.log(position);
this.latitude = position.lat;
this.longitude = position.lng;
this.city = position.city;
console.log(this.latitude,'this.latitude',this.longitude,'this.longitude',this.city,'this.city')
this.setMap();
},
showErr() {
console.log("定位失败");
this.getMyLocation();//定位失败再请求定位，测试使用
},
//第二部分
//位置信息在地图上展示
setMap() {
//步骤：定义map变量 调用 qq.maps.Map() 构造函数 获取地图显示容器
//设置地图中心点
var myLatlng = new qq.maps.LatLng(this.latitude,this.longitude);
//定义工厂模式函数
var myOptions = {
zoom: 100, //设置地图缩放级别
center: myLatlng, //设置中心点样式
mapTypeId: qq.maps.MapTypeId.ROADMAP //设置地图样式详情参见MapType
}
//获取dom元素添加地图信息
var map = new qq.maps.Map(document.getElementById("container"), myOptions);
//第三部分
//给定位的位置添加图片标注
var marker = new qq.maps.Marker({
position: myLatlng,
map: map
});
//给定位的位置添加文本标注
var marker = new qq.maps.Label({
position: myLatlng,
map: map,
content:'这是我当前的位置，偏差有点大，哈哈'
});
}
}
}
</script>
相关文档：