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

 更新时间:2019年08月22日 09:08:24   作者:码农变身程序员  
这篇文章主要介绍了vue使用高德地图根据坐标定位点的实现代码,代码简单易懂,非常不错,具有一定的参考借鉴价值,需要的朋友可以参考下

前言

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

正文

<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使用高德地图根据坐标定位点的实现代码,希望对大家有所帮助,如果大家有任何疑问欢迎给我留言,小编会及时回复大家的!

相关文章

  • vant遇到van-sidebar数据超出不能滑动的问题

    vant遇到van-sidebar数据超出不能滑动的问题

    这篇文章主要介绍了vant遇到van-sidebar数据超出不能滑动的问题,具有很好的参考价值,希望对大家有所帮助。如有错误或未考虑完全的地方,望不吝赐教
    2022-04-04
  • Vue使用插槽实现高复用组件

    Vue使用插槽实现高复用组件

    在现代前端开发中,组件化开发已经成为主流,其中 Vue.js 的插槽(slots)特性为我们构建灵活、可复用的组件提供了强有力的支持,下面我们就来看看Vue如何通过插槽实现高复用组件吧
    2024-11-11
  • vue2.0+webpack环境的构造过程

    vue2.0+webpack环境的构造过程

    本文分步骤给大家介绍了vue2.0+webpack环境的构造过程的相关资料,非常不错具有参考借鉴价值,需要的朋友可以参考下
    2016-11-11
  • Vue的轮播图组件实现方法

    Vue的轮播图组件实现方法

    下面小编就为大家分享一篇Vue的轮播图组件实现方法,具有很好的参考价值,希望对大家有所帮助。一起跟随小编过来看看吧
    2018-03-03
  • vue3中实现图片压缩的示例代码

    vue3中实现图片压缩的示例代码

    图片压缩是一种比较便捷的压缩方式,本文主要介绍了vue3中实现图片压缩的示例代码,文中通过示例代码介绍的非常详细,需要的朋友们下面随着小编来一起学习学习吧
    2024-02-02
  • vue的v-if里实现调用函数

    vue的v-if里实现调用函数

    这篇文章主要介绍了vue的v-if里实现调用函数方式,具有很好的参考价值,希望对大家有所帮助。如有错误或未考虑完全的地方,望不吝赐教
    2022-07-07
  • vue的keep-alive中使用EventBus的方法

    vue的keep-alive中使用EventBus的方法

    keep-alive是Vue提供的一个抽象组件,用来对组件进行缓存,从而节省性能,由于是一个抽象组件,所以在页面渲染完毕后不会被渲染成一个DOM元素。这篇文章主要介绍了vue的keep-alive中使用EventBus的方法,需要的朋友可以参考下
    2019-04-04
  • 基于Vue3+TypeScript实现鼠标框选功能

    基于Vue3+TypeScript实现鼠标框选功能

    这篇文章主要介绍了基于Vue3+TypeScript实现鼠标框选功能,文中通过代码示例给大家讲解的非常纤细,对大家的学习或工作有一定的帮助,需要的朋友可以参考下
    2024-07-07
  • Vue.directive使用注意(小结)

    Vue.directive使用注意(小结)

    这篇文章主要介绍了Vue.directive使用注意(小结),小编觉得挺不错的,现在分享给大家,也给大家做个参考。一起跟随小编过来看看吧
    2018-08-08
  • 为Vue3 组件标注 TS 类型实例详解

    为Vue3 组件标注 TS 类型实例详解

    这篇文章主要为大家介绍了为Vue3 组件标注 TS 类型实例详解,有需要的朋友可以借鉴参考下,希望能够有所帮助,祝大家多多进步,早日升职加薪
    2022-08-08

最新评论