vue中引入高德地图获取坐标

package.json文件引入依赖

 "vue-amap": "^0.5.10",

main.js全局使用

// 引入vue-amap高德地图
import VueAMap from 'vue-amap'
Vue.use(VueAMap)
// 初始化vue-amap
VueAMap.initAMapApiLoader({// 高德的keykey: '请填写申请的key',// 插件集合// plugin: ['AMap.Autocomplete', 'AMap.PlaceSearch', 'AMap.Scale', 'AMap.OverView', 'AMap.ToolBar', 'AMap.MapType', 'AMap.PolyEditor', 'AMap.CircleEditor'],// 高德 sdk 版本，默认为 1.4.4v: '1.4.4'
})

使用组件

点击按钮弹出窗口 <el-form-item label="坐标:" prop="lng"><span style="margin-right:10px;">{{ pointFrom.lng }},{{ pointFrom.lat }}</span><el-button @click="showPickerDialog=true">拾取坐标</el-button></el-form-item><!-- 地图 --><el-dialogtitle="坐标拾取"width="800px":visible.sync="showPickerDialog":before-close="onPickerClose":close-on-click-modal="false"><el-amap vid="location-picker" :center="center" :zoom="15" :events="mapEvents"><el-amap-marker :position="location" /></el-amap><div slot="footer"><el-button @click="onPickerClose">取 消</el-button><el-button type="primary" @click="confirmLocation">确 定</el-button></div></el-dialog>data() {return {showPickerDialog: false,immediatelySave: false,center: [120.622233, 31.306421],location: [120.622233, 31.306421],}}methods: {// 取消onPickerClose() {this.showPickerDialog = falsethis.immediatelySave = false},// 确认confirmLocation() {if (this.immediatelySave) {this.pointFrom.lng = this.location[0]this.pointFrom.lat = this.location[1]save(this.pointFrom).then(res => {this.$message({type: 'success',message: '保存成功!'})this.showPickerDialog = falsethis.immediatelySave = false})} else {this.pointFrom.lng = this.location[0]this.pointFrom.lat = this.location[1]this.showPickerDialog = false}},
}

vue中引入高德地图获取坐标相关推荐

在vue中使用高德地图获取坐标与地址信息(包含点击+搜索)
首先注册登陆高德地图 https://lbs.amap.com/ 划过头像里面有个应用管理点开进入到应用管理打开我的应用选择创建应用然后按照要求填写内容,切记一定要选择web端(JS API) ...
vue中引入高德地图Loca数据可视化
目录引言: 关键词: 正文: 一.如何安装或者引入: 二.如何引入: 三.如何使用: 四.完整代码: 五.效果图参考: 引言: 前面我的文章介绍了vue中引入高德地图实例的,详情可以去参考,由于需 ...
在vue中引入高德地图
既然要用到高德地图首先要申请成为高德地图开发者,并申请使用高德地图的key这两点在这篇文章就不过多赘述,有需要的小伙伴可以查查资料,或者去高德地图api官网都有很详细的介绍.高德地图官网简单提一下申 ...
vue中引入高德地图
❤️❤️❤️ Topology可视化绘图引擎 ❤️❤️❤️ 总的来说,vue组件中使用高德地图的方式有两种,一种是vue-amap :一套专门用于vue的高德地图插件:另外一种是原生的高德地图. 方式 ...
Vue中使用高德地图，简单明了
一.使用步骤 1.在vue中引入高德地图的加载器 npm i @amap/amap-jsapi-loader --save 在自己的组件中去引用 <template>//这个div就是 ...
在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-amap）的采坑记录小白入门
这里写目录标题写在开始 step.1 安装组件 step.2 引入组件 step.3注册高德高德开发者账号,申请KEY step.4 正式使用写在开始俗话说授人以鱼不如授人以渔,直接记录代码的话 ...
vue中引入高德js
项目概述: 通过在vue中引入高德js,实现地图的加载呈现,以及在地图中实现设备坐标定位,并在设备列表点击的同时进行定位点的切换和地图视图的切换,在点击坐标点的时候可以弹出相关介绍信息. 第一步:在i ...
vue中引用高德地图根据经纬度计算两地距离
vue中引用高德地图根据经纬度计算两地距离一.示例图: npm安装 npm install vue-amap --save 在min.js文件中引入vue-amap import VueAMap f ...

vue中引入高德地图获取坐标

vue中引入高德地图获取坐标相关推荐

最新文章

热门文章