獲取當前定位的經緯度並在容器內顯示當前位置 (安卓上的位置有點偏差)
在vue的index.html中需要引用
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>
相關文檔：
