vue+ele爬坑之路（三）—vue-amap

地图几乎是很多项目中不可或缺的一部分，这里介绍下在vue+element中vue-map的使用。

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'],//依赖配置，根据自己的需求引入
  // 默认高德 sdk 版本为 1.4.4
  v: '1.4.4'
});

3、使用

3-1、只显示地图及中心点定位

<template>
  <div class="content">
    <div class="amap-wrapper">
      <el-amap class="amap-box" :zoom="zoom" :center="center" :mapStyle="mapStyle"></el-amap>
    </div>
  </div>
</template>
<script>
  export default {
    data() {
      return {
        center: [121.539693,31.126667],//地图中心点坐标
        zoom:16,//初始化地图显示层级
        mapStyle: "amap://styles/8b6be8ec497009e17a708205348b899a", //设置地图样式
      }
    }
  }
</script>
<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped lang="scss">
  .amap-wrapper {
    width: 1440px;
    height: 600px;

  }
</style>

效果图如下

3-2、添加多个点坐标

  <div class="content">
    <div class="amap-wrapper">
      <el-amap class="amap-box" :zoom="zoom" :center="center" :mapStyle="mapStyle">
        <el-amap-marker v-for="marker in markers" :position="marker.position" :key="marker.id"></el-amap-marker>
      </el-amap>
    </div>
  </div>
</template>

<script>

  export default {
    data() {
      return {
        center: [121.539693,31.126667],
        zoom:16,
        mapStyle: "amap://styles/8b6be8ec497009e17a708205348b899a", //设置地图样式
        markers: [
          {
            position: [121.536477,31.126924],
          },
          {
            position:[121.538097,31.126337],
          },
          {
            position: [121.536306,31.127466],
          },
          {
            position:[121.538065,31.127007],
          },
          {
            position: [121.535973,31.125593]
          }
        ],
      }
    },
    methods:{ },
    mounted(){}
  }
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped lang="scss">
  .amap-wrapper {
    width: 1440px;
    height: 600px;

  }
</style>

效果图如下

3-3、自定义点坐标图案

  <div class="content">
    <div class="amap-wrapper">
      <el-amap class="amap-box" :zoom="zoom" :center="center" :mapStyle="mapStyle">
        <el-amap-marker v-for="marker in markers" :position="marker.position" :key="marker.id" :icon="marker.icon"></el-amap-marker>
      </el-amap>
    </div>
  </div>
</template>

<script>
  import {pointMarker} from '../../assets/styleJson'
  export default {
    data() {
      return {
        center: [121.539693,31.126667],
        zoom:16,
        mapStyle: "amap://styles/8b6be8ec497009e17a708205348b899a", //设置地图样式
        markers: [],
      }
    },
    methods:{
      point(){
        let markers = [];
        let windows=[]
        let that=this
        pointMarker.forEach((item,index)=>{
          markers.push({
            position: [item.lng,item.lat],
            icon:item.url,
          })
        })
        // 加点
        this.markers = markers;
      },
    },
    mounted(){
      this.point()
    }
  }
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped lang="scss">
  .amap-wrapper {
    width: 1440px;
    height: 600px;

  }
</style>

引入的styleJson结构为

生成的效果图：

3-4、信息窗体的切换

  <div class="content">
    <div class="amap-wrapper">
      <el-amap class="amap-box" :zoom="zoom" :center="center" :mapStyle="mapStyle">
        <el-amap-marker v-for="marker in markers" :position="marker.position" :key="marker.id" :events="marker.events"  :icon="marker.icon"></el-amap-marker>
        <el-amap-info-window v-if="window" :position="window.position" :visible="window.visible" :content="window.content" :offset="window.offset"></el-amap-info-window>
      </el-amap>
    </div>
  </div>
</template>

<script>
  import {pointMarker} from '../../assets/styleJson'
  export default {
    data() {
      return {
        center: [121.539693,31.126667],
        zoom:16,
        mapStyle: "amap://styles/8b6be8ec497009e17a708205348b899a", //设置地图样式
        markers: [],
        windows:[],
        window:''
      }
    },
    methods:{
      point(){
        let markers = [];
        let windows=[]
        let that=this
        pointMarker.forEach((item,index)=>{
          markers.push({
            position: [item.lng,item.lat],
            icon:item.url,
            events: {
              click() {
                that.windows.forEach(window => {
                  window.visible = false; //关闭窗体
                });
                that.window = that.windows[index];
                that.$nextTick(() => {
                  that.window.visible = true;//点击点坐标，出现信息窗体
                });
              }
            }
          })
          windows.push({
            position: [item.lng,item.lat],
            content:"<div>"+item.text+"</div>",//内容
            offset:[5,-15],//窗体偏移
            visible: false//初始是否显示
          })
        })
        //  加点
        this.markers = markers;
        //加弹窗
        this.windows=windows
      },
    },
    mounted(){
      this.point()
    }
  }
</script>
<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped lang="scss">
  .amap-wrapper {
    width: 1440px;
    height: 600px;
 }
</style>

效果图如下

3-5、区域覆盖

<template>
  <div class="content">
    <div class="amap-wrapper">
      <el-amap class="amap-box" :zoom="zoom" :center="center" :mapStyle="mapStyle">
        <el-amap-marker v-for="marker in markers" :position="marker.position" :key="marker.id" :events="marker.events"  :icon="marker.icon"></el-amap-marker>
        <el-amap-info-window v-if="window" :position="window.position" :visible="window.visible" :content="window.content" :offset="window.offset"></el-amap-info-window>
        <el-amap-polygon v-for="poly in polygons" :path="poly.path" :key="poly.id" fillColor="rgba(0,216,255,.5)" strokeColor="#f0f" strokeOpacity="0.5" strokeStyle="dashed"></el-amap-polygon>
      </el-amap>
    </div>
  </div>
</template>

<script>
  import {positionPoint, pointMarker} from '../../assets/styleJson'
  export default {
    data() {
      return {
        center: [121.539693,31.126667],
        zoom:16,
        mapStyle: "amap://styles/8b6be8ec497009e17a708205348b899a", //设置地图样式
        polygonPath: positionPoint,
        markers: [],
        windows:[],
        window: "",
        polygons:[],
      }
    },
    methods: {
      point(){
        let markers = [];
        let windows=[]
        let that=this
        pointMarker.forEach((item,index)=>{
          markers.push({
            position: [item.lng,item.lat],
            icon:item.url,
            events: {
              click() {
                that.windows.forEach(window => {
                  window.visible = false;
                });
                that.window = that.windows[index];
                that.$nextTick(() => {
                  that.window.visible = true;
                });
              }
            }
          })
          windows.push({
            position: [item.lng,item.lat],
            content:"<div>"+item.text+"</div>",
            offset:[5,-15],
            visible: false
          })
        })
        //  加窗体
        this.markers = markers;
        //加弹窗
        this.windows=windows
      },
      polygon(){
        let path=[];
        let polygon=[]
        positionPoint.forEach(item=>{
          path.push([item.lng,item.lat])
        })
        polygon.push({path:path})
        //添加区域覆盖物
        this.polygons=polygon
      }
    },
    mounted(){
      this.point()
      this.polygon()
    }
  }
</script>
<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped lang="scss">
  .amap-wrapper {
    width: 1440px;
    height: 600px;

  }
</style>

效果图如下

好了，这些就是关于vue-amap的基础使用了，感谢大家的阅读，欢迎大家在评论区提出建议一起讨论，更多功能可移步https://elemefe.github.io/vue-amap/#/zh-cn/introduction/install