博客

1.web端不需要下载插件，申请web的key就可以了，如果是小程序，需要下载插件，并申请微信小程序key

插件下载：

相关下载-微信小程序插件 | 高德地图API (amap.com)

2.操作步骤：进去上面网址下载插件后根据《

入门指南

》去申请相应用到的

key

3.代码:代码里web和移动端两种方法都写了，需要哪个用哪个

注意：如果是微信小程序：api内容不用改变；

如果是app：api需要改下=>(


wx.request


替换为


uni.request


)，否则接口会报错；

如果是web端：不用引入api；

<template>
  <view>   
<u--form labelPosition="left" :model="form" :rules="rules">
          <u-form-item label="定位" prop="clockAddress" borderBottom labelWidth="100px" @click="getLocation">
         
            <u--input v-model="form.clockAddress" border="none" inputAlign="right" placeholder="请选择"></u--input>

          </u-form-item>
</u--form>
 
  </view>
</template>

<script>

var amapFile = require('@/api/amap-wx.130.js') 
export default {


  data() {
    return {
      form:{}
      rules: [],

    };
  },
 
  methods: {
    // 获取当前位置
    getLocation() {
      const _this = this
      uni.getLocation({

        type: 'wgs84',
        geocode: true,//设置该参数为true可直接获取经纬度及城市信息
        success: function (res) {
          //web端获取定位
          // _this.loadCity(res.longitude, res.latitude)
          //移动端获取定位
          _this.getCity(res.latitude, res.longitude)

        }
      })
    },
    //移动端获取定位
    getCity(latitude, longitude) {
				console.log(longitude, latitude)
				var that = this;
				//这里key需要自己在高德地图申请，微信小程序就必须选择微信小程序key
				that.location = `${longitude},${latitude}`
				var myAmapFun = new amapFile.AMapWX({
					key: '放自己申请的key',
					// batch: true
				});
				myAmapFun.getRegeo({
				//如果经纬度有问题会导致不进入回调方法，从而报错
					location: that.location,
					success: function(e) {
            debugger
						console.log(e)
						//成功回调
						that.form.clockAddress = e[0].regeocodeData.formatted_address; //详细地址
            that.form.clockTime = that.getNowTime()
					},
					fail: function(info) {
						//失败回调
						console.log(info)
					}
				})
			}, //关闭弹框

//web获取定位
    loadCity(longitude, latitude) {
      console.log(longitude, latitude,'经纬度');
      const _this = this
      uni.request({
        header: {
          'Content-Type': 'application/text',
        },
        //注意:这里的key值需要高德地图的 web服务生成的key  只有web服务才有逆地理编码
        url:
          'https://restapi.amap.com/v3/geocode/regeo?output=JSON&location=' +
          longitude +
          ',' +
          latitude +
          '&key=' +
          '放自己申请的key' +
          '&radius=1000&extensions=all',
        success(res) {
          if (res.statusCode === 200) {
            console.log(res,'返回值');
            _this.form.clockAddress = res.data.regeocode.addressComponent.city
            console.log('获取中文街道地理位置成功', _this.form.clockAddress)
          } else {
            console.log('获取信息失败，请重试！')
          }
        },
      })
    },