| | |
| | | <script> |
| | | import BaseOpera from '@/components/base/BaseOpera' |
| | | import GlobalWindow from '@/components/common/GlobalWindow' |
| | | import { jsonp } from 'vue-jsonp' |
| | | |
| | | export default { |
| | | name: 'OperaShopWindow', |
| | | extends: BaseOpera, |
| | |
| | | return { |
| | | geocoder: null, |
| | | map: [], |
| | | searchValue:'', |
| | | marker:null, |
| | | searchValue: '', |
| | | marker: null, |
| | | // 表单数据 |
| | | provinces: [], |
| | | cities: [], |
| | |
| | | }) |
| | | }, |
| | | methods: { |
| | | searchAddress( ){ |
| | | if(this.geocoder && this.searchValue){ |
| | | this.geocoder.getLocation(this.searchValue) |
| | | searchAddress () { |
| | | if ( this.searchValue) { |
| | | var that = this |
| | | jsonp('https://apis.map.qq.com/ws/geocoder/v1/', { |
| | | address: this.searchValue, |
| | | key: 'HIDBZ-2QXL4-TAWUD-XET6Q-EKTJE-CCBSQ', |
| | | output: 'jsonp' |
| | | }).then(result => { |
| | | console.log(result) |
| | | if(result.result.location){ |
| | | that.changePostion(result.result.location.lng, result.result.location.lat) |
| | | } |
| | | }).catch(error => { |
| | | // 请求失败处理 |
| | | console.log(error) |
| | | }) |
| | | } |
| | | }, |
| | | initMap (lat, long) { |
| | |
| | | center: center, |
| | | zoom: 17 |
| | | }) |
| | | this.changePostion(long,lat) |
| | | this.changePostion(long, lat) |
| | | qq.maps.event.addListener(this.map, 'click', |
| | | function (event) { |
| | | that.changePostion(event.latLng.lng, event.latLng.lat) |
| | | } |
| | | ) |
| | | this.geocoder = new qq.maps.Geocoder() |
| | | /* this.geocoder = new qq.maps.Geocoder() |
| | | this.geocoder.setComplete(function (result) { |
| | | that.changePostion(result.detail.location.lng,result.detail.location.lat) |
| | | that.changePostion(result.detail.location.lng, result.detail.location.lat) |
| | | }) |
| | | // 若服务请求失败,则运行以下函数 |
| | | this.geocoder.setError(function () { |
| | | console.log('逆解析失败') |
| | | }) |
| | | this.geocoder.setError(function (e) { |
| | | console.log(that.searchValue + '=====逆解析失败') |
| | | })*/ |
| | | }, |
| | | open (title, target) { |
| | | this.title = title |
| | |
| | | const mapContainer = this.$refs.mapContainer // 获取地图容器 |
| | | if (mapContainer) { |
| | | // 初始化地图之前检查容器是否存在 |
| | | this.initMap(this.form.latitude,this.form.longitude) |
| | | this.initMap(this.form.latitude, this.form.longitude) |
| | | // 初始化腾讯地图 |
| | | } |
| | | }) |
| | |
| | | .then(res => { |
| | | this.provinces = res |
| | | }) |
| | | if (this.form.provinceCode) { |
| | | this.selectProvince(this.form.provinceCode, true) |
| | | } |
| | | }, |
| | | // 选择省份 |
| | | selectProvince (val) { |
| | | selectProvince (val, isInit) { |
| | | this.provinces.forEach(item => { |
| | | if (item.id == val) { |
| | | this.form.provinceName = item.name |
| | |
| | | }) |
| | | this.cities = [] |
| | | this.areas = [] |
| | | this.form.cityName = '' |
| | | this.form.areaCode = '' |
| | | this.form.cityCode = '' |
| | | this.form.areaName = '' |
| | | if(!val || val ==''){ |
| | | if (!isInit) { |
| | | this.form.cityName = '' |
| | | this.form.areaCode = '' |
| | | this.form.cityCode = '' |
| | | this.form.areaName = '' |
| | | } |
| | | if (!val || val == '') { |
| | | return |
| | | } |
| | | this.api.areaList({ pid: val }) |
| | | .then(res => { |
| | | this.cities = res |
| | | this.selectCity(this.form.cityId) |
| | | if (isInit) { |
| | | this.selectCity(this.form.cityCode, isInit) |
| | | } |
| | | }) |
| | | }, |
| | | // 选择城市 |
| | | selectCity (val) { |
| | | selectCity (val, isInit) { |
| | | this.cities.forEach(item => { |
| | | if (item.id == val) { |
| | | this.form.cityName = item.name |
| | | } |
| | | }) |
| | | this.areas = [] |
| | | this.form.areaCode = '' |
| | | this.form.areaName = '' |
| | | if(!val || val ==''){ |
| | | if (!isInit) { |
| | | this.form.areaCode = '' |
| | | this.form.areaName = '' |
| | | } |
| | | if (!val || val == '') { |
| | | return |
| | | } |
| | | this.api.areaList({ pid: val }) |
| | |
| | | } |
| | | }) |
| | | }, |
| | | changeMapCenter(){ |
| | | this.searchValue = (this.form.provinceName||'')+(this.form.cityName||'')+(this.form.areaName||'')+(this.form.address||'') |
| | | changeMapCenter () { |
| | | this.searchValue = (this.form.provinceName || '') + (this.form.cityName || '') + (this.form.areaName || '') + (this.form.address || '') |
| | | this.searchAddress() |
| | | }, |
| | | changePostion (lng, lat) { |
| | | if (lng || lat) { |
| | | this.form.longitude = lng |
| | | this.form.latitude = lat |
| | | if(this.map){ |
| | | if(this.marker){ |
| | | if (this.map) { |
| | | if (this.marker) { |
| | | this.marker.setMap(null) |
| | | } |
| | | var pos =new qq.maps.LatLng(lat,lng); |
| | | var pos = new qq.maps.LatLng(lat, lng) |
| | | this.map.setCenter(pos) |
| | | this.marker= new qq.maps.Marker({ |
| | | this.marker = new qq.maps.Marker({ |
| | | position: pos, |
| | | animation:qq.maps.MarkerAnimation.DROP, |
| | | map:this.map |
| | | animation: qq.maps.MarkerAnimation.DROP, |
| | | map: this.map |
| | | }) |
| | | } |
| | | } |