资讯

精准传达 • 有效沟通

从品牌网站建设到网络营销策划，从策略到执行的一站式服务

网站建设 >

查看其它板块

vue中amap的使用方法-创新互联

这篇文章主要介绍vue中amap的使用方法，文中介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们一定要看完！

创新互联科技有限公司专业互联网基础服务商，为您提供达州电信机房，高防主机，成都IDC机房托管，成都主机托管等互联网服务。

vue amap的使用方法：首先通过“vue init webpack vueamap”下载vue webpack的模板；然后使用“cnpm install vue-amap --save”安装vue-amap；最后运用此组件库即可。

一、 down一个vue webpack的模板

vue init webpack vueamap

根据提示完成模板下载，此处我的项目中选择router为yes 其他测试插件全为no? vueamap为文件夹名称

模板下载后 安装依赖

cnpm install

依赖安装完成后 执行开发环境

npm run dev

若提示在"localhost:8080"上查看效果，在浏览器上查看效果，若出现VUE效果 则模板下载成功

二、安装vue-amap

安装vue-amap

cnpm install vue-amap --save

安装完成后，main.js文件中引入

import VueAMap from "vue-amap";
Vue.use(VueAMap);

初始化高德地图，此处需要有一个KEY，可以到高德地图平台上去申请.

初始化高德地图的key与插件

VueAMap.initAMapApiLoader({
  key: "e1dedc6bdd765d46693986ff7ff969f4",
  plugin: [
    "AMap.Autocomplete", //输入提示插件
    "AMap.PlaceSearch", //POI搜索插件
    "AMap.Scale", //右下角缩略图插件 比例尺
    "AMap.OverView", //地图鹰眼插件
    "AMap.ToolBar", //地图工具条
    "AMap.MapType", //类别切换控件，实现默认图层与卫星图、实施交通图层之间切换的控制
    "AMap.PolyEditor", //编辑 折线多，边形
    "AMap.CircleEditor", //圆形编辑器插件
    "AMap.Geolocation" //定位控件，用来获取和展示用户主机所在的经纬度位置
  ],
  uiVersion: "1.0"
});

三、 使用

下面开始正式运用此组件库

注：后续所用到的配置并非全面配置，若有不懂或想详细了解，

请移步vue-amap文档：vue-amap文档（https://elemefe.github.io/vue-amap/#/zh-cn/introduction/install）

文档介绍比较简单，建议到高德官方查看参考手册对照使用

高德参考手册：参考手册（http://lbs.amap.com/api/javascript-api/reference/map）

1、构建地图

模板：

    
      
      
    

data中数据：

zoom:16,
center:[121.406051,31.179695],

保存后，浏览器中运行，效果图如下：

vue中amap的使用方法

2、添加标注点（此处以地图的center为位置点添加）

模板：


      
        
        
      
    

增加一条label数据，作为该点的介绍使用 ，可参照文档自行决定是否添加

      label:{
        content:'钦汇园',
        offset:[10,12]
      },

保存后结果如下图 marker已经加载了

vue中amap的使用方法

3、添加圆形区域?（此处依旧以中心点为圆心 半径为100）

注意：添加圆形区域时，要在初始化插件里初始化"AMap.CircleEditor",否则会报错

模板：


      
        
        
        
        
      
    

拓展：动态更改圆形区域的半径，可用于设置范围

此处我以“精度++”按钮为例，每点击一次半径加10

data数据：

radius:100

增加事件：

addRadius(){
      this.radius+=10;
    }

PS：添加其他覆盖物，如折线，图片，多边形等，用法与此类似，参照官方文档进行使用即可

效果图如下：

vue中amap的使用方法

3、使用插件

只用插件时，一定要在前面initAMapApiLoader里面进行初始化，否则会报错

模板：

  
      
        
        
        
        
      
    

data里添加插件数据:

plugin: [
        {
          pName: 'ToolBar',//工具条插件
          position:'LB',
        },
        {
          pName: 'MapType',//卫星与地图切换
          defaultType: 0,
          showTraffic:true,//实时交通图层
        },
        {
          pName:'OverView',
          //isOpen:true//鹰眼是否打开
        },
        {
          pName:'Scale'
        },
        {
          pName:'Geolocation',//定位插件
          showMarker:false,
          events:{
            init(o){
              //定位成功 自动将marker和circle移到定位点
              o.getCurrentPosition((status, result) => {
                console.log(result);
                vm.center=[result.position.lng,result.position.lat]
              });
            }
          }
        }
      ]

效果图如下：

vue中amap的使用方法

全部代码如下：




hr{
  border-color: red;
  border-style: dashed;
}
.amap-wrapper{
  height: 300px;
}

以上是“vue中amap的使用方法”这篇文章的所有内容，感谢各位的阅读！希望分享的内容对大家有帮助，更多相关知识，欢迎关注创新互联行业资讯频道！


网站栏目：vue中amap的使用方法-创新互联
分享链接：http://cdkjz.cn/article/dpgopo.html
返回首页 了解更多建站资讯

相关资讯

多年建站经验

多一份参考，总有益处

联系快上网，免费获得专属《策划方案》及报价

咨询相关问题或预约面谈，可以通过以下方式与我们联系

大客户专线   成都：13518219792   座机：028-86922220

在线咨询 提交需求
友情链接 交换友情链接
企业网站改版特丽尔硅藻泥成都网站设计成都免费建站设计网站达州网站建设视频运营成都定制网页设计南充护栏钻孔机边坡防护网厂家

成都网站建设公司地址：成都市青羊区太升南路288号锦天国际A座10层 建设咨询028-86922220

成都快上网科技有限公司-四川网站建设设计公司 | 蜀ICP备19037934号 Copyright 2020,ALL Rights Reserved cdkjz.cn | 成都网站建设 | © Copyright 2020版权所有.

专家团队为您提供成都网站建设,成都网站设计,成都品牌网站设计,成都营销型网站制作等服务,成都建网站就找快上网！ | 成都网站建设哪家好？ | 网站建设地图