一、获取key及在index.htm中引入

首先需要成为高德开发者，申请到适合项目的key.并在index.html中进行引入

<script type="text/javascript" src="https://webapi.amap.com/maps?v=1.4.3&key=d79ff396531b948ce14d5be1c733fc36"></script>

二、在配置文件中进行相应配置

根据vue脚手架的不用需要在不同的文件中进行配置。

我项目使用的是cli3的脚手架，需要在Vue.config.js中进行高德地图配置

externals: { 'AMap': 'AMap' // 高德地图配置 }

三、在需要用到的地方进行地图初始化及定位操作

因项目需求只需要在注册页面进行默认定位，故只引用一次就行。并没有单独的抽离出来，可以根据项目的需求进行抽离。

import AMap from "AMap"; // 引入高德地图data() { // debugger return { locationData: { // 用于定位相关信息提交 lat: "", // 纬度 lon: "", // 经度 province: "", // 省 city: "", // 市 district: "", // 区 县 nowPlace: "", // 省-市-区 Address: "" // 详细地址 } }; },methods:{ getLocation() { const self = this; AMap.plugin("AMap.Geolocation", function() { var geolocation = new AMap.Geolocation({ enableHighAccuracy: true, // 是否使用高精度定位，默认:true timeout: 10000, // 超过10秒后停止定位，默认：无穷大 maximumAge: 0, // 定位结果缓存0毫秒，默认：0 convert: true // 自动偏移坐标，偏移后的坐标为高德坐标，默认：true }); geolocation.getCurrentPosition(); AMap.event.addListener(geolocation, "complete", onComplete); AMap.event.addListener(geolocation, "error", onError); function onComplete(data) { // data是具体的定位信息 // debugger console.log("定位成功信息：", data); self.newGetAddress(data.position.lat, data.position.lng); } function onError(data) { // debugger // 定位出错 console.log("定位失败错误：", data); self.getLngLatLocation(); } }); }, getLngLatLocation() { const self = this; AMap.plugin("AMap.CitySearch", function() { var 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 和 citycode city: result.adcode }); var lnglat = result.rectangle.split(";")[0].split(","); geocoder.getAddress(lnglat, function(status, data) { if (status === "complete" && data.info === "OK") { // result为对应的地理位置详细信息 console.log(data); self.userInfo.ProvinceName = data.regeocode.addressComponent.province.toString(); self.userInfo.CCityName = data.regeocode.addressComponent.city; self.userInfo.RegionName = data.regeocode.addressComponent.district; } }); }); } }); }); }, newGetAddress: function(latitude, longitude) { const _thisSelf = this; _thisSelf.locationData.lat = latitude; _thisSelf.locationData.lon = longitude; const mapObj = new AMap.Map("mapAmap1"); mapObj.plugin("AMap.Geocoder", function() { const geocoder = new AMap.Geocoder({ city: "全国", // city 指定进行编码查询的城市，支持传入城市名、adcode 和 citycode radius: 100 // 以已知坐标为中心点，radius为半径，返回范围内兴趣点和道路信息 }); const lnglat = [longitude, latitude]; // 倒序反写经纬度 // 天津120 北京110 上海310 重庆500 , const reg1 = /^[1][1][0][0-9][0-9][0-9]/; const reg2 = /^[1][2][0][0-9][0-9][0-9]/; const reg3 = /^[5][0][0][0-9][0-9][0-9]/; const reg4 = /^[3][1][0][0-9][0-9][0-9]/; geocoder.getAddress(lnglat, function(status, result) { console.log("getAddress", result); if (status === "complete" && result.info === "OK") { // result为对应的地理位置详细信息 const adcode = result.regeocode.addressComponent.adcode; // 省市编码 if ( reg1.test(adcode) || reg2.test(adcode) || reg3.test(adcode) || reg4.test(adcode) ) { _thisSelf.locationData.city = result.regeocode.addressComponent.province; } else { _thisSelf.locationData.city = result.regeocode.addressComponent.city; } // 提取 省 市 区 详细地址信息 重拼装省-市-区信息 _thisSelf.locationData.province = result.regeocode.addressComponent.province; _thisSelf.locationData.district = result.regeocode.addressComponent.district; _thisSelf.locationData.Address = result.regeocode.formattedAddress; _thisSelf.locationData.nowPlace = result.regeocode.addressComponent.province + result.regeocode.addressComponent.city + result.regeocode.addressComponent.district; _thisSelf.userInfo.ProvinceName = _thisSelf.locationData.province; _thisSelf.userInfo.CCityName = _thisSelf.locationData.city; _thisSelf.userInfo.RegionName = _thisSelf.locationData.district; } else { console.log(_thisSelf.locationData); // 回调函数 } }); }); }}, created() { this.getLocation(); }

至此整个定位的实现全部结束，可以准确的获取到当前所在的省市区。

总结

以上所述是小编给大家介绍的vue中实现高德定位功能，希望对大家有所帮助，如果大家有任何疑问请给我留言，小编会及时回复大家的。在此也非常感谢大家对网站的支持！
如果你觉得本文对你有帮助，欢迎转载，烦请注明出处，谢谢！