详解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 相关文章推荐
vue element-ul实现展开和收起功能的实例代码
Nov 25 Vue.js
vue 通过base64实现图片下载功能
Dec 19 Vue.js
vue项目中openlayers绘制行政区划
Dec 24 Vue.js
vue实现简易的双向数据绑定
Dec 29 Vue.js
使用vue3重构拼图游戏的实现示例
Jan 25 Vue.js
Vue3中toRef与toRefs的区别
Mar 24 Vue.js
vue route新窗口跳转页面并且携带与接收参数
Apr 10 Vue.js
vue代码分块和懒加载非必要资源文件
Apr 11 Vue.js
分享一个vue实现的记事本功能案例
Apr 11 Vue.js
vue选项卡切换的实现案例
Apr 11 Vue.js
vue ant design 封装弹窗表单的使用
Jun 01 Vue.js
vue实现在data里引入相对路径
Jun 05 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
推荐5款跨平台的PHP编辑器
2014/12/25 PHP
thinkphp制作404跳转页的简单实现方法
2016/09/22 PHP
php可变长参数处理函数详解
2017/02/22 PHP
php连接mysql数据库
2017/03/21 PHP
php PDO实现的事务回滚示例
2017/03/23 PHP
Yii2压缩PHP中模板代码的输出问题
2018/08/28 PHP
Mootools 1.2教程 Tooltips
2009/09/15 Javascript
利用jQuery 实现GridView异步排序、分页的代码
2010/02/06 Javascript
JS 修改URL参数(实现代码)
2013/07/08 Javascript
基于jquery固定于顶部的导航响应浏览器滚动条事件
2014/11/02 Javascript
jquery通过扩展select控件实现支持enter或focus选择的方法
2015/11/19 Javascript
JS代码实现table数据分页效果
2016/05/26 Javascript
Javascript简写条件语句(推荐)
2016/06/12 Javascript
详解angular分页插件tm.pagination二次触发问题解决方案
2018/07/20 Javascript
微信小程序 Animation实现图片旋转动画示例
2018/08/22 Javascript
Vue.Draggable拖拽功能的配置使用方法
2020/07/29 Javascript
Vue3项目打包后部署到服务器 请求不到后台接口解决方法
2020/02/06 Javascript
vue实现用户长时间不操作自动退出登录功能的实现代码
2020/07/23 Javascript
微信小程序实现页面监听自定义组件的触发事件
2020/11/01 Javascript
Python性能提升之延迟初始化
2016/12/04 Python
使用Python中的tkinter模块作图的方法
2017/02/07 Python
python utc datetime转换为时间戳的方法
2019/01/15 Python
python 在某.py文件中调用其他.py内的函数的方法
2019/06/25 Python
Python实现的远程文件自动打包并下载功能示例
2019/07/12 Python
python 自定义装饰器实例详解
2019/07/20 Python
PyCharm中代码字体大小调整方法
2019/07/29 Python
python安装cx_Oracle和wxPython的方法
2020/09/14 Python
python 实用工具状态机transitions
2020/11/21 Python
纯CSS3绘制打火机动画火焰效果
2016/07/18 HTML / CSS
宝拉珍选澳大利亚官方购物网站:Paula’s Choice澳大利亚
2016/09/13 全球购物
墨尔本复古时尚品牌:Dangerfield
2018/12/12 全球购物
军训鉴定表自我鉴定
2014/02/13 职场文书
义务教育学校标准化建设汇报材料
2014/08/16 职场文书
2015年科协工作总结
2015/05/19 职场文书
JavaScript 数组去重详解
2021/09/15 Javascript
聊聊Lombok中的@Builder注解使用教程
2021/11/17 Java/Android