软件简介

vuemap/vue-amap 是一套基于 Vue 2.0 和高德地图的地图组件。
该版本对原 vue-amap 组件进行升级,主要适配 amap2.0 相关的接口,同时调整事件绑定形式,调整为使用 v-on 进行事件绑定。
组件中对高德可视化组件 loca 进行封装,同时提供基础的 ThreeJS 能力,可以正常加载 GLTF 模型,获取模型对象进行细节控制。
该项目基于 https://github.com/ElemeFE/vue-amap/ 进行二次开发

快速上手

// 引入vue-amap
import VueAMap from '@vuemap/vue-amap';
import '@vuemap/vue-amap/dist/style.css';

Vue.use(VueAMap);

// 初始化vue-amap
VueAMap.initAMapApiLoader({
  // 高德的key
  key: 'YOUR_KEY',
});

//如果需要使用自定义的threeJS相关的组件,需要格外引入库中的three。该包只提供常用的模型加载,灯光,HDR等相关能力,更细致的控制需要在模型初始化后获取对象进行操作
import VueAmapThree from '@vuemap/vue-amap/dist/three'
Vue.use(VueAmapThree);

 

示例

<template>
    <div class="amap-page-container">
      <el-amap ref="map" map-style="amap://styles/62009be025f187dd3eafe327d2e55b8e" :center="center" :zoom="zoom" view-mode="3D" @init="initMap" @click="clickMap" class="amap-demo">
      </el-amap>

      <div class="toolbar">
        <button @click="getMap()">获取map实例</button>
      </div>
    </div>
  </template>

  <style>
    .amap-demo {
      height: 300px;
    }
  </style>

  <script>
    module.exports = {
      data: function() {
        return {
          zoom: 12,
          center: [121.59996, 31.197646],
        };
      },

      methods: {
        getMap() {
          console.log(this.$refs.map.$$getInstance());
        },
        clickMap(e){
          console.log('click map :', e );
        },
        initMap(e){
          console.log('init map: ', e);
        }
      }
    };
  </script>

 

展开阅读全文

代码

的 Gitee 指数为
超过 的项目

评论 (0)

加载中
更多评论
暂无内容
发表了博客
2019/09/16 14:40

vue引入vue-amap

高德全局引入vue 一、安装 1、npm install vue-amap --save 2、在main.js中引入 import VueAMap from 'vue-amap' Vue.use(VueAMap) VueAMap.initAMapApiLoader({ key: '你的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' }) 二、在组件中用 1、HTML <e...

0
0
发表了博客
2018/08/13 18:10

vue-amap小结

vue-amap:高德地图API 我主要做的是点坐标+信息窗体展示。 新建一个vue项目,下载vue-amap/axios。在项目中引入,并将axios设置全局 vue-amap需要自己的专属key值,key申请地址:https://lbs.amap.com/dev/id/newuser 在index.js---module.exports---dev中添加接口的配置 proxyTable: { '/third' : { target: '***************', // 测试服务器地址 changeOrigin: true,//允许跨域 pathRewrit...

0
0
发表了博客
2019/12/20 17:22

vue调用高德地图:vue-amap

前言:之前没有接触过页面调用地图的项目,某次面试,老板要求我用vue-amap调用高德地图,回家以后,我去网上查了一些案例和教程,看似很简单的引入调用,我却整整弄了一宿,还没弄出来!!!百般无奈之下,我选择第二天重头来过,一定要找到什么原因... 结果!血的教训告诉我,记录教程的时候,一定要有实践基础,切不可敷衍了事,不然别人看你的文章只是在浪费时间。 —————————— vue调用高德地图拢共分三步: 1.去高...

0
0
发表了博客
2019/06/25 22:51

vue调用高德地图:vue-amap

vue调用高德地图拢共分三步: 1.去高德开发者平台申请key; 2.安装vue-amap; 3.使用组件调用地图 1.注册高德开发者账号,申请KEY 注册完成->找到控制台(右上角)->你会看到下图: image.png 选择你的开发者身份,这里演示个人开发者获取key方法。 按提示走完注册流程即可。 注册完再打开控制台->应用管理->找到“+添加新KEY”->点击会跳出这个弹框: image.png 提交之后,你会看到自己的key。 2.vue安装vue-amap npm安装 np...

0
0
发表了博客
2019/11/05 15:12

vue-amap地图组件的使用

vue-amap是一套基于Vue 2.0和高德地图的地图组件。 安装 npm install -S vue-amap 使用文档 https://elemefe.github.io/vue-amap 使用方法 <template> <div class="test"> <div class="amap-wrapper map"> <!--vid:marker对象id,zoomEnable:鼠标滚轮是否允许放大缩小--> <!--dragEnable:书否允许拖拽,zoom:地图范围--> <!--center:地图中心--> <el-amap class="amap...

0
0
发表了博客
2018/05/16 19:38

vue 高德地图使用 vue-amap

此插件文档及使用还不错 https://elemefe.github.io/vue-amap/ <template> <div class="amap-page-container" style="height:300px;"> <el-amap vid="amapDemo" :zoom="zoom" :center="center" class="amap-demo"> <el-amap-circle v-for="(circle,index) in circles" :key="index" :center="circle.center" :radius="circle.radius" :fill-opacity="circle.fillOpacity" :events="circle.events"></el-am...

0
0
发表了博客
2019/09/11 10:12

vue-amap详细使用教程

在antd pro内使用vue-amap,实现地图和坐标点。 1,安装 npm install vue-amap --save 2,在main,js内引入 import VueAMap from 'vue-amap'; Vue.use(VueAMap); VueAMap.initAMapApiLoader({ key: 'YOUR_KEY', plugin: ['AMap.Autocomplete', 'AMap.PlaceSearch', 'AMap.Scale', 'AMap.OverView', 'AMap.ToolBar', 'AMap.MapType', 'AMap.PolyEditor', 'AMap.CircleEditor'], v: '1.4.4' }); 3.在vue中使用,tem...

0
0
发表了博客
2020/07/29 07:34

vue中使用vue-amap(高德地图)

因为项目要求调用高德地图,就按照官方文档按部就班的捣鼓,这一路上出了不少问题。 前言: vue-cli,node环境什么的自己安装设置推荐一个博客:https://blog.csdn.net/wulala_hei/article/details/80488674 1,找一个磁盘,在里面git bash here 然后vue init webpack XXX(文件夹名字) 你 第一步:在test里面安装install 指令:1.npm install 2.npm install vue-amap --save 注意:我在安装的时候总是出现了说找不到webpack的...

0
0
发表了博客
2019/03/21 15:47

vue中使用vue-amap(高德地图)

因为项目要求调用高德地图,就按照官方文档按部就班的捣鼓,这一路上出了不少问题。 前言: vue-cli,node环境什么的自己安装设置推荐一个博客:https://blog.csdn.net/wulala_hei/article/details/80488674 1,找一个磁盘,在里面git bash here 然后vue init webpack XXX(文件夹名字) 你 第一步:在test里面安装install 指令:1.npm install 2.npm install vue-amap --save 注意:我在安装的时候总是出现了说找不到webpack的...

0
0
没有更多内容
加载失败,请刷新页面
点击加载更多
加载中
下一页
暂无内容
0 评论
1 收藏
分享
OSCHINA
登录后可查看更多优质内容
返回顶部
顶部