vue调用高德地图实现定位

第一步创建高德地图key

第二步：下载vue-amap

npm install vue-amap --save

第三步：在项目main.js引入vue-amap

import AMap from 'vue-amap';
Vue.use(AMap);// 初始化vue-amap
AMap.initAMapApiLoader({// 高德keykey: '你的key',// 插件集合 （插件按需引入）plugin: ['AMap.Geolocation']
});

在template 中加入自定义vue

<template><div class="amap-page-container"><div :style="{width:'70%',height:'400px'}"><el-amap vid="amap" :plugin="plugin" class="amap-demo" :center="center"></el-amap></div><div class="toolbar"><span v-if="loaded">location: lng = {{ lng }} lat = {{ lat }}</span><span v-else>正在定位</span></div><divv-on:click="req_post()">查询周边</div></div>
</template>
<script>
export default {data(){const self = this;return {center: [113.753602,34.765515],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><style>.amap-demo {height: 300px;}
</style>

效果如下

vue调用高德地图实现定位相关推荐

VUE调用高德地图之电子围栏
之前用VUE实现了高德地图的历史轨迹回放和热力图,现在来实现电子围栏功能. 所谓电子围栏,就是地图上限定的区域内实现限行功能,用我们身边的事物来举例,共享单车的限行.限停区域就是电子围栏.由此可见,电 ...
vue项目中调用高德地图vue-amap 插件的AMap.PlaceSearch简用
vue项目调用高德地图vue-amap 插件的AMap.PlaceSearch简用结合 elementui 的 el-input 直接下拉选取地点不展示地图 1.下载 npm install v ...
vue调用百度地图API实现点击相应位置切换地图定位
vue调用百度地图API实现点击相应位置切换地图定位 1.需求分析在页面显示地图,初始状态显示上海市,地图上有特定地点的标注. 左侧为建筑(地点)列表,点击某个地点右侧地图定位到其地理位置并显示具体 ...
高德地图H5 定位失败报错 geolocation time out. Get ipLocation failed解决方案
高德地图H5 定位失败报错 geolocation time out. Get ipLocation failed的解决方法. 前言:此坑踩得我挺难受的,搞了三天需求:进入页面,获取用户具体经纬度并 ...
vue使用高德地图aMap实现轨迹动画查询显示
vue使用高德地图搜索地址添加标记marker,定位,拖拽选址功能https://blog.csdn.net/SmartJunTao/article/details/123955679 实现效果: 需 ...
Android 集成高德地图——当前定位，添加图标，画路线，设置显示中心位置，比例，地图刷新位置监听，判断GPS开启，去打开GPS
/*** 判断定位服务是否开启** @param* @return true 表示开启*/ public static boolean isLocationEnabled(Context contex ...
vue使用高德地图-进行显示地图和查询天气
vue使用高德地图高德地图显示,实现了天气查询效果(Vue) 在index.html中引入高德地图的css和js vue 插件列表问题解决: 高德地图显示,实现了天气查询效果(Vue) 在ind ...
vue使用高德地图小demo（标记点，画线，3D，叠加图片图层）
vue使用高德地图小demo(标记点,画线,3D) 这个模式是3D的,可以看到地图是带有一定的倾角的. 注意:3D模式下,是不能够将进行画线的,不能使用PathSimplifier,改成2D可以正常使 ...
JS 如何调用高德地图
最近配合后台做管理系统,需要前端用原生html页面嵌入到后台,于是乎...记录下原生JS怎么使用高德地图吧一.获取高德地图的key 获取地址:高德开放平台https://lbs.amap.com/ ...

vue调用高德地图实现定位

vue调用高德地图实现定位

效果如下

vue调用高德地图实现定位相关推荐

最新文章

热门文章