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 textarea光标定位方法(兼容IE和FF)
Mar 12 Javascript
Javascript与jQuery方法的隐藏与显示
Jan 19 Javascript
2种jQuery 实现刮刮卡效果
Feb 01 Javascript
两款JS脚本判断手机浏览器类型跳转WAP手机网站
Oct 16 Javascript
AngularJS中比较两个数组是否相同
Aug 24 Javascript
JS中常用的正则表达式
Sep 29 Javascript
node.js路径处理方法以及绝对路径详解
Mar 04 Javascript
vue自动化表单实例分析
May 06 Javascript
Vue中父子组件通讯之todolist组件功能开发
May 21 Javascript
解决vue单页面应用中动态修改title问题
Jun 09 Javascript
layui checkbox默认选中,获取选中值,清空所有选中项的例子
Sep 02 Javascript
vue-cli4项目开启eslint保存时自动格式问题
Jul 13 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编程开发“虚拟域名”系统
2006/10/09 PHP
用PHP4访问Oracle815
2006/10/09 PHP
php cookie的操作实现代码(登录)
2010/12/29 PHP
CI框架附属类用法分析
2018/12/26 PHP
AJAX架构之Dojo篇
2007/04/10 Javascript
jquery 输入框数字限制插件
2009/11/10 Javascript
NodeJS的模块写法入门(实例代码)
2012/03/07 NodeJs
如何让页面在打开时自动刷新一次让图片全部显示
2012/12/17 Javascript
js 处理数组重复元素示例代码
2013/12/27 Javascript
js之ActiveX控件使用说明 new ActiveXObject()
2014/03/03 Javascript
jQuery animate easing使用方法图文详解
2016/06/17 Javascript
jquery轮播的实现方式 附完整实例
2016/07/28 Javascript
jquery删除table当前行的实例代码
2016/10/07 Javascript
关于JavaScript中事件绑定的方法总结
2016/10/26 Javascript
js常用的继承--组合式继承
2017/03/06 Javascript
详解使用Visual Studio Code对Node.js进行断点调试
2017/09/14 Javascript
关于自定义Egg.js的请求级别日志详解
2018/12/12 Javascript
node中使用log4js4.x版本记录日志的方法
2019/08/20 Javascript
antd中table展开行默认展示,且不需要前边的加号操作
2020/11/02 Javascript
python修改操作系统时间的方法
2015/05/18 Python
python 实现tar文件压缩解压的实例详解
2017/08/20 Python
Python常见内置高效率函数用法示例
2018/07/31 Python
python识别图像并提取文字的实现方法
2019/06/28 Python
Python大数据之网络爬虫的post请求、get请求区别实例分析
2019/11/16 Python
Python + Requests + Unittest接口自动化测试实例分析
2019/12/12 Python
Python中and和or如何使用
2020/05/28 Python
纯css实现照片墙3D效果的示例代码
2017/11/13 HTML / CSS
html5 学习简单的拾色器
2010/09/03 HTML / CSS
Saucony澳大利亚官网:美国跑鞋品牌,运动鞋中的劳斯莱斯
2018/05/05 全球购物
JSP&Servlet技术面试题
2015/05/21 面试题
小学教师的个人自我鉴定
2013/10/24 职场文书
社区义诊通知
2015/04/24 职场文书
小学中队长竞选稿
2015/11/20 职场文书
Javascript 解构赋值详情
2021/11/17 Javascript
使用RedisTemplat实现简单的分布式锁
2021/11/20 Redis
MySQL为数据表建立索引的原则详解
2022/03/03 MySQL