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 相关文章推荐
cnblogs csdn 代码运行框实现代码
Nov 02 Javascript
javascript+HTML5的canvas实现七夕情人节3D玫瑰花效果代码
Aug 04 Javascript
解决JS请求服务器gbk文件乱码的问题
Oct 16 Javascript
jQuery使用zTree插件实现树形菜单和异步加载
Feb 25 Javascript
Document.body.scrollTop的值总为零的快速解决办法
Jun 09 Javascript
返回函数的JavaScript函数
Jun 14 Javascript
BootStrap3使用错误记录及解决办法
Dec 22 Javascript
arcgis for js栅格图层叠加(Raster Layer)问题
Nov 22 Javascript
解决vue的 v-for 循环中图片加载路径问题
Sep 03 Javascript
JS实现的图片选择顺序切换和循环切换功能示例【测试可用】
Dec 28 Javascript
jQuery实现鼠标滑动切换图片
May 27 jQuery
vue-video-player实现实时视频播放方式(监控设备-rtmp流)
Aug 10 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二进制流 逐bit的低位在前算法(详解)
2013/06/13 PHP
PHP SPL标准库中的常用函数介绍
2015/05/11 PHP
PHP实现通过正则表达式替换回调的内容标签
2015/06/15 PHP
一端时间轮换的广告
2006/06/26 Javascript
Windows Live的@live.com域名注册漏洞 利用代码
2006/12/27 Javascript
一些javascript一些题目的解析
2010/12/25 Javascript
关于js new Date() 出现NaN 的分析
2012/10/23 Javascript
jquery cookie实现的简单换肤功能适合小网站
2013/08/25 Javascript
JavaScript判断访问的来源是手机还是电脑,用的哪种浏览器
2013/12/12 Javascript
指定区域的图片自动按比例缩小的js代码(防止页面被图片撑破)
2014/02/21 Javascript
使用jQuery和Bootstrap实现多层、自适应模态窗口
2014/12/22 Javascript
JavaScript人脸识别技术及脸部识别JavaScript类库Tracking.js
2015/09/14 Javascript
JS前端加密算法示例
2016/12/22 Javascript
seajs中模块依赖的加载处理实例分析
2017/10/10 Javascript
微信小程序如何获取用户手机号
2018/01/26 Javascript
Angular异步变同步处理方法
2018/08/13 Javascript
vue  directive定义全局和局部指令及指令简写
2018/11/20 Javascript
移动端(微信等使用vConsole调试console的方法
2019/03/05 Javascript
解决layer.open弹出框不能获取input框的值为空的问题
2019/09/10 Javascript
python局部赋值的规则
2013/03/07 Python
python发布模块的步骤分享
2014/02/21 Python
Python中dictionary items()系列函数的用法实例
2014/08/21 Python
浅述python中argsort()函数的实例用法
2017/03/30 Python
Python使用matplotlib绘图无法显示中文问题的解决方法
2018/03/14 Python
详解如何管理多个Python版本和虚拟环境
2019/05/10 Python
python将字母转化为数字实例方法
2019/10/04 Python
python实现简单的学生管理系统
2021/02/22 Python
酒店销售经理岗位职责
2014/01/31 职场文书
物业保安员岗位职责
2014/03/14 职场文书
教师新年寄语
2014/04/03 职场文书
中国梦口号
2014/06/13 职场文书
服务理念标语
2014/06/18 职场文书
Python网络编程之ZeroMQ知识总结
2021/04/25 Python
sql server删除前1000行数据的方法实例
2021/08/30 SQL Server
CentOS8.4安装Redis6.2.6的详细过程
2021/11/20 Redis
千万级用户系统SQL调优实战分享
2022/03/03 MySQL