一、在项目中安装vue-amap插件

1.最终效果
2.安装命令

npm install vue-amap --save

3.在main.js中引入

import VueAMap from 'vue-amap'
Vue.use(VueAMap)
VueAMap.initAMapApiLoader({key: 'dd4cc5f831b67cde767de9a65f983650',plugin: ['AMap.Autocomplete', 'AMap.PlaceSearch', 'AMap.Scale', 'AMap.OverView', 'AMap.ToolBar', 'AMap.MapType', 'AMap.PolyEditor', 'AMap.CircleEditor','AMap.Geolocation'],// 默认高德 sdk 版本为 1.4.4v: '1.4.4'
})

plugin字段表示插件引入，可以根据自己需求引入，但是想做当前定位，必须引入'AMap.Geolocation'

二、页面代码

<!-- 地图容器 --><div id="map_container"><!-- 地图 --><el-amap:center="center":zoom="zoom"class="amap_demo":plugin="plugin"><!-- 地图标记 --><el-amap-marker v-for="(marker,index) in markers" :position="marker.position" :key="index"></el-amap-marker></el-amap>
</div>

1.amap_demo必须有高度：以下是css代码

#map_container{width: 100%;height: 210px;
}
.amap_demo{width: 100%;height: 100%;}

三、data数据

一看这么多不要害怕，很简单，实在不行cv就行

         zoom: 12,// 默认中心点center: [116.40,39.90],// 标记点markers: [// 标记点位置{ position: [116.40,39.90]}],// 当前地图的插件plugin: [{enableHighAccuracy: true,//是否使用高精度定位，默认:truetimeout: 10000,          //超过10秒后停止定位，默认：无穷大maximumAge: 0,           //定位结果缓存0毫秒，默认：0convert: true,           //自动偏移坐标，偏移后的坐标为高德坐标，默认：trueshowButton: true,        //显示定位按钮，默认：truebuttonPosition: 'RB',    //定位按钮停靠位置，默认：'LB'，左下角showMarker: false,        //定位成功后在定位到的位置显示点标记，默认：trueshowCircle: true,        //定位成功后用圆圈表示定位精度范围，默认：truepanToLocation: true,     //定位成功后将定位到的位置作为地图中心点，默认：truezoomToAccuracy:true,//定位成功后调整地图视野范围使定位位置及精度范围视野内可见，默认：fextensions:'all',pName: 'Geolocation',events: {init(o) {// o 是高德地图定位插件实例o.getCurrentPosition((status, result) => {console.log(result)if (result && result.position) {// 将当前经纬度给中心点that.center = [result.position.lng, result.position.lat];// 将当前经纬度给标记点that.markers[0].position = that.center;that.loaded = true;that.$nextTick();}});}}}],

打印信息

vue项目使用高德地图定位当前地址相关推荐

vue项目引入高德地图(定位、搜索、经纬度解析地址)
1.npm 安装 npm install vue-amap --save 2.main.js文件引入vue-amap import VueAMap from 'vue-amap' Vue.use(Vu ...
vue项目使用高德地图
vue项目使用高德地图-部分功能介绍在此做个笔记,引入方式使用了高德2.0 loadsh的加载方式 1.引入高德地图方式-NPM npm i @amap/amap-jsapi-loader --sa ...
VUE项目使用高德地图进行精准定位高德地图API
提示:文章写完后,目录可以自动生成,如何生成可参考右边的帮助文档文章目录前言一.高德地图API 二.使用步骤 1.引入key 2.创建方法总结前言提示:以下是本篇文章正文内容,下面案例可供 ...
vue简单使用高德地图定位
1.获取key 我们需要到高德开放平台生成key 我这里选的是web端,提交后会生成一个key值 2.安装vue-amap npm install vue-amap --save 3.在项目main. ...
Android项目集成高德地图定位功能
1.在Project的build.gradle文件中配置repositories,添加maven或jcenter仓库地址 Android Studio默认会在Project的build.gradle为 ...
【VUE】vue-amap高德地图定位以及文本标注
vue-amap高德地图定位以及文本标注因要求需实现在地图的定位以及该定位的文本标注,所有我看了一下实现的方式有哪些.最后选择了用现成的 vue-amap高德组件去实现. 实现效果如图: 实现过程 ...
Vue项目中用高德地图实现定位
说明:本文主要是介绍如何在Vue项目中接入百度地图并定位当前城市,更深层次的内容稍后有空整理. 可能还有更牛的实现方案,目前我这里记录的是我自己跑通的一个版本,希望对你有所帮助,仅供参考. Vue项目 ...
vue H5移动端项目使用高德地图定位/标点并点击导航跳第三方app且实现导航路线——实例
一.最终效果 1.全量定位 2.获取当前位置定位 3.标点后回显选点的地址 4.点击导航,打开弹窗选择高德地图,会进入第三方app中显示路线 5.地图已经封装成一个组件(AMapComponents) ...
vue项目使用高德地图的定位及关键字搜索功能
1.首先在index.html引入高德地图的秘钥.如图: 注意:如果使用关键字搜索功能要加上 plugin=AMap.Autocomplete,AMap.PlaceSearch,否则功能无法使用,并会 ...

vue项目使用高德地图定位当前地址

vue项目使用高德地图定位当前地址

一、在项目中安装vue-amap插件

二、页面代码

三、data数据

vue项目使用高德地图定位当前地址相关推荐

最新文章

热门文章