今天在写小程序项目时，遇到一个困难就是需要一个城市定位的功能，然后从网上找了很多的方法，终于在开发者工具中可以获取到自己的地理位置，但是，当我在把进行预览的时候发现在手机上它不可以获取到位置，然后就找原因，最后找到，原来是我忘记给后台服务器配置合法域名，高德地图的，废话不多说，进入正题
先介绍一下如何获取城市定位，由于小程序官方文档只提供我们获取到经纬度，并没有获取到相关地理位置的信息，因此需要用到第三方的api来获取，所以这里用高德地图API来获取地理位置的信息
首先去高德开放平台注册一个高德地图开发者
点击注册然后出现如下图，然后按照要求填写完成注册
image.png
然后登录成功之后，点击控制台
image.png
进入之后点击应用管理——>我的应用
image.png
然后点击创建新应用，然后出来一个弹框，应用名称和应用类型自己根据自己的情况填写，没有要求
image.png
然后点击图中的+，添加key，它会弹出一个表单让你填写
image.png
你在表单中的服务平台中选择微信小程序会变成如下
image.png
然后先是填写key的名称，key规范命名会让数据统计和数据分析更准确
建议命名方式: [应用名 + 应用场景]
如:神州专车-司机端;神州专车-Demo等
最后提交，我们获取到了key
image.png
然后下载微信小程序SDK，它是提供在微信小程序中使用高德数据的功能。点击进去就可以下载https://lbs.amap.com/api/wx/download
下载好之后解压出来，然后在自己的项目中创建一个lib目录，再将解压出来的amap-wx.js 放在lib目录底下
image.png
然后我们先配置一下
var amapFile = require('../../lib/amap-wx.js');
var markersData = {
latitude: '',//纬度
longitude: '',//经度
key: "这里需要写你刚才在高德地图那获取的key"//申请的高德地图key
};
下面是完整代码
wxml
<view class='content'>
<view class='city'>{{weather.city.data}}</view>
</view>
js.
var amapFile = require('../../lib/amap-wx.js');
var markersData = {
latitude: '',//纬度
longitude: '',//经度
key: "这里需要写你刚才在高德地图那获取的key"//申请的高德地图key
};
Page({
/**
* 页面的初始数据
*/
data: {
weather: [],
},
/**
* 生命周期函数--监听页面加载
*/
onLoad: function (options) {
this.loadInfo();
},
//获取当前位置的经纬度
loadInfo: function () {
var that = this;
wx.getLocation({
type: 'gcj02', //返回可以用于wx.openLocation的经纬度
success: function (res) {
var latitude = res.latitude//维度
var longitude = res.longitude//经度
console.log(res);
that.loadCity(latitude, longitude);
}
})
},
//把当前位置的经纬度传给高德地图，调用高德API获取当前地理位置，天气情况等信息
loadCity: function (latitude, longitude) {
var that = this;
var myAmapFun = new amapFile.AMapWX({ key: markersData.key });
myAmapFun.getRegeo({
location: '' + longitude + ',' + latitude + '',//location的格式为'经度,纬度'
success: function (data) {
console.log(data);
},
fail: function (info) { }
});
myAmapFun.getWeather({
success: function (data) {
that.setData({
weather: data
})
console.log(data);
//成功回调
},
fail: function (info) {
//失败回调
console.log(info)
}
})
}
})
然后需要设置安全域名
打开微信公众平台——>点击开发——>点击开发设置，然后滑到服务器域名，设置request合法域名，将https://restapi.amap.com 中添加进去
image.png
都弄好之后，就可以在手机上预览了。
我遇到这个问题的时候，在网上找了很多，然后，感觉都不是我想要的那个答案，所以自己就把过程从头到尾都记录下来，希望帮助一些人可以，不需要浪费太多的时间。
最后提前祝大家新年快乐 (*≧▽≦) 2333333333!
