vue简单使用高德地图定位

1、获取key
我们需要到高德开放平台生成key

我这里选的是web端，提交后会生成一个key值

2、安装vue-amap

       npm install vue-amap --save

3、在项目main.js引入vue-amap

1    import AMap from 'vue-amap';
2    Vue.use(AMap);
3
4      // 初始化vue-amap
5    AMap.initAMapApiLoader({
6      // 高德key
7      key: '放入你的key',
8      // 插件集合 （插件按需引入）
8      plugin: ['AMap.Geolocation']
10      //AMap.Geolocation定位服务插件。融合了浏览器定位、高精度IP定位、安卓定位sdk辅助定位等多种            手段，提供了获取当前准确位置、获取当前城市信息、持续定位(浏览器定位)等功能。
11    });

3.使用

<template><div class="box"><div :style="{width:'100%',height:'300px'}"><el-amap vid="amap" :plugin="plugin" class="amap-demo" :center="center"></el-amap></div></div>
</template><script>
export default {data(){const self = this;return {center: [121.59996, 31.197646],lng: 0,lat: 0,loaded: false,plugin: [{enableHighAccuracy: true,//是否使用高精度定位，默认:truetimeout: 100,          //超过10秒后停止定位，默认：无穷大maximumAge: 0,           //定位结果缓存0毫秒，默认：0convert: true,           //自动偏移坐标，偏移后的坐标为高德坐标，默认：trueshowButton: true,        //显示定位按钮，默认：truebuttonPosition: 'RB',    //定位按钮停靠位置，默认：'LB'，左下角showMarker: true,        //定位成功后在定位到的位置显示点标记，默认：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) {self.lng = result.position.lng;self.lat = result.position.lat;self.center = [self.lng, self.lat];self.loaded = true;self.$nextTick();}});}}}]}}
}
</script>

以上就是高德地图的简单使用
————————————————
版权声明：本文为CSDN博主「jlinbk」的原创文章，遵循CC 4.0 BY-SA版权协议，转载请附上原文出处链接及本声明。
原文链接：https://blog.csdn.net/jlinbk/article/details/118335607

vue简单使用高德地图定位相关推荐

vue项目使用高德地图定位当前地址
vue项目使用高德地图定位当前地址一.在项目中安装vue-amap插件二.页面代码三.data数据一.在项目中安装vue-amap插件 1.最终效果 2.安装命令 npm install vu ...
【VUE】vue-amap高德地图定位以及文本标注
vue-amap高德地图定位以及文本标注因要求需实现在地图的定位以及该定位的文本标注,所有我看了一下实现的方式有哪些.最后选择了用现成的 vue-amap高德组件去实现. 实现效果如图: 实现过程 ...
vue项目引入高德地图(定位、搜索、经纬度解析地址)
1.npm 安装 npm install vue-amap --save 2.main.js文件引入vue-amap import VueAMap from 'vue-amap' Vue.use(Vu ...
Vue Cli4 使用高德地图定位获取当前经纬度信息以及周边定位
以上是最终效果图下面开始代码分享第一步在index,html引入高德地图模块 ` <script type="text/javascript ...
Vue中使用高德地图
Vue中使用高德地图定位及poi搜索,以及其他插件的使用方法 1.第一步安装 npm install vue-amap --save 2.引入vue-amap main.js import Vue f ...
Vue中集成高德地图API实现定位与自定义样式信息窗体
场景若依前后端分离版手把手教你本地搭建环境并运行项目: https://blog.csdn.net/BADAO_LIUMANG_QIZHI/article/details/108465662 在上面 ...
vue 高德地图定位插件地图实例插件获取点击的地方的经纬度和具体地址
npm 安装推荐 npm 安装. npm install vue-amap --saveimport VueAMap from 'vue-amap';Vue.use(VueAMap); VueAMa ...
高德地图定位的简单实现
1.要实现高德地图的定位,首先要下载高德地图的SDK以及高德地图定位的SDK 下载地址:http://lbs.amap.com/api/android-sdk/download/ http://lbs ...
Vue中使用高德地图，简单明了
一.使用步骤 1.在vue中引入高德地图的加载器 npm i @amap/amap-jsapi-loader --save 在自己的组件中去引用 <template>//这个div就是 ...

vue简单使用高德地图定位

vue简单使用高德地图定位相关推荐

最新文章

热门文章