地图定位失败问题修复

components/bazaar-city_list/index.vue

@@ -1,12 +1,13 @@
 <template>
 	<view class="citylist">
-		<scroll-view :style="{'height':windowH}" scroll-y="true" :scroll-top="scrollTop"  show-scrollbar="false" @scroll="scroll" >
+		<scroll-view :style="{'height':windowH}" scroll-y="true" :scroll-top="scrollTop" show-scrollbar="false"
+			@scroll="scroll">
 			<view>
 				<view class="city-list-container">
 					<!-- 定位城市 -->
 					<view class="city-list-content" id="location_city">
 						<view class="city-title">定位城市</view>
-						<view class="city-list city-list-inline" @tap="location">
+						<view class="city-list city-list-inline" @tap="selectedCity(locationCity)">
 							<view class="location-city">{{locationCity}}</view>
 						</view>
 					</view>
@@ -14,9 +15,10 @@
 					<view id="hotcity" class="city-list-content">
 						<view class="city-title">
 							{{hotcity.title}}
-						</view> 
+						</view>
 						<view class="city-list city-list-inline">
-							<view class="city-item" v-for="(item,index) in hotcity.lists" :key="`city${index}`" @tap="selectedCity(item)">
+							<view class="city-item" v-for="(item,index) in hotcity.lists" :key="`city${index}`"
+								@tap="selectedCity(item)">
 								{{item}}
 							</view>
 						</view>
@@ -28,7 +30,8 @@
 								{{city.title}}
 							</view>
 							<view class="city-list city-list-block">
-								<view class="city-item" v-for="(item,index) in city.lists" :key="`item${index}`" @tap="selectedCity(item)">
+								<view class="city-item" v-for="(item,index) in city.lists" :key="`item${index}`"
+									@tap="selectedCity(item)">
 									{{item}}
 								</view>
 							</view>
@@ -45,7 +48,8 @@
 		<view class="navrightcity">
 			<view class="nav-item nav-letter" @tap="scroll_to_city(0)">定</view>
 			<view class="nav-item nav-letter" @tap="scroll_to_city(1)">热</view>
-			<view v-for="(item,index) in citylist" :key="`nav${index}`" class="nav-item nav-letter" @click="scroll_to_city(index+2)">
+			<view v-for="(item,index) in citylist" :key="`nav${index}`" class="nav-item nav-letter"
+				@click="scroll_to_city(index+2)">
 				{{item.title}}
 			</view>
 		</view>
@@ -54,24 +58,26 @@
 
 <script>
 	import CL from './citylist.json'
