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 相关文章推荐
Pro JavaScript Techniques学习笔记
Dec 28 Javascript
node.js学习总结之调式代码的方法
Jun 25 Javascript
浅谈jQuery 选择器和dom操作
Jun 07 Javascript
AngularJs Dependency Injection(DI,依赖注入)
Sep 02 Javascript
ES6中module模块化开发实例浅析
Apr 06 Javascript
vue组件详解之使用slot分发内容
Apr 09 Javascript
基于vue2.0实现仿百度前端分页效果附实现代码
Oct 30 Javascript
使用taro开发微信小程序遇到的坑总结
Apr 08 Javascript
vue element中axios下载文件(后端Python)
May 10 Javascript
IntelliJ IDEA编辑器配置vue高亮显示
Sep 26 Javascript
vue渲染方式render和template的区别
Jun 05 Javascript
vue2实现provide inject传递响应式
May 21 Vue.js
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
《APMServ 5.1.2》使用图解
2006/10/23 PHP
php中定义网站根目录的常用方法
2010/08/08 PHP
防止用户利用PHP代码DOS造成用光网络带宽
2011/03/01 PHP
无JS,完全php面向过程数据分页实现代码
2012/08/27 PHP
yii框架配置默认controller和action示例
2014/04/30 PHP
PHP微框架Dispatch简介
2014/06/12 PHP
php获取CSS文件中图片地址并下载到本地的方法
2014/12/02 PHP
关于php中一些字符串总结
2016/05/05 PHP
thinkphp框架实现删除和批量删除
2016/06/29 PHP
PHP利用Mysql锁解决高并发的方法
2018/09/04 PHP
原生Js页面滚动延迟加载图片实现原理及过程
2013/06/24 Javascript
解析ScrollPic在ie8下只滚动一遍,然后变为空白 ie6,ie7,chrome,firefox正常
2013/06/26 Javascript
Grunt入门教程(自动任务运行器)
2015/08/06 Javascript
微信小程序 闭包写法详细介绍
2016/12/14 Javascript
基于JavaScript获取base64图片大小
2019/10/18 Javascript
Vue实现开心消消乐游戏算法
2019/10/22 Javascript
javascript中的相等操作符(==与===区别)
2019/12/21 Javascript
[00:47]DOTA2荣耀之路6:玩不了啦!
2018/05/30 DOTA
Python 获取新浪微博的最新公共微博实例分享
2014/07/03 Python
python人人网登录应用实例
2014/09/26 Python
python动态性强类型用法实例
2015/05/09 Python
Python中用于计算对数的log()方法
2015/05/15 Python
Python3.5实现的三级菜单功能示例
2019/03/25 Python
Python continue语句实例用法
2020/02/06 Python
Python基于BeautifulSoup爬取京东商品信息
2020/06/01 Python
DOM和JQuery对象有什么区别
2016/11/11 面试题
如何安装ruby on rails
2014/02/09 面试题
审计工作个人的自我评价
2013/12/25 职场文书
工程资料员岗位职责
2014/03/10 职场文书
六查六看心得体会
2014/10/14 职场文书
银行保安拾金不昧表扬稿
2015/05/05 职场文书
写给老师的保证书
2015/05/09 职场文书
学校少先队工作总结
2015/08/12 职场文书
2019员工保密协议书(3篇)
2019/09/23 职场文书
Python多个MP4合成视频的实现方法
2021/07/16 Python
Python使用socket去实现TCP客户端和TCP服务端
2022/04/12 Python