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

地圖幾乎是很多項(xiàng)目中不可或缺的一部分，這里介紹下在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'],//依賴配置，根據(jù)自己的需求引入
  // 默認(rèn)高德 sdk 版本為 1.4.4
  v: '1.4.4'
});

3、使用

3-1、只顯示地圖及中心點(diǎn)定位
<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],//地圖中心點(diǎn)坐標(biāo)
        zoom:16,//初始化地圖顯示層級(jí)
        mapStyle: "amap://styles/8b6be8ec497009e17a708205348b899a", //設(shè)置地圖樣式
      }
    }
  }
</script>
<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped lang="scss">
  .amap-wrapper {
    width: 1440px;
    height: 600px;

  }
</style>

效果圖如下
3-2、添加多個(gè)點(diǎn)坐標(biāo)
  <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", //設(shè)置地圖樣式
        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、自定義點(diǎn)坐標(biāo)圖案
  <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", //設(shè)置地圖樣式
        markers: [],
      }
    },
    methods:{
      point(){
        let markers = [];
        let windows=[]
        let that=this
        pointMarker.forEach((item,index)=>{
          markers.push({
            position: [item.lng,item.lat],
            icon:item.url,
          })
        })
        // 加點(diǎn)
        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結(jié)構(gòu)為

生成的效果圖：
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", //設(shè)置地圖樣式
        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; //關(guān)閉窗體
                });
                that.window = that.windows[index];
                that.$nextTick(() => {
                  that.window.visible = true;//點(diǎn)擊點(diǎn)坐標(biāo)，出現(xiàn)信息窗體
                });
              }
            }
          })
          windows.push({
            position: [item.lng,item.lat],
            content:"<div>"+item.text+"</div>",//內(nèi)容
            offset:[5,-15],//窗體偏移
            visible: false//初始是否顯示
          })
        })
        //  加點(diǎn)
        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、區(qū)域覆蓋
<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", //設(shè)置地圖樣式
        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})
        //添加區(qū)域覆蓋物
        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>

效果圖如下


好了，這些就是關(guān)于vue-amap的基礎(chǔ)使用了，感謝大家的閱讀，歡迎大家在評論區(qū)提出建議一起討論，更多功能可移步https://elemefe.github.io/vue-amap/#/zh-cn/introduction/install

最后編輯于 ：
?著作權(quán)歸作者所有,轉(zhuǎn)載或內(nèi)容合作請聯(lián)系作者
【社區(qū)內(nèi)容提示】社區(qū)部分內(nèi)容疑似由AI輔助生成，瀏覽時(shí)請結(jié)合常識(shí)與多方信息審慎甄別。
平臺(tái)聲明：文章內(nèi)容（如有圖片或視頻亦包括在內(nèi)）由作者上傳并發(fā)布，文章內(nèi)容僅代表作者本人觀點(diǎn)，簡書系信息發(fā)布平臺(tái)，僅提供信息存儲(chǔ)服務(wù)。

友情鏈接更多精彩內(nèi)容