vue-amap的使用

官網鏈接：https://elemefe.github.io/vue-amap/#/zh-cn/introduction/install

1.安裝：

npm install vue-amap --save

2.引入Vue-amap

import Vue from 'vue';
import VueAMap from 'vue-amap';
import App from './App.vue';

Vue.use(VueAMap);

VueAMap.initAMapApiLoader({
  key: 'your amap 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'
});

new Vue({
  el: '#app',
  render: h => h(App)
})

3.模板中使用

<template>
  <div id="app">
    <h3 class="title">{{ msg }}</h3>
    <div class="amap-wrapper">
      <el-amap class="amap-box" :vid="'amap-vue'"></el-amap>
    </div>
  </div>
</template>

<script>
export default {
  data () {
    return {
      msg: 'vue-amap向你問好！'
    }
  }
}
</script>

<style>
.amap-wrapper {
  width: 500px;
  height: 500px;
}
</style>

 

 

 

 

API：

 /*
            AMap.Marker 點標記
            屬性：
                position:點標記在地圖上的位置，默認地圖中心點
                offset: 點標記顯示位置偏移量。默認Pixel(-10,-34)
                icon:點標記顯示的圖標,有合法的content時icon無效
                content:點標記顯示的內容
                draggable:點標記是否可以拖拽移動，默認false
                cursor:指定鼠標懸停時候的默認鼠標樣式
                raiseOnDrag:設置點標記是否可以開啟點標記離開地圖的效果
                label:{    添加文本標注
                content:'附近的空間付款',   //文本內容
                offset: new AMap.Pixel(-13, -30),  //文本偏移量
                direction：方向
            }
            map.add(marker);
        */
        var marker = new AMap.Marker({
            position: map.getCenter(),
            offset: new AMap.Pixel(-13, -30),
            // 設置是否可以拖拽
            draggable: true,
            cursor: 'move',
            // 設置拖拽效果
            raiseOnDrag: true,
            label:{
                content:'附近的空間付款',   
                offset: new AMap.Pixel(-13, -30),
            }
        })