vue-amap怎么用?

vue-amap怎么用?下面本篇文章给大家介绍一下在vue中简单使用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、构建地图

模板:

    <div class="amap-wrapper">
      <el-amap class="amap-box" vid="map" 
        :zoom="zoom"
        :center="center">
      </el-amap>
    </div>

data中数据:

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

保存后,浏览器中运行,效果图如下:

1.png

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

模板:

  <div class="amap-wrapper">
      <el-amap vid="amapDemo" 
        :center="center" 
        :zoom="zoom"
        class="amap-demo">
        <el-amap-marker vid="marker" 
          :position="center" 
          :label="label"
           >
        </el-amap-marker>
      </el-amap>
    </div>

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

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

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

2.png

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

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

模板:

    <div class="amap-wrapper">
      <el-amap vid="amapDemo" 
        :center="center" 
        :zoom="zoom"
        class="amap-demo">
        <el-amap-marker vid="marker" 
          :position="center" 
          :label="label"
           >
        </el-amap-marker>
        <el-amap-circle  vid="circle"
          :center="center" 
          :radius="radius" 
          fill-opacity="0.2"
          strokeColor="#38f"
          strokeOpacity="0.8"
          strokeWeight="1"
          fillColor="#38f"
          >
        </el-amap-circle>
      </el-amap>
    </div>

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

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

data数据:

radius:100

增加事件:

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

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

效果图如下:

3.png

3、使用插件

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

模板:

    <div class="amap-wrapper">
      <el-amap class="amap-box" vid="map" 
        :zoom="zoom"
        :center="center" 
        :plugin="plugin">
        <el-amap-marker vid="marker" 
          :position="center" 
          :label="label"
           >
        </el-amap-marker>
        <el-amap-circle  vid="circle"
          :center="center" 
          :radius="radius" 
          fill-opacity="0.2"
          strokeColor="#38f"
          strokeOpacity="0.8"
          strokeWeight="1"
          fillColor="#38f"
          >
        </el-amap-circle>
      </el-amap>
    </div>

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]
              });
            }
          }
        }
      ]

效果图如下:

4.png

全部代码如下:

<template>
  <div>
    <p>{{msg}}</p>
    <button @click="addRadius">精度++</button>
    <hr>
    <div class="amap-wrapper">
      <el-amap class="amap-box" vid="map" 
        :zoom="zoom"
        :center="center" 
        :plugin="plugin">
        <el-amap-marker vid="marker" 
          :position="center" 
          :label="label"
           >
        </el-amap-marker>
        <el-amap-circle  vid="circle"
          :center="center" 
          :radius="radius" 
          fill-opacity="0.2"
          strokeColor="#38f"
          strokeOpacity="0.8"
          strokeWeight="1"
          fillColor="#38f"
          >
        </el-amap-circle>
      </el-amap>
    </div>
  </div>
</template>
<script>
export default {
  name:'home',
  data(){
    let vm=this;
    return{
      msg:'vue-amap demo',
      zoom:16,
      center:[121.406051,31.179695],
      label:{
        content:'钦汇园',
        offset:[10,12]
      },
      radius:100,
      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]
              });
            }
          }
        }
      ]
    }
  },
  methods:{
    addRadius(){
      this.radius+=10;
    }
  }
}
</script>
<style scoped>
hr{
  border-color: red;
  border-style: dashed;
}
.amap-wrapper{
  height: 300px;
}
</style>

更多web前端知识,请查阅 HTML中文网 !!

以上就是vue-amap怎么用?的详细内容,更多请关注web前端其它相关文章!

赞(0) 打赏
未经允许不得转载:web前端首页 » Vue.js 答疑

评论 抢沙发

  • 昵称 (必填)
  • 邮箱 (必填)
  • 网址

前端开发相关广告投放 更专业 更精准

联系我们

觉得文章有用就打赏一下文章作者

支付宝扫一扫打赏

微信扫一扫打赏