详解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 相关文章推荐
element-plus一个vue3.xUI框架(element-ui的3.x 版初体验)
Dec 02 Vue.js
vue中watch的用法汇总
Dec 28 Vue.js
手写Vue源码之数据劫持示例详解
Jan 04 Vue.js
Vuex实现简单购物车
Jan 10 Vue.js
vue如何使用rem适配
Feb 06 Vue.js
Vue基本指令实例图文讲解
Feb 25 Vue.js
vue实现拖拽进度条
Mar 01 Vue.js
vue3.0 项目搭建和使用流程
Mar 04 Vue.js
vue组件的路由高亮问题解决方法
May 11 Vue.js
idea编译器vue缩进报错问题场景分析
Jul 04 Vue.js
三种方式清除vue路由跳转router-link的历史记录
Apr 10 Vue.js
vue项目配置sass及引入外部scss文件
Apr 14 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中在数据库中保存Checkbox数据(2)
2006/10/09 PHP
Yii操作数据库实现动态获取表名的方法
2016/03/29 PHP
JavaScript中的类继承
2010/11/25 Javascript
实现变速回到顶部的JavaScript代码
2011/05/09 Javascript
jquery实现邮箱自动补全功能示例分享
2014/02/17 Javascript
禁止iframe脚本弹出的窗口覆盖了父窗口的方法
2014/09/06 Javascript
浅析AngularJS中的指令
2016/03/20 Javascript
JS修改地址栏参数实例代码
2016/06/14 Javascript
关于JSON与JSONP简单总结
2016/08/16 Javascript
AngularJS入门教程之过滤器用法示例
2016/11/02 Javascript
微信公众号 摇一摇周边功能开发
2016/12/08 Javascript
详解nodejs微信公众号开发——5.素材管理接口
2017/04/11 NodeJs
javascript按钮禁用和启用的效果实例代码
2017/10/29 Javascript
Vue实现搜索结果高亮显示关键字
2019/05/28 Javascript
优雅的使用javascript递归画一棵结构树示例代码
2019/09/22 Javascript
layer.alert自定义关闭回调事件的方法
2019/09/27 Javascript
Vue SSR 即时编译技术的实现
2020/05/06 Javascript
原生js实现购物车功能
2020/09/23 Javascript
[01:48]完美圣典齐天大圣至宝宣传片
2016/12/17 DOTA
Python的爬虫包Beautiful Soup中用正则表达式来搜索
2016/01/20 Python
详解Python中heapq模块的用法
2016/06/28 Python
Python之re操作方法(详解)
2017/06/14 Python
python 实时得到cpu和内存的使用情况方法
2018/06/11 Python
使用python绘制cdf的多种实现方法
2020/02/25 Python
canvas实现二维码和图片合成的示例代码
2018/08/01 HTML / CSS
英国领先的酒类网上商城:TheDrinkShop
2017/03/16 全球购物
Smallable英国家庭概念店:设计师童装及家居装饰
2017/07/05 全球购物
eBay爱尔兰站:eBay.ie
2019/08/09 全球购物
编写类String 的构造函数、析构函数和赋值函数
2012/09/09 面试题
大学生创业计划书的范文
2014/01/07 职场文书
金融管理应届生求职信
2014/02/20 职场文书
家长通知书教师评语
2014/04/17 职场文书
2014年社区党建工作总结
2014/11/11 职场文书
家长高考寄语
2015/02/27 职场文书
项目备案申请报告
2015/05/15 职场文书
详解CSS不定宽溢出文本适配滚动
2021/05/24 HTML / CSS