微信小程序之使用高德地图获取城市位置

今天在写小程序项目时，遇到一个困难就是需要一个城市定位的功能，然后从网上找了很多的方法，终于在开发者工具中可以获取到自己的地理位置，但是，当我在把进行预览的时候发现在手机上它不可以获取到位置，然后就找原因，最后找到，原来是我忘记给后台服务器配置合法域名，高德地图的，废话不多说，进入正题

先介绍一下如何获取城市定位，由于小程序官方文档只提供我们获取到经纬度，并没有获取到相关地理位置的信息，因此需要用到第三方的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

  
        {{weather.city.data}}
  

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!