vue使用高德地图根据坐标定位点的实现代码


Posted in Javascript onAugust 22, 2019

前言

项目中需要根据坐标定位,将自己的实现过程写下来,废话不多说,上代码

正文

<script>
var map,marker;
export default {
  data(){
    return{
      arriveCoor:[108.947025,34.2613255],//坐标点
      arrive:"",//位置信息
    }
     
  },
  mounted() {   
    mapDraw(this.arriveCoor),
    mapCoor(this.arriveCoor)
  },
  methods:{
     mapDraw(arriveCoor){
     map = new AMap.Map('map-location', {  //map-location是嵌地图div的id
       resizeEnable: true, //是否监控地图容器尺寸变化
       zoom:16, //初始化地图层级
       center: arriveCoor //初始化地图中心点
     });
     // 定位点
     this.addMarker(arriveCoor);
  },
  // 实例化点标记
  addMarker(arriveCoor) {
    var _this = this;
    marker = new AMap.Marker({
      icon: "", //图片ip
      imageSize: "20px",
      position: arriveCoor,
      offset: new AMap.Pixel(-13, -30),
      // 设置是否可以拖拽
      draggable: true,
      cursor: 'move',
      // 设置拖拽效果
      raiseOnDrag: true
    });
    marker.setMap(map);
  },
  // 查询坐标
  mapCoor(lnglatXY){

var _this = this;


AMap.service('AMap.Geocoder',function() {//回调函数



var geocoder = new AMap.Geocoder({});



geocoder.getAddress(lnglatXY, function (status, result) {




if (status === 'complete' && result.info === 'OK') {





//获得了有效的地址信息:





_this.arrive = result.regeocode.formattedAddress;




else {





_this.arrive = "暂无位置";




}



});


})

},
}
</script>

总结

以上所述是小编给大家介绍的vue使用高德地图根据坐标定位点的实现代码,希望对大家有所帮助,如果大家有任何疑问欢迎给我留言,小编会及时回复大家的!

Javascript 相关文章推荐
JavaScript中两种链式调用实现代码
Jan 12 Javascript
js multiple全选与取消全选实现代码
Dec 04 Javascript
利用js实现在浏览器状态栏显示访问者在本页停留的时间
Dec 29 Javascript
Vue.js学习笔记之 helloworld
Aug 14 Javascript
bootstrap模态框垂直居中效果
Dec 03 Javascript
微信小程序 列表的上拉加载和下拉刷新的实现
Apr 01 Javascript
vue2.0多条件搜索组件使用详解
Mar 26 Javascript
ionic实现底部分享功能
May 11 Javascript
浅谈vuex之mutation和action的基本使用
Aug 29 Javascript
轻松玩转BootstrapTable(后端使用SpringMVC+Hibernate)
Sep 06 Javascript
vue与bootstrap实现简单用户信息添加删除功能
Feb 15 Javascript
vue自定义指令用法经典实例小结
Mar 16 Javascript
ES6基础之字符串和函数的拓展详解
Aug 22 #Javascript
node实现爬虫的几种简易方式
Aug 22 #Javascript
vue router动态路由设置参数可选问题
Aug 21 #Javascript
Element ui 下拉多选时新增一个选择所有的选项
Aug 21 #Javascript
js时间转换毫秒的实例代码
Aug 21 #Javascript
VUE的history模式下除了index外其他路由404报错解决办法
Aug 21 #Javascript
详解webpack引用jquery(第三方模块)的三种办法
Aug 21 #jQuery
You might like
为什么夜间收到的中波电台比白天多
2021/03/01 无线电
个人写的PHP验证码生成类分享
2014/08/21 PHP
php中使用session防止用户非法登录后台的方法
2015/01/27 PHP
在b/s开发中经常用到的javaScript技术
2006/08/23 Javascript
JavaScript 常用函数库详解
2009/10/21 Javascript
javascript 全等号运算符使用说明
2010/05/31 Javascript
form表单中去掉默认的enter键提交并绑定js方法实现代码
2013/04/01 Javascript
js unicode 编码解析关于数据转换为中文的两种方法
2014/04/21 Javascript
jquery等待效果示例
2014/05/01 Javascript
web前端开发JQuery常用实例代码片段(50个)
2015/08/28 Javascript
微信小程序 textarea 组件详解及简单实例
2017/01/10 Javascript
javascript数据结构之串的概念与用法分析
2017/04/12 Javascript
JavaScript数组排序reverse()和sort()方法详解
2017/12/24 Javascript
微信小程序实现的贪吃蛇游戏【附源码下载】
2018/01/03 Javascript
vue编译打包本地查看index文件的方法
2018/02/23 Javascript
用python分割TXT文件成4K的TXT文件
2009/05/23 Python
Python读写/追加excel文件Demo分享
2018/05/03 Python
python一键去抖音视频水印工具
2018/09/14 Python
Python中的元组介绍
2019/01/28 Python
python爬虫 批量下载zabbix文档代码实例
2019/08/21 Python
Python tensorflow实现mnist手写数字识别示例【非卷积与卷积实现】
2019/12/19 Python
Scrapy框架实现的登录网站操作示例
2020/02/06 Python
CSS3实现精美横向滚动菜单按钮
2017/04/14 HTML / CSS
CSS3新属性transition-property transform box-shadow实例学习
2013/06/06 HTML / CSS
绿色美容,有机护肤品和化妆品:Safe & Chic
2018/10/29 全球购物
查找廉价航班和发现新目的地:Kiwi.com
2019/02/25 全球购物
服务生自我鉴定
2014/01/22 职场文书
水果超市创业计划书
2014/01/27 职场文书
《燕子》教学反思
2014/02/18 职场文书
就业推荐表自我鉴定范文
2014/03/21 职场文书
志愿者活动总结范文
2014/04/26 职场文书
员工团队活动方案
2014/08/28 职场文书
销售员工作检讨书(推荐篇)
2014/10/18 职场文书
有关浪费资源的建议书
2015/09/14 职场文书
煤矿安全学习心得体会
2016/01/18 职场文书
MySQL外键约束(FOREIGN KEY)案例讲解
2021/08/23 MySQL