Vue Cli4 使用高德地图定位获取当前经纬度信息以及周边定位

以上是最终效果图下面开始代码分享

第一步在index,html引入高德地图模块

 `    <!-- 高德地图 --><script type="text/javascript" src="https://webapi.amap.com/maps?v=1.4.1&key=58b4d21fc077537dda2dcbe756a1c9&plugin=AMap.Geocoder"></script>`

第二步在Vue.config中配置

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

注意配置完Vue.Config.js 记得 run dev
只要以上配置完成在打开页面的时候就会自动引入高德地图了

第三步在你页面需要显示地图的地方创建地图显示容器

   <div id="container"><div @click="setCenter" class="center-icon"><img src="../assets/定位图标@2x.png" alt="" /></div></div>

第四步初始化地图实例对象

      // 地图实例对象 （amap 为容器的id）this.amap = new window.AMap.Map('container', {resizeEnable: true,zoom: 15})// 注入插件（定位插件，地理编码插件）this.amap.plugin(['AMap.Geolocation', 'AMap.Geocoder'])// 定位this.currentPosition(this.amap)

第五步定位当前位置

   // 没有传入坐标点，则定位到当前所在位置const geolocation = new window.AMap.Geolocation({enableHighAccuracy: true,timeout: 10000,zoomToAccuracy: true,buttonPosition: 'RB'})geolocation.getCurrentPosition((status, result) => {if (status === 'complete') {const points = [result.position.lng, result.position.lat]map.setCenter(points) // 设置中心点this.addMark(map, points) // 添加标记// 存下坐标与地址this.point = pointsthis.longitude = points[0]this.latitude = points[1]this.getAddress(points)} else {console.log('定位失败', result)}})

第六步添加地图控件

 addMark (map, points) {const marker = new window.AMap.Marker({map: map,position: points,draggable: true, // 允许拖动cursor: 'move',raiseOnDrag: true})marker.on('dragend', e => {const position = marker.getPosition()// 存下坐标与地址this.point = [position.lng, position.lat]this.getAddress([position.lng, position.lat])})}

第七步地址逆解析

    // 根据坐标返回地址(逆地理编码，获取详细地址)getAddress (points) {const geocoder = new window.AMap.Geocoder({radius: 1000})geocoder.getAddress(points, (status, result) => {if (status === 'complete' && result.regeocode) {this.address = result.regeocode.formattedAddress// console.log('当前经纬度：' + points)// console.log('当前详细地址：' + this.address)// 在这里请求周边数据点this.getOrundPosition(points[0], points[1])}})},

以上配置完成后就会显示图一的效果了如果大家只是想获取当前经纬度信息可以参考下面代码

 // 获取经纬度信息getLocation () {const _this = thisconst AMap = window.AMapAMap.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) {console.log('定位成功纬度信息：', data.position.lat)console.log('定位成功经度信息：', data.position.lng)_this.latitude = data.position.lat_this.longitude = data.position.lng// 把经纬度信息保存到VUEx_this.$store.dispatch('saveLongLat', [data.position.lng, data.position.lat])_this.getmarketposition()}function onError (data) {// console.log('定位失败错误：', data)_this.getmarketposition()}})}

这里特别要注意一下一定要使用ie浏览器才能定位！！！
好了，以上就是vue使用高德地图整个流程本人分享出来是避免采坑如有不懂的可以评论区留言！

Vue Cli4 使用高德地图定位获取当前经纬度信息以及周边定位相关推荐

高德地图API获取当前位置对应的周边信息
一.前言当前公司开发计划做一个打卡功能,获取用户信息地理信息后,提供列表给客户选择打卡地点(200米范围内).自己今天对三家地图开放者平台文档进行了查看比较(腾讯.百度.高德),目前实现的方法采用的 ...
高德地图准确获取当前位置信息
代码示例 JavaScript mapObj = new AMap.Map('iCenter'); mapObj.plugin('AMap.Geolocation', function () {geo ...
vue中基于高德地图，获取省级地图（以安徽为例）
效果图展示 <template><div><div id="mapId" class="rescure-map"></ ...
vue简单使用高德地图定位
1.获取key 我们需要到高德开放平台生成key 我这里选的是web端,提交后会生成一个key值 2.安装vue-amap npm install vue-amap --save 3.在项目main. ...
vue项目使用高德地图定位当前地址
vue项目使用高德地图定位当前地址一.在项目中安装vue-amap插件二.页面代码三.data数据一.在项目中安装vue-amap插件 1.最终效果 2.安装命令 npm install vu ...
在Vue中使用高德地图
在Vue中使用高德地图一.如何在Vue中引入基础高德地图 1.步骤一:注册并登录高德地图开放平台,申请密钥 2.步骤二:安装高德地图加载器 3.封装一个自定义地图组件,并初始化地图二.根据关键词搜 ...
Vue中使用高德地图
Vue中使用高德地图定位及poi搜索,以及其他插件的使用方法 1.第一步安装 npm install vue-amap --save 2.引入vue-amap main.js import Vue f ...
vue项目使用高德地图
vue项目使用高德地图-部分功能介绍在此做个笔记,引入方式使用了高德2.0 loadsh的加载方式 1.引入高德地图方式-NPM npm i @amap/amap-jsapi-loader --sa ...
高德地图地位获取地址
高德地图地位获取地址高德地图开发平台地址:https://lbs.amap.com/ 1导入依赖库 implementation 'com.amap.api:location:4.4.0' 2权限 ...

Vue Cli4 使用高德地图定位获取当前经纬度信息以及周边定位

Vue Cli4 使用高德地图定位获取当前经纬度信息以及周边定位相关推荐

最新文章

热门文章

Vue Cli4 使用高德地图定位 获取当前经纬度信息以及周边定位

Vue Cli4 使用高德地图定位 获取当前经纬度信息以及周边定位相关推荐

最新文章

热门文章

Vue Cli4 使用高德地图定位获取当前经纬度信息以及周边定位

Vue Cli4 使用高德地图定位获取当前经纬度信息以及周边定位相关推荐