VUE----使用高德地图

我使用的是vue-cli2

1.下载插件:

npm install vue-amap --save

2.注册高德key：

传送门：https://console.amap.com/dev/key/app

注册截图

3.main.js中初始化：

import VueAMap  from 'vue-amap';
Vue.use(VueAMap);
VueAMap.initAMapApiLoader({
  key: 'your_gaode_key',
  plugin: ['AMap.Autocomplete', 'AMap.PlaceSearch', 'AMap.Scale', 'AMap.OverView', 'AMap.ToolBar', 'AMap.MapType', 'AMap.PolyEditor', 'AMap.CircleEditor','AMap.Geolocation'],
  v: '1.4.4'
});

4.组件示例代码：

<template>
    <div>
        <el-card class="box-card">
          <div slot="header" class="clearfix">
            <span>这是地图组件</span>
          </div>
          <div class="text item">
            1.在main.js中初始化高德组件
          </div>
          <div class="text item">
            2.模板中设置地图容器
          </div>
          <div class="text item">
            3.data中定义plugin
          </div>
          <div class="text item">
             4.当前位置：({{lat}},{{lng}})
          </div>
        </el-card>
        <el-card class="ditu-container" body-style="padding:0px">
            <div class="amap-wrapper">
          <el-amap class="amap-box" vid="amapDemo" :plugin="plugin" :zoom="zoom"  :center="center"></el-amap>
        </div>
        </el-card>
    </div>
</template>

<script>
    export default {
        name:'Ditu',
        data(){
            let self = this;
            return {
                zoom:15,
        loaded: false,
        center: [121.59996, 31.197646],
        lng: 0,
        lat: 0,
        plugin: [
        //地图类型..
        {
            pName: 'MapType',
            defaultType: 0,
            events: {
              init(instance) {}
            }
          },
          //小地图导航..
          {
            pName: 'OverView',
            isOpen:true,
            visible:false,
            events: {
              init(instance) {}
            }
          },
          //缩放比例尺..
          {
            pName: 'Scale',
            visible:false,
            events: {
              init(instance) {}
            }
          },
          //地图工具条..
          {
            pName: 'ToolBar',
            visible:false,
            position:'LB',                      //LT:左上角; RT:右上角; LB:左下角; RB:右下角; 默认位置：LT
            ruler:true,                         //标尺键盘是否可见
            locate:true,                        //是否显示定位按钮
            direction:true,                     //方向键盘是否可见
            liteStyle:false,                    //是否使用精简模式
            autoPosition:false,                 //是否自动定位，即地图初始化加载完成后，是否自动定位的用户所在地
            events: {
              init(instance) {}
            }
          },
          //定位按钮..
          {
            enableHighAccuracy: true,   //是否使用高精度定位，默认:true
            timeout: 10,                //超过10秒后停止定位，默认：无穷大
            maximumAge: 0,              //定位结果缓存0毫秒，默认：0
            convert: true,              //自动偏移坐标，偏移后的坐标为高德坐标，默认：true
            showButton: true,           //显示定位按钮，默认：true
            buttonPosition: 'RB',       //定位按钮停靠位置，默认：'LB'，左下角
            showMarker: true,           //定位成功后在定位到的位置显示点标记，默认：true
            showCircle: true,           //定位成功后用圆圈表示定位精度范围，默认：true
            panToLocation: true,        //定位成功后将定位到的位置作为地图中心点，默认：true
            zoomToAccuracy:true,        //定位成功后调整地图视野范围使定位位置及精度范围视野内可见，默认：f
            extensions:'all',
            pName: 'Geolocation',
            events: {
              init(o) {
                o.getCurrentPosition((status, result) => {
                  if (result && result.position) {
                    self.lng = result.position.lng;
                    self.lat = result.position.lat;
                    self.center = [self.lng, self.lat];
                    self.loaded = true;
                    self.$nextTick();
                  }
                });
              }
            }
          }
        ]
            }
        },
        created(){
            
        }
    }
</script> 

<style scoped>
  .ditu-container{
    width:500px;
    height:500px;
    margin:20px auto;
  }
  .amap-wrapper {
    width: 500px;
    height: 500px;
  }
  .text {
    font-size: 14px;
  }
  .item {
    margin-bottom: 18px;
  }
  .clearfix:before,
  .clearfix:after {
    display: table;
    content: "";
  }
  .clearfix:after {
    clear: both
  }
  .box-card {
    width: 95%;
    margin-left:2.5%;
    margin-top:20px;
  }
</style>

5.示例样式：

示例截图

6.插件使用报错：

报错截图
当我们在plugin中使用插件有时会报错如上错误，这是因为在初始化的时候没有加载相应组件，需要在main.js中加入正在使用的组件

VueAMap.initAMapApiLoader({
  key: 'your_gaode_key',
  plugin: ['AMap.Autocomplete', 'AMap.PlaceSearch', 'AMap.Scale', 'AMap.OverView', 'AMap.ToolBar', 'AMap.MapType', 'AMap.PolyEditor', 'AMap.CircleEditor','AMap.Geolocation'],
  v: '1.4.4'
});