xdd-uniapp-new/store/modules/switchCity.js

import config from '@/utils/mapConfig';
import { CITY_GET_LOCATION, CITY_SELECT_COUNTY, CITY_CHANGE_CODE, CITY_CHANGE_COUNTY } from '../mutation-types';
import Vue from 'vue'
import VueJsonp from '@/utils/vue-jsonp.umd.js'
Vue.use(VueJsonp)

const state = {
  city: '定位中',
  county: '',
  province:'',
  detailAddress:'',
  countyList: [],
  currentCityCode: '',
  defaultCity: '',
  defaultCounty: '',
	latitude:'',
	longitude:''
};

const getters = {
  city: state => state.city,
  county: state => state.county,
  detailAddress: state=> state.detailAddress,
  province: state => state.province,
  currentCityCode: state => state.currentCityCode,
  defaultCity: state => state.defaultCity,
  defaultCounty: state => state.defaultCounty,
  countyList: state => state.countyList,
	latitude: state => state.latitude,
	longitude: state => state.longitude
};

const mutations = {
  // 设置当前城市信息
  [CITY_GET_LOCATION](state, payload) {
    state.city = payload.city;
    state.county = payload.county;
	state.province = payload.province;
	state.detailAddress = payload.detailAddress,
    state.currentCityCode = payload.currentCityCode;
    state.defaultCity = payload.city;
    state.defaultCounty = payload.county;
    state.countyList = [];
		state.latitude = payload.latitude;
		state.longitude = payload.longitude;
  },
  [CITY_SELECT_COUNTY](state, payload) {
    state.countyList = payload.list;
  },
  [CITY_CHANGE_CODE](state, payload) {
    state.city = payload.city;
    state.currentCityCode = payload.code;
    state.county = '';
  },
  // 在更新区级信息后，同时更新默认信息
  [CITY_CHANGE_COUNTY](state, payload) {
    state.county = payload.county;
    state.defaultCity = state.city;
    state.defaultCounty = state.county;
  }
};

const actions = {
	
  // 获取当前定位 城市 区
  [CITY_GET_LOCATION]({commit, dispatch}) {
	
// 		Vue.jsonp(
// 		'https://apis.map.qq.com/ws/geocoder/v1/?location=25.288289676896564,110.31579578706705&key=UGMBZ-S5AKU-YQGV3-47M5J-BAQ62-ZBBJW',
// 		{
// 	    //callbackName: 'QQmap',
// 	    output:'jsonp',
// 	  })
// 		.then(json => {
// 			
// 			console.log('json:'+json)
// 			let latitude = 25.288289676896564;
// 			let longitude = 110.31579578706705;
// 		  // Success.
// 			 commit({
// 			  type: CITY_GET_LOCATION,
// 			  city: json.result.ad_info.city,
// 			  currentCityCode: json.result.ad_info.adcode,
// 			  county: json.result.ad_info.district,
// 				latitude:latitude,
// 				longitude:longitude
// 			});
// 			
// 		}).catch(err => {
// 		  // Failed.
// 			console.log('地址解析失败:'+JSON.stringify(err))
// 		})
	
    uni.getLocation({
      type: 'wgs84',
      success: function(res) {
        let latitude = res.latitude;
        let longitude = res.longitude;
				
				console.log('latitude:'+latitude+'longitude:'+longitude)
				
				// #ifdef H5
				Vue.jsonp(
				'https://apis.map.qq.com/ws/geocoder/v1/?location='+latitude+','+longitude+'&key='+config.key, 
				{
				  //callbackName: 'QQmap',
				  output:'jsonp',
				}).then(json => {
				  // Success.
					// console.log('json:'+JSON.stringify(json))
// 					let latitude = 25.288289676896564;
// 					let longitude = 110.31579578706705;
					// Success.
					 commit({
					  type: CITY_GET_LOCATION,
					  city: json.result.ad_info.city,
					  detailAddress:json.result.formatted_addresses.recommend,
					  province:json.result.ad_info.province,
					  currentCityCode: json.result.ad_info.adcode,
					  county: json.result.ad_info.district,
						latitude:latitude,
						longitude:longitude
					});
					
				}).catch(err => {
				  // Failed.
					console.log('地址解析失败:'+JSON.stringify(err))
				})
				// #endif
				
				// #ifndef H5
				uni.request({
				  url: 'https://apis.map.qq.com/ws/geocoder/v1/?location='+latitude+','+longitude+'&key='+config.key,
				  success: function(res) {
						// console.log('res:'+JSON.stringify(res.data));
				    commit({
				      type: CITY_GET_LOCATION,
				      city: res.data.result.ad_info.city,
					  province:res.data.result.ad_info.province,
					  detailAddress:res.data.result.formatted_addresses.recommend,
				      currentCityCode: res.data.result.ad_info.adcode,
				      county: res.data.result.ad_info.district,
							latitude:latitude,
							longitude:longitude
				    });
				  },
					fail:function(res){
				  	console.log('地址解析失败')
				  },
					complete:function(){
						
					}
				});
				// #endif
      },
			fail:function(res){
			
     //  	uni.showToast({
     //  		title:'城市定位失败:'+JSON.stringify(res),
					// icon:'none',
					// duration:2000
     //  	})
      }
    });
		
		
  },
  // 根据城市代码 定位区县
  [CITY_SELECT_COUNTY]({ commit, state }) {
    console.log('正在定位区县');
    let code = state.currentCityCode;
		
		// #ifdef H5
		Vue.jsonp(
		'https://apis.map.qq.com/ws/district/v1/getchildren?&id='+code+'&key='+config.key,
		{
		  output:'jsonp',
		})
		.then(json => {
			
			commit({
			  type: CITY_SELECT_COUNTY,
			  list: json.result[0]
			});
			
		}).catch(err => {
		  // Failed.
			console.log('地址解析失败:'+JSON.stringify(err))
		})
		// #endif
		
		// #ifndef H5
		uni.request({
		  url: 'https://apis.map.qq.com/ws/district/v1/getchildren?&id='+code+'&key='+config.key,
		  success: function(res) {
		    commit({
		      type: CITY_SELECT_COUNTY,
		      list: res.data.result[0]
		    });
		    //console.log(res.data);
		    console.log('请求区县成功' + 'https://apis.map.qq.com/ws/district/v1/getchildren?&id='+code+'&key='+config.key);
		  },
		  fail: function() {
		    console.log('请求区县失败，请重试');
		  }
		});
		// #endif
		
		
		
		
    
		
		
  },
  // 更新城市名和城市代码
  [CITY_CHANGE_CODE]({commit}, data) {
    commit({
      type: CITY_CHANGE_CODE,
      city: data.city,
      code: data.code
    });
  },
  // 更新选择区县
  [CITY_CHANGE_COUNTY]({commit}, data) {
    commit({
      type: CITY_CHANGE_COUNTY,
      county: data.county
    });
  }
};

export default {
  namespaced: true,
  state,
  getters,
  mutations,
  actions
};