<template> <p> <p style="width: 630px; height: 530px; top: -20px" v-if="getLocationInfoDialog"></p> <input type="hidden" /> <input type="hidden" /> <input type="hidden" /> <input type="hidden" /> <input type="hidden" /> <el-row style="text-align:center"> <el-button style="width:100px" type="warning" @click="addLocation()">確認</el-button> </el-row>
<el-input v-model="adressKeywords" @input="getCoordinates()" @change="getCoordinates()" clearable placeholder="請輸入地址"></el-input> </p></template><script>var geocoder, map, marker = null;export default { data() { return { adressKeywords:'', getLocationInfoDialog: true, childValue: { storeAddress1: '', //地址 longitude1: '', //經度 latitude1: '', //緯度 city1: '', //城市 province1: ''//省 } }; },
created () { },
methods: { onSearch(value) { geocoder.getLocation(value); }, //通過$emit方法將地圖的經緯度傳到上一個頁面 addLocation() { this.childValue.longitude1 = document.getElementById('longitude1').innerText; this.childValue.latitude1 = document.getElementById('latitude1').innerText; this.childValue.storeAddress1 = document.getElementById('storeAddress1').innerText; this.childValue.city1 = document.getElementById('city1').innerText; this.childValue.province1 = document.getElementById('province1').innerText;
this.$emit('storePropertyAdd', this.childValue); var longitude1=this.childValue.longitude1; var latitude1=this.childValue.latitude1; var storeAddress1=this.childValue.storeAddress1; if(longitude1&&latitude1&&storeAddress1!=null){ this.$emit('hideAddDialog'); } },
getLocationInfo() { this.getLocationInfoDialog = true; //input獲得焦點打開彈窗 },
getCoordinates() { // 獲取當前地理位置信息 let data = { key: "XXX" //申請的密鑰 }; let url = "https://apis.map.qq.com/ws/location/v1/ip"; //地理位置信息接口
let secondUrl = "https://apis.map.qq.com/ws/geocoder/v1/?address=" + this.adressKeywords; //根據輸入地址獲取對應的經緯度信息
data.output = "jsonp";
this.$jsonp(this.adressKeywords == '' ? url : secondUrl, data)
.then(res => { this.childValue.longitude1 = res.result.location.lng //經度 this.childValue.latitude1 = res.result.location.lat //緯度 }) .catch(error => { console.log(error); }); // 根據關鍵字重新獲取地理位置 this.init()
},
init() { console.log('調用了init方法');
var address = ''; var longitude = ''; var latitude = ''; var city = ''; var province ='';
var center = new qq.maps.LatLng(this.childValue.latitude1 ? this.childValue.latitude1 : 31.300967383561886, this.childValue.longitude1 ? this.childValue.longitude1 : 120.58501872161287);
var map = new qq.maps.Map(document.getElementById('map'), { //獲取頁面id center: center, zoom: 13, disableDefaultUI: true }); var marker = new qq.maps.Marker({ position: center, map: map }); var infoWin = new qq.maps.InfoWindow({ map: map }); var geocoder = new qq.maps.Geocoder({ complete: function (res) { address = res.detail.address; city = res.detail.addressComponents.city; province = res.detail.addressComponents.province; document.getElementById('storeAddress1').innerText = address; document.getElementById('city1').innerText =city; document.getElementById('province1').innerText = province; } });
//點擊地圖事件 qq.maps.event.addListener(map, 'click', function (event) { //console.log('event',event) longitude = event.latLng.getLat(); latitude = event.latLng.getLng(); let lat = new qq.maps.LatLng(longitude, latitude); geocoder.getAddress(lat); setTimeout(() => { infoWin.open(); infoWin.setContent('<p style="text-align:center;white-space:nowrap;">' + address + '</p>'); infoWin.setPosition(event.latLng); }, 500); document.getElementById('longitude1').innerText = longitude; document.getElementById('latitude1').innerText = latitude; }); // this.adressKeywords = '' } }, mounted() { this.getCoordinates()
setTimeout(()=>{ this.init() },1000) }};</script>
<style></style>
