vue中利用高德地图选取经纬度

项目中要求，鼠标点击地图可以获取到当前地址的经纬度

点击哪里，输入框中就会绑定哪里的经纬度，这里用的是高德地图来实现的，首先要去高德地图api申请一个key 高德地图这里不过多介绍。

下面来看实现方法

首先根据高德地图的引导安装插件vue中安装高德地图

npm i @amap/amap-jsapi-loader --save

上代码

<template><div class="drawStation"><div style="font-size:13px;margin:0 0 -10px 130px;">点击基地地址，获取基地经纬度</div><div id="draw-station-container"><div class="input"><el-input v-model="location.lng" size="small" placeholder="经度"></el-input><el-input v-model="location.lat" size="small" placeholder="纬度"></el-input></div></div></div>
</template><script>
import AMapLoader from "@amap/amap-jsapi-loader"
export default {name: "DrawStation",data() {return {// 地图对象AMap: null,// 地图实例对象map: null,// 经纬度location: {lat: '',lng: ''},}},mounted() {//DOM初始化完成进行地图初始化this.initMap()},methods: {/*** 创建地图*/initMap() {AMapLoader.load({key: '你的key', // 申请好的Web端开发者Key，首次调用 load 时必填version: "2.0", // 指定要加载的 JSAPI 的版本，缺省时默认为 1.4.15plugins: ['AMap.Scale', 'AMap.PlaceSearch', 'AMap.AutoComplete'], // 需要使用的的插件列表，如比例尺'AMap.Scale'等}).then((AMap) => {this.AMap = AMapthis.map = new AMap.Map("draw-station-container", {//设置地图容器idviewMode: "3D", //是否为3D地图模式zoom: 15, //初始化地图级别center: [121.77, 39.05], //初始化地图中心点位置// mapStyle: 'amap://styles/macaron', //设置地图的显示样式})// 地图点击事件this.map.on('click', this.clickMapHandler)}).catch((e) => {console.log(e)})},// 点击地图事件clickMapHandler(e) {this.location.lng = e.lnglat.getLng()this.location.lat = e.lnglat.getLat()},},
};
</script><style scoped>
.drawStation #draw-station-container {padding: 0px;/* margin: 20px 0 20px 0; */margin: 20px auto;width: 500px;height: 300px;
}.el-input {width: 150px;margin: 10px 0 0 10px;z-index: 5;
}
</style>

这样就可以了，还是很简单的

这里也给大家推荐两个高德地图的插件

vue-amap

AMap-vue（不支持vue3）

不要看它俩名字像，这是两个插件

直接cv拿去，不用谢

vue中利用高德地图选取经纬度相关推荐

vue中引用高德地图根据经纬度计算两地距离
vue中引用高德地图根据经纬度计算两地距离一.示例图: npm安装 npm install vue-amap --save 在min.js文件中引入vue-amap import VueAMap f ...
在Vue中使用高德地图
在Vue中使用高德地图一.如何在Vue中引入基础高德地图 1.步骤一:注册并登录高德地图开放平台,申请密钥 2.步骤二:安装高德地图加载器 3.封装一个自定义地图组件,并初始化地图二.根据关键词搜 ...
Vue中使用高德地图
Vue中使用高德地图定位及poi搜索,以及其他插件的使用方法 1.第一步安装 npm install vue-amap --save 2.引入vue-amap main.js import Vue f ...
Vue中使用高德地图，简单明了
一.使用步骤 1.在vue中引入高德地图的加载器 npm i @amap/amap-jsapi-loader --save 在自己的组件中去引用 <template>//这个div就是 ...
vue中调用百度地图获取经纬度
项目中,需要实现获取当前位置的经纬度,或者搜索某个位置并获取经纬度信息,我使用的的是vue,地图使用的是百度地图. 默认自动获取当前位置经纬度拖动小红标获取经纬度关键词查询获取经纬度前期准备 ...
Vue中使用高德地图（vue-amap）的采坑记录小白入门
这里写目录标题写在开始 step.1 安装组件 step.2 引入组件 step.3注册高德高德开发者账号,申请KEY step.4 正式使用写在开始俗话说授人以鱼不如授人以渔,直接记录代码的话 ...
在vue中使用高德地图的下属省市区查询，实现省市区的联动以及规划范围
在vue中使用高德地图的下属省市区查询,实现省市区的联动以及规划范围一.先上效果图二.高德地图Vue引用一.先上效果图二.高德地图Vue引用 1. webpack引入高德在webpack.b ...
vue中引入高德地图Loca数据可视化
目录引言: 关键词: 正文: 一.如何安装或者引入: 二.如何引入: 三.如何使用: 四.完整代码: 五.效果图参考: 引言: 前面我的文章介绍了vue中引入高德地图实例的,详情可以去参考,由于需 ...
Vue 中使用高德地图api
比较简单的原生方式 <template><div style="margin: 0px;padding: 0px"><div id="pan ...
Vue中集成高德地图API实现定位与自定义样式信息窗体
场景若依前后端分离版手把手教你本地搭建环境并运行项目: https://blog.csdn.net/BADAO_LIUMANG_QIZHI/article/details/108465662 在上面 ...

vue中利用高德地图选取经纬度

vue中利用高德地图选取经纬度相关推荐

最新文章

热门文章