uniapp h5使用定位获取当前城市

码农九零

已于 2022-04-04 19:17:23 修改

阅读量1.7w

点赞数 10

分类专栏： uniapp vue 文章标签： javascript vue html5

于 2020-05-12 18:37:08 首次发布

本文链接：https://blog.csdn.net/qq_31676725/article/details/106080943

版权

vue 同时被 2 个专栏收录

3 篇文章 0 订阅

订阅专栏

uniapp

1 篇文章 0 订阅

订阅专栏

项目需求：uniapp做的h5打开首页后需要在右上角获取当前城市

看来一下官方的api，h5根本拿不到当前城市。
于是我想到了搜狐公布的接口，很不错，可惜手机不在wifi的情况下只能拿到CHINA这个值。
那咋整，当然我只能调第三方地图的sdk来获取了。

方法一：高德地图

这里虽然选择高德地图，但是怎么使用还是个坑，搜了很多文档，相关如下

1、注册高德地图。进入控制台

2、找到应用管理，创建新应用

在这里插入图片描述

3、创建好以后，为应用添加key，点击添加

在这里插入图片描述
添加完以后就能看到key了

4、接下来我们去新建一个html，直接上代码，代码中在页面打开时直接获取定位，获取成功后自动存到本地，以供我们使用

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=0" charset="utf-8">
    <title>获取定位</title>
</head>
<body>
    <div id='info'>
		<div id="">
			<div class="imgdiv"><img src="./img/cityloading.png" ></div>
			<div id="city">正在获取您当前的位置...</div>
		</div>
	</div>
	
	<script type="text/javascript" src="https://webapi.amap.com/maps?v=1.4.15&key=你高德的key值&plugin=AMap.CitySearch"></script>
	
	<script type="text/javascript">
		document.addEventListener('DOMContentLoaded',function(){
			var returnBase = "http://localhost:8080/ysq/h5/cxysq/test/";
			//获取用户所在城市信息
			function showCityInfo() {
				//实例化城市查询类
				var citysearch = new AMap.CitySearch();
				//自动获取用户IP，返回当前城市
				citysearch.getLocalCity(function(status, result) {
					console.log(result)
					if(status === 'complete' && result.info === 'OK'){
						console.log(result.city)
						//城市存到本地
						localStorage.setItem('cityLocation', result.city);
					}
				});
			}
			showCityInfo();
		},false)
	</script>
</body>
</html>

特别提示：一定要把html里这行代码的key值换成你自己的

<script type="text/javascript" src="https://webapi.amap.com/maps?v=1.4.15&key=你高德的key值&plugin=AMap.CitySearch"></script>

5、单独在浏览器上运行一下我们的html，打开控制台key看到

在这里插入图片描述

6、html是获取到了，但是怎么在uniapp里面拿到呢，也许大家有更好的办法，但是我查了很多文档确实只有我自己的这个方法比较靠谱

由于我们是html页面，只能通过web-view组件才能实现我们html页面可以在uniapp的.vue文件中显示，说到这里大家可以去看一下官方的uniapp对web-view的讲解。其实很简单，实现代码如下：

首先我为我的html添加了页面的样式和动画，大家可以根据自己的需求去写，我的效果是这样的：
在这里插入图片描述
那么我们来看看我的目录结构，其实就是普通的路径

blog.csdnimg.cn/20200512175448966.png)

7、在index.vue里写web-view

<web-view src="../../hybrid/html/location.html"></web-view>

效果很明显可以看到，我们的这个html显示在我们当前的index.vue里面了，想我这里就不放图了，自己测测，一定要显示了再往下看，不显示证明你的web-view没写对。

8、继续往下看大家可以看到我写了个if判断`ifCity`

在这里插入图片描述

9、业务逻辑是这样的，页面打开时先获取当前定位，然后把定位城市存到本地，所以每次页面打开时先去获取存到本地的城市，如果有就`ifCity`不变，默认为`false`，不用打开这个执行这个web-view组件，如果没有`ifCity`为`true`，执行这个web-view组件，html就会把城市存到本地。

这里我用了一个比较笨拙的办法，那就是setTimeout，因为我发现如果一起执行的话，我uniapp是不会等web-view存到本地再去获取的，他们会一起执行，所以得先让ifCity = true;存到本地后我再去获取，因为这样所以我延迟了1800毫秒后再去执行aciquirePlace()方法

onShow() {
	var that = this;
	if(!that.city || that.city == ''){
		// 获取当前位置
		that.ifCity = true;
		setTimeout(function(){
			that.aciquirePlace();
		},1800)
	}else{
		that.city = uni.getStorageSync("city");
	}
	that.queryCommunity(that.city);
},
methods: {
// 获取当前城市
	aciquirePlace(){
		var that = this;
		var cityLocation = uni.getStorageSync('cityLocation');
		if(cityLocation){
			that.ifCity = false;
			that.city = cityLocation;
			that.queryCommunity(that.city);
		}else{
			that.ifCity = false;
			uni.showToast({
			    title: '定位获取失败，请手动选择',
				icon:'none',
			    duration: 2000
			});
		}
	}
}

方法二：腾讯地图

如果没有必须使用高德的需求，建议使用腾讯，简单快捷，而且uniapp官方也是讲H5最好使用腾讯地图。

1、先使用官方的api获取当前经纬度（在电脑本地无法获取，需要手机上测试）

uni.getLocation({
    type: 'wgs84',
    success: function (res) {
		console.log(res)
		that.longitude = res.longitude;
		that.latitude = res.latitude;
		that.loAcquire(that.longitude,that.latitude)
    }
});

2、使用`$jsonp`请求微信官方提供的获取定位的接口

loAcquire(longitude,latitude){
	let that = this;
	uni.showLoading({
	    title: '加载中',
		mask:true
	});
	let str =  `output=jsonp&key=你的key&location=${latitude},${longitude}`
	this.$jsonp('https://apis.map.qq.com/ws/geocoder/v1/?'+str,{}).then(res=>{
	  console.log(res);
	  uni.hideLoading();
	  if(res.status == 0){
		  that.locationName = res.result.address; //当前定位
	  }
	})
},