详解vue实现坐标拾取器功能示例


Posted in Vue.js onNovember 18, 2020

需求

1、搜索具体地址,自动填写经纬度,并在地图上标记

详解vue实现坐标拾取器功能示例

2、点击地图上一点,可重新填写经纬度并且标记

代码

在dom新建div渲染地图

<el-form-item label="店铺地址" prop="address">
 <el-input v-model="fristForm.address"></el-input>
 <el-input
 class="long-lat"
 v-model="fristForm.longitude"
 placeholder="经度"
 ></el-input>
 <el-input
 class="long-lat"
 v-model="fristForm.latitude"
 placeholder="纬度"
 ></el-input>
 <el-button size="mini" type="primary" @click="searchKeyword"
 >搜索</el-button
 >
</el-form-item>
<span class="changeAddress">点击地图更换分店定位地址</span>
<!-- 渲染地图的div容器 -->
<div id="container" class="mapbox"></div>

js定义地图变量并设置需求

var searchService,geocoder,map,markersArray = [];
<script>
export default {
 mounted() {
  this.init();
 },
 methods:{
  init() {
   var that = this;
   var center = new qq.maps.LatLng(39.916527, 116.397128);
   var map = new qq.maps.Map(document.getElementById("container"), {
   center: center,
   zoom: 13
   });
   var latlngBounds = new qq.maps.LatLngBounds();
   qq.maps.event.addListener(map, "click", function(event) {
   console.log(event);
   that.fristForm.longitude = event.latLng.getLng(); // 经度
   that.fristForm.latitude = event.latLng.getLat(); // 纬度

   if (markersArray) {
    for (let i in markersArray) {
    markersArray[i].setMap(null);
    }
   }
   var marker = new qq.maps.Marker({
    map: map,
    position: event.latLng
   });
   markersArray.push(marker);
   });

   geocoder = new qq.maps.Geocoder({
   complete: function(result) {
    console.log(result);
    that.fristForm.longitude = result.detail.location.lng;
    that.fristForm.latitude = result.detail.location.lat;
    map.setCenter(result.detail.location);
    var marker = new qq.maps.Marker({
    map: map,
    position: result.detail.location
    });
    markersArray.push(marker);
   }
   });
  },
 },
 // 搜索地址
 searchKeyword() {
  var keyword = this.fristForm.address;
  this.clearOverlays(markersArray);
  //根据输入的城市设置搜索范围
  // searchService.setLocation("北京");
  //根据输入的关键字在搜索范围内检索
  if (keyword) {
  // searchService.search(keyword);
  geocoder.getLocation(keyword);
  } else {
  alert("请输入地址");
  }
 },
}
</script>

文档参考

以上代码使用的是jsapi功能,目前对应功能已升级JavaScript API GL,地址解析功能可直接调取接口使用,欢迎大家体验!

地址解析(地址转坐标)
JavaScript API GL参考手册

到此这篇关于详解vue实现坐标拾取器功能示例的文章就介绍到这了,更多相关vue 坐标拾取器内容请搜索三水点靠木以前的文章或继续浏览下面的相关文章希望大家以后多多支持三水点靠木! 

Vue.js 相关文章推荐
vuex页面刷新导致数据丢失的解决方案
Dec 10 Vue.js
vue 页面跳转的实现方式
Jan 12 Vue.js
vue 递归组件的简单使用示例
Jan 14 Vue.js
Vue 集成 PDF.js 实现 PDF 预览和添加水印的步骤
Jan 22 Vue.js
vue 动态添加的路由页面刷新时失效的原因及解决方案
Feb 26 Vue.js
vue+flask实现视频合成功能(拖拽上传)
Mar 04 Vue.js
Vue CLI中模式与环境变量的深入详解
May 30 Vue.js
vue基于Teleport实现Modal组件
May 31 Vue.js
一定要知道的 25 个 Vue 技巧
Nov 02 Vue.js
vue实现移动端div拖动效果
Mar 03 Vue.js
vue实力踩坑之push当前页无效
Apr 10 Vue.js
vue生命周期钩子函数以及触发时机
Apr 26 Vue.js
Vue如何循环提取对象数组中的值
Nov 18 #Vue.js
vue在图片上传的时候压缩图片
Nov 18 #Vue.js
Vue +WebSocket + WaveSurferJS 实现H5聊天对话交互的实例
Nov 18 #Vue.js
springboot+vue实现文件上传下载
Nov 17 #Vue.js
vue 表单输入框不支持focus及blur事件的解决方案
Nov 17 #Vue.js
解决vue elementUI 使用el-select 时 change事件的触发问题
Nov 17 #Vue.js
Vue项目利用axios请求接口下载excel
Nov 17 #Vue.js
You might like
PHP 的ArrayAccess接口 像数组一样来访问你的PHP对象
2010/10/12 PHP
php空间不支持socket但支持curl时recaptcha的用法
2011/11/07 PHP
菜单效果
2006/10/14 Javascript
详解强大的jQuery选择器之基本选择器、层次选择器
2012/02/07 Javascript
js操纵dom生成下拉列表框的方法
2014/02/24 Javascript
jquery实现类似EasyUI的页面布局可改变左右的宽度
2020/09/12 Javascript
js实现在同一窗口浏览图片
2014/09/17 Javascript
JavaScript fontcolor方法入门实例(按照指定的颜色来显示字符串)
2014/10/17 Javascript
浅析JavaScript事件和方法
2015/02/28 Javascript
jQuery实现鼠标单击网页文字后在文本框显示的方法
2015/05/06 Javascript
jquery实现未经美化的简洁TAB菜单效果
2015/08/28 Javascript
使用JavaScript为Kindeditor自定义按钮增加Audio标签
2016/03/18 Javascript
js判断请求的url是否可访问,支持跨域判断的实现方法
2016/09/17 Javascript
JS 动态加载js文件和css文件 同步/异步的两种简单方式
2016/09/23 Javascript
js前端解决跨域问题的8种方案(最新最全)
2016/11/18 Javascript
Vue数据驱动模拟实现3
2017/01/11 Javascript
详解Vue如何支持JSX语法
2017/11/10 Javascript
js合并两个数组生成合并后的key:value数组
2018/05/09 Javascript
详解一个基于react+webpack的多页面应用配置
2019/01/21 Javascript
加速vue组件渲染之性能优化
2020/04/09 Javascript
基于javascript处理二进制图片流过程详解
2020/06/08 Javascript
Vue绑定用户接口实现代码示例
2020/11/04 Javascript
JavaScript实现雪花飘落效果
2020/12/27 Javascript
跟老齐学Python之永远强大的函数
2014/09/14 Python
python安装pywin32clipboard的操作方法
2019/01/24 Python
详解python中递归函数
2019/04/16 Python
python利用wx实现界面按钮和按钮监听和字体改变的方法
2019/07/17 Python
Node.js 和 Python之间该选择哪个?
2020/08/05 Python
用React加CSS3实现微信拆红包动画效果
2017/03/13 HTML / CSS
CSS3实现图片抽屉式效果的示例代码
2019/11/06 HTML / CSS
华为旗下电子商务平台:华为商城
2016/08/06 全球购物
英国最大的在线快递公司之一:ParcelHero
2019/11/04 全球购物
北承题目(C++)
2012/05/16 面试题
交通事故检查书范文
2014/01/30 职场文书
教师考核表个人总结
2015/02/12 职场文书
体育教师教学随笔
2015/08/15 职场文书