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 相关文章推荐
jquery实现文字由下到上循环滚动的实例代码
Aug 09 Javascript
jQuery的animate函数实现图文切换动画效果
May 03 Javascript
浅谈javascript的Array.prototype.slice.call
Aug 31 Javascript
jQuery EasyUI之DataGrid使用实例详解
Jan 04 Javascript
Bootstrap媒体对象的实现
May 01 Javascript
Bootstrap图片轮播组件Carousel使用方法详解
Oct 20 Javascript
详解jQuery插件开发方式
Nov 22 Javascript
写jQuery插件时的注意点
Feb 20 Javascript
JS 仿支付宝input文本输入框放大组件的实例
Nov 14 Javascript
vue 优化CDN加速的方法示例
Sep 19 Javascript
微信小程序用户授权,以及判断登录是否过期的方法
May 10 Javascript
vue2配置scss的方法步骤
Jun 06 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
一个简单的php实现的MySQL数据浏览器
2007/03/11 PHP
PHP性能优化准备篇图解PEAR安装
2011/12/05 PHP
解析PHP中一些可能会被忽略的问题
2013/06/21 PHP
Js之软键盘实现(js源码)
2007/01/30 Javascript
父子窗体间传递JSON格式的数据的代码
2010/12/25 Javascript
jQuery实现用方向键控制层的上下左右移动
2013/01/13 Javascript
使用jquery写个更改表格行顺序的小功能
2014/04/29 Javascript
基于jQuery实现下拉框
2014/11/24 Javascript
js实现单击图片放大图片的方法
2015/02/17 Javascript
JS运动框架之分享侧边栏动画实例
2015/03/03 Javascript
Vue 单文件中的数据传递示例
2017/03/21 Javascript
实例详解display:none与visible:hidden的区别
2017/03/30 Javascript
jstree单选功能的实现方法
2017/06/07 Javascript
Angular4实现动态添加删除表单输入框功能
2017/08/11 Javascript
JQuery事件委托原理与用法实例分析
2019/05/13 jQuery
对layui中的onevent 和event的使用详解
2019/09/06 Javascript
vue实现将一个数组内的相同数据进行合并
2019/11/07 Javascript
基于ts的动态接口数据配置的详解
2019/12/18 Javascript
浅谈TypeScript的类型保护机制
2020/02/23 Javascript
[01:02:48]2018DOTA2亚洲邀请赛小组赛 A组加赛 Newbee vs Liquid
2018/04/03 DOTA
Python中的Numeric包和Numarray包使用教程
2015/04/13 Python
浅谈Python中copy()方法的使用
2015/05/21 Python
Python中的条件判断语句与循环语句用法小结
2016/03/21 Python
Python统计单词出现的次数
2018/04/04 Python
Python利用openpyxl库遍历Sheet的实例
2018/05/03 Python
Python3 关于pycharm自动导入包快捷设置的方法
2019/01/16 Python
Python分析彩票记录并预测中奖号码过程详解
2019/07/09 Python
Pytorch evaluation每次运行结果不同的解决
2020/01/02 Python
Python random库使用方法及异常处理方案
2020/03/02 Python
python中如何打包用户自定义模块
2020/09/23 Python
一张图片能隐含千言万语之隐藏你的程序代码
2012/12/13 HTML / CSS
衰败城市英国官网:Urban Decay英国
2020/04/29 全球购物
建筑工程实习自我鉴定
2013/09/19 职场文书
运动会开幕式邀请函
2014/01/22 职场文书
应收账款管理制度
2015/08/06 职场文书
农村房屋租赁合同(范本)
2019/07/23 职场文书