-	export default{
-		props:{
-			getCity:{
-				type:Function,
-				default:function(){}
+	export default {
+		props: {
+			getCity: {
+				type: Function,
+				default: function() {}
 			}
 		},
-		computed:{
-			fixedTitle(){
+		computed: {
+			fixedTitle() {
 				if (this.scrollY < 0) {
 					return ''
 				}
 				return this.title && this.title[this.currentIndex]
 			}
 		},
-		watch:{
-			scrollY(newY){
-				const {tops} = this
+		watch: {
+			scrollY(newY) {
+				const {
+					tops
+				} = this
 				const index = tops.findIndex((top, index) => {
 					this.diff = tops[index + 1] - newY
 					return newY >= top && newY < tops[index + 1]
@@ -87,107 +93,141 @@
 				this.fixedStyle = `translate3d(0,${this.fixedTop}px,0)`
 			}
 		},
-		data(){
-			return{
-				scrollY:-1,//滚动记录
-				tops:[],//每一个.city-title 距离顶部的距离
-				diff:-1, // 
-				citylist:{},
-				hotcity:{},
-				currentIndex:0,
-				title:[],
-				windowH:"",
-				scrollTop:0,
-				fixedStyle:"translate3d(0,0,0)",
-				fixedTop:0,
-				locationCity:"定位中...."
+		data() {
+			return {
+				scrollY: -1, //滚动记录
+				tops: [], //每一个.city-title 距离顶部的距离
+				diff: -1, // 
+				citylist: {},
+				hotcity: {},
+				currentIndex: 0,
+				title: [],
+				windowH: "",
+				scrollTop: 0,
+				fixedStyle: "translate3d(0,0,0)",
+				fixedTop: 0,
+				locationCity: "定位中...."
 			}
 		},
-		methods:{
+		methods: {
 			// 初始化数据列表
-			initCityList(){
+			initCityList() {
 				let title = [];
 				this.hotcity = CL.hotcity;
 				this.citylist = CL.city
 				title.push("定位城市");
 				title.push(this.hotcity.title);
-				for(let i in this.citylist){
+				for (let i in this.citylist) {
 					title.push(this.citylist[i].title)
 				}
 				this.title = title;
 				let sysInfo = uni.getSystemInfoSync();
 				this.windowH = sysInfo.windowHeight + "px"
-			} ,
-			initTop(){
+			},
+			initTop() {
 				// 1. 初始化tops
 				const query = uni.createSelectorQuery();
 				query.select('#location_city').boundingClientRect()
-				.select('#hotcity').boundingClientRect()
-				.selectAll('.city_title_wrap').boundingClientRect()
-				.exec((list)=>{
-					let tops = []
-					let top = 0
-					tops.push(top);
-					if(list[0]){
-						top += list[0].height;
-						tops.push(top)
-					}
-					if(list[1]){
-						top += list[1].height;
-						tops.push(top)
-					}
-					if(list[2].length !== 0){
-						for(let i in list[2]){
-							top+= list[2][i].height
-							tops.push(top);
+					.select('#hotcity').boundingClientRect()
+					.selectAll('.city_title_wrap').boundingClientRect()
+					.exec((list) => {
+						let tops = []
+						let top = 0
+						tops.push(top);
+						if (list[0]) {
+							top += list[0].height;
+							tops.push(top)
 						}
-					}
-					this.tops = tops;
-				})
+						if (list[1]) {
+							top += list[1].height;
+							tops.push(top)
+						}
+						if (list[2].length !== 0) {
+							for (let i in list[2]) {
+								top += list[2][i].height
+								tops.push(top);
+							}
+						}
+						this.tops = tops;
+					})
 			},
 			// 获取城市
 			// selectedCity({city}){
-			selectedCity(city){
+			selectedCity(city) {
 				console.log(city);
-				this.getCity&&this.getCity({city});
+				let That = this;
+				uni.chooseLocation({
+					keyword: city,
+					success(res) {
+						console.log(res,'choose location');
+						uni.setStorage({
+							key: "location",
+							data: [res.longitude, res.latitude]
+						})
+						console.log(res.address);
+						// That.locationCity = res && res.address;
+						// That.locationName = res && res.name;
+						That.confrim({
+							city: That.locationCity,
+							name: That.locationName
+						});
+					},
+					fail() {
+						console.log('--------------------- fail')
+						// That.locationCity = "定位失败，请点击重试";
+						// That.locationName = "";
+					}
+				});
+				
 			},
 			// 定位操作
-			location(){
+			location() {
 				let That = this;
-				uni.chooseLocation({
-				    success(res){
+				uni.getLocation({
+					type: 'gcj02',
+					geocode: true,
+					success(res) {
 						console.log(res);
 						uni.setStorage({
-							key:"location",
-							data:[res.longitude,res.latitude]
+							key: "location",
+							data: [res.longitude, res.latitude]
 						})
 						console.log(res.address);
-						That.locationCity = res && res.address;
-						That.locationName = res && res.name;
-						That.selectedCity({city:That.locationCity,name:That.locationName});
-				    },
-					fail(){
+						That.locationCity = res && res.address && res.address.city;
+						That.locationName = res && res.address && res.address.poiName;
+						// That.selectedCity({
+						// 	city: That.locationCity,
+						// 	name: That.locationName
+						// });
+					},
+					fail() {
 						That.locationCity = "定位失败，请点击重试";
 						That.locationName = "";
 					}
-				});
+				})
+
 			},
 			// 滚动条Y距离
-			scroll(e){
+			scroll(e) {
 				this.scrollY = e.detail && e.detail.scrollTop;
 			},
 			// 滚动到指定位置
-			scroll_to_city(index){
+			scroll_to_city(index) {
 				this.scrollTop = this.tops[index]
 				this.scrollY = scrollY
 				this.cityScroll.scrollTo(0, -scrollY, 300)
+			},
+			confrim(city){
+				this.getCity && this.getCity({
+					city
+				});
 			}
 		},
 		// 页面挂载后进行异步操作
-		created(){
+		created() {
 			this.initCityList();
 		},
-		mounted(){
+		mounted() {
 			this.location();
 			this.initTop();
 		}
@@ -195,52 +235,64 @@
 </script>
 
 <style lang="less">
-	.citylist{
+	.citylist {
 		width: 100%;
 		height: 100%;
 		overflow: hidden;
 		position: relative;
 	}
-	.city-list-container{
+
+	.city-list-container {
 		width: 100%;
 		height: 100%;
 		background-color: #ebebeb;
 		font-size: 14px;
 		color: #333;
-		.city-list-content{
+
+		.city-list-content {
 			margin-right: 25px;
 		}
-		.city-title{
+
+		.city-title {
 			padding-left: 15px;
 			line-height: 30px;
 		}
-		.city-list{
+
+		.city-list {
 			padding-right: 30px;
 		}
+
 		.city-title-letter {
 			padding-left: 25px;
 		}
+
 		.city-list-block {
 			background-color: #f5f5f5;
+
 			.city-item {
 				height: 44px;
 				line-height: 44px;
 				margin-left: 15px;
 				border-bottom: 1px solid #c8c7cc;
-				&:last-child{
+
+				&:last-child {
 					border: 0;
 				}
 			}
 		}
+
 		.city-list-inline {
 			background-color: #f5f5f5;
 			padding-bottom: 8px;
 			overflow: hidden;
-			&::after{
+
+			&::after {
 				content: "";
 				clear: both;
 			}
-			.location-city,.city-item {
+
+			.location-city,
+			.city-item {
 				float: left;
 				background: #fff;
 				width: 29%;
@@ -257,13 +309,15 @@
 				overflow: hidden;
 				text-overflow: ellipsis;
 			}
-			.location-city{
+
+			.location-city {
 				width: auto;
 				min-width: 30%;
 				padding: 0 20px;
 			}
 		}
 	}
+
 	.navrightcity {
 		position: fixed;
 		top: 50%;
@@ -273,22 +327,26 @@
 		z-index: 10;
 		text-align: center;
 		font-size: 12px;
+
 		.nav-item {
 			height: 16px;
 			height: 2.8vh;
 		}
+
 		.nav-letter {
 			width: 15px;
 			margin-left: 15px;
 		}
 	}
-	.fixtitle{
+
+	.fixtitle {
 		width: 100%;
 		position: fixed;
 		top: 0;
 		left: 0;
 		overflow: hidden;
-		.city-title{
+
+		.city-title {
 			padding-left: 15px;
 			line-height: 30px;
 			font-size: 14px;
@@ -296,4 +354,4 @@
 			background-color: #ebebeb;
 		}
 	}
-</style>
+</style>