zoukankan      html  css  js  c++  java
  • vue2.X对接高德地图:vue-amap(一)

    最近开启新的项目:要求对接高德地图,并在Vue的基础上。

    通过在网上查找,发现了还可以的组件:vue-amap。在这附上官方文档一份

    下载vue-amap

    npm install vue-amap --save

    引入vue-amap

    import VueAMap from 'vue-amap';
    
    Vue.use(VueAMap);
    
    VueAMap.initAMapApiLoader({
      key: 'your amap key',
      plugin: ['AMap.Autocomplete', 'AMap.PlaceSearch', 'AMap.Scale', 'AMap.OverView', 'AMap.ToolBar', 'AMap.MapType', 'AMap.PolyEditor', 'AMap.CircleEditor'],
      // 默认高德 sdk 版本为 1.4.4
      v: '1.4.4'
    });

    在这里,你需要在高德开发平台上注册自己应用程序并且生成KEY

    而在plugin中写入你要用到的方法,这里只是一部分,AMap.Geolocatio/*获取当前定位*/AMap.LngLat/*将数组转化为定位数据*/AMap.Geocoder/*逆地理编码*/···

    这里就不一一列举了,后边我会说一下我用到的一些写法以及坑。

    写法:

    <el-amap ref="map" vid="amapDemo" :center="center" :zoom="zoom" :plugin="plugin" :events="events" class="amap-demo">
    </el-amap>

    vid:地图容器节点的ID

     center:地图中心坐标值

    zoom:地图放大倍数

    events:地图上绑定的事件

    将上边的参数配置好之后你就可以看到一个地图了。

  • 相关阅读:
    生成器 三元表达式 列表生成式 匿名函数 内置函数
    迭代器
    叠加装饰器和补充部分
    函数的名称空间和作用域
    函数基础
    闭包函数和装饰器
    文件的处理
    第十章 程序的循环结构
    第九章 身体质量指数BMI的python实现
    第八章 程序的分支结构
  • 原文地址:https://www.cnblogs.com/WQLong/p/9437480.html
Copyright © 2011-2022 走看看