uniapp / H5 jssdk 高德地图获取城市信息

高德地图API获取城市

方法一

<script type="text/javascript">
window._AMapSecurityConfig = {
	securityJsCode:'111111111111',
}
</script>
<script src="https://webapi.amap.com/maps?v=2.0&key=11111111111111111"></script>

key、securityJsCode 自己看文档获取

// 获取当前城市
    getCurrentlocation() {
    	// 方法内部使用this, this指向有问题。也可以用bind修改this指向
    	const that = this
	      AMap.plugin('AMap.CitySearch', function () {
	        var citySearch = new AMap.CitySearch()
	        citySearch.getLocalCity(function (status, result) {
	          if (status === 'complete' && result.info === 'OK') {
	            // 查询成功，result即为当前所在城市信息
	            that.shi = result.city
	            uni.setStorageSync('shi', this.shi)
	          }
	        })
	      })
    },

高德定位获取城市名称

方法二

1. 下载小程序用的sdk
   微信小程序用的sdk，高德官方下载地址

2. 把下载的sdk js文件放在自己项目中

3. 页面中引入js

4. 高德官网获取小程序key 高德开放平台

<script>
const amapFile = require('@/utils/amap-wx')

export default {
	methods: {
	    // 获取当前城市信息
	    getCurrentlocation() {
	      const map = new amapFile.AMapWX({
	        key: '高德地图申请小程序的专用 key',
	      })
	      map.getRegeo({
             //加上这个，代表根据经纬度获取省市区等位置信息,不加location这个参数，则根据IP获取位置信息
            // location: this.longitude + ',' + this.latitude,
	        success: (data) => {
	          this.shi = data[0].regeocodeData.addressComponent.city
              this.formData.sheng = data[0].regeocodeData.addressComponent.province
              this.formData.shi = data[0].regeocodeData.addressComponent.city
              this.formData.qu = data[0].regeocodeData.addressComponent.district
	        },
	      })
	    },
	},
}

逻辑流程参照引用文件CSDN文件