zoukankan      html  css  js  c++  java
  • 简述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,已经 给木偶蜗 了。接下来会说一些常用的数据展示类功能, 例如点聚集,通过点击点聚集中的某一个点,显示对应点的信息窗体。等等,期待大家的关注,谢谢

  • 相关阅读:
    Android触控屏幕Gesture(GestureDetector和SimpleOnGestureListener的使用教程)
    Cocos发展Visual Studio下一个libcurl图书馆开发环境的搭建
    使用DbUtils实现CRUD
    大约apache 2.4.X虚拟主机配置问题的版本号后,
    应对黑客攻击SQL SERVER数据库中的一个案例
    【Unity技能】做一个简单的NPC
    ViewRootImpl和WindowManagerService笔记
    Web Service简单入门示例
    Oracle Instanc Client安装命令工具
    ListView嵌套GridView显示不完整的解决方案
  • 原文地址:https://www.cnblogs.com/0915ty/p/9699097.html
Copyright © 2011-2022 走看看