简述vue下高德地图的一些简单功能的使用(定位,添加marker)

中秋节刚过,马上迎来的就是国庆节,讲道理,我是真的有点浮躁了。

算了,说一下最近在项目中用到的简单的高德地图的一些功能。

 定位(Geolocation)点标记(Marker) //////  vue中使用高德地图,要注意是vue中使用的

  简单粗暴,直接上代码

  

  import AMap from 'AMap'

  this.map = new AMap.Map('#container', {

    center: [] , // 初始化地图时显示的中心点坐标

    zoom: 11 , // 初始化地图时显示的地图放大等级

    resizeEnable: true // 调整任意窗口的大小,自适应窗口

  })

  AMap.plugin('AMap.Geolocation', function () {

    var geolocation = new AMap.Geolocation({

      // 是否使用高精度定位,默认:true

      enableHighAccuracy: true,

      // 设置定位超时时间,默认:无穷大

      timeout: 10000,

      // 定位按钮的停靠位置的偏移量,默认:Pixel(10, 20)

      buttonOffset: new AMap.Pixel(10, 20),

      // 定位成功后调整地图视野范围使定位位置及精度范围视野内可见,默认:false

       zoomToAccuracy: true,

      // 定位按钮的排放位置, RB表示右下

      buttonPosition: 'RB'

      })

      geolocation.getCurrentPosition()

      AMap.event.addListener(geolocation, 'complete', (e) => {

        console.log(e) // 定位成功之后做的事

        // 定位成功之后再定位处添加一个marker

        var marker = new AMap.Marker({

          position: e.position, // (e.position)--->定位点的点坐标, position ---> marker的定位点坐标,也就是marker最终显示在那个点上,

          icon: '', // marker的图标,可以自定义,不写默认使用高德自带的

          map: this.map,  // map ---> 要显示该marker的地图对象

        })

      })

      AMap.event.addListener(geolocation, 'error', (e) => {

        console.log(e) // 定位失败做的事

      })

  })

ok,已经 给木偶蜗 了。接下来会说一些常用的数据展示类功能, 例如点聚集,通过点击点聚集中的某一个点,显示对应点的信息窗体。等等,期待大家的关注,谢谢

原文地址:https://www.cnblogs.com/0915ty/p/9699097.html