Vue 使用高德地图获取城市代码

1.申请key 

 2.在页面添加 JS API 的入口脚本标签 

<script type="text/javascript" src="https://webapi.amap.com/maps?v=1.4.15&key=您申请的key值"></script>

3.vue.config.js 配置 externals

module.exports = {publicPath: process.env.NODE_ENV === 'production'? './': '/',configureWebpack: {externals: {'AMap': 'AMap','AMapUI': 'AMapUI'}},css: {loaderOptions: {sass: {additionalData:`@import "./src/assets/scss/public";` }}} }

4.页面使用

mounted() {this.getLngLatLocation();}, methods: {// 获取当前位置getLocation () {const self = this;AMap.plugin('AMap.Geolocation', function () {var geolocation = new AMap.Geolocation({// 是否使用高精度定位，默认：trueenableHighAccuracy: true,// 设置定位超时时间，默认：无穷大timeout: 10000});geolocation.getCurrentPosition();AMap.event.addListener(geolocation, 'complete', onComplete);AMap.event.addListener(geolocation, 'error', onError);function onComplete (data) {debugger // data是具体的定位信息console.log('定位成功信息：', data.addressComponent.city);self.city = data.addressComponent.city;}function onError (data) {// 定位出错console.log('定位失败错误：', data);// 调用IP定位self.getLngLatLocation();}});},// 通过IP获取当前位置getLngLatLocation () {AMap.plugin('AMap.CitySearch', function () {debuggervar citySearch = new AMap.CitySearch();citySearch.getLocalCity(function (status, result) {if (status === 'complete' && result.info === 'OK') {// 查询成功，result即为当前所在城市信息console.log('通过ip获取当前城市：', result);// 逆向地理编码AMap.plugin('AMap.Geocoder', function () {var geocoder = new AMap.Geocoder({// city 指定进行编码查询的城市，支持传入城市名、adcode 和 citycodecity: result.adcode});var lnglat = result.rectangle.split(';')[0].split(',');geocoder.getAddress(lnglat, function (status, data) {if (status === 'complete' && data.info === 'OK') {debugger // result为对应的地理位置详细信息console.log(data);}});});}});});}}

以上；

总结

以上是生活随笔为你收集整理的Vue 使用高德地图获取城市代码的全部内容，希望文章能够帮你解决所遇到的问题。

如果觉得生活随笔网站内容还不错，欢迎将生活随笔推荐给好友。