项目需求：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添加了页面的样式和动画，大家可以根据自己的需求去写，我的效果是这样的：
那么我们来看看我的目录结构，其实就是普通的路径
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; //当前定位
}
})
},
说明：微信key申请流程和高德差不多，还有jsonp的使用具体自行查下资料，我相信这点小事难不倒你，一起加油吧打工人。
8056
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
