【vue-引入高德地图-已完结】

👀来自https://blog.csdn.net/XU441520/article/details/103778251

1. 第一步：
   打开高德地图开发者平台：https://lbs.amap.com/product/map#/

2. 第二步：
   登录->应用管理->我的应用->创建新应用->添加->获取key

3. 第三步：
   https://lbs.amap.com/api/javascript-api/guide/abc/quickstart根据js-api配置各种属性
   

4. 第三部：
   在项目中的html里添加

		<script src="https://unpkg.com/vue-amap/dist/index.js"></script>

5. 第四部：写入

 <div class="amap-page-container">
              <el-amap ref="map" vid="amapDemo" :amap-manager="amapManager" :center="center" :zoom="zoom" :plugin="plugin" :events="events" class="amap-demo">
                <el-amap-marker>
                    <div class="userMarker">
                        <!-- 根据需求添加dom -->
                        <img src="https://webapi.amap.com/theme/v1.3/markers/n/mark_b.png"/>
                        <span></span>
                    </div>
                </el-amap-marker>
              </el-amap>
          </div>

 .amap-demo {
  height: 300px;
}
.amap-page-container{
  width: 100%;
  height: 100%;
}
.userMarker{
  position: relative;
  span{
    position: absolute;
    border: 1px solid blue;
    background-color: white;
    white-space: nowrap;
    cursor: default;
    padding: 3px;
    font-size: 12px;
    line-height: 14px;
    top: 18px;
    left: 14px;
  }
}

 import VueAMap from 'vue-amap';
    import Vue from 'vue'
    Vue.use(VueAMap);
    // 初始化高德地图的 key 和插件
    VueAMap.initAMapApiLoader({
    key: 'k值',
    plugin: ['AMap.Autocomplete', 'AMap.PlaceSearch', 'AMap.Scale', 'AMap.OverView', 'AMap.ToolBar', 'AMap.MapType', 'AMap.PolyEditor', 'AMap.CircleEditor'],
    v: '1.4.4'
    });
    let amapManager = new VueAMap.AMapManager();
    export default {
    data() {
        return {
            amapManager,
          zoom: 12,
          center: [121.59996, 31.197646],
          events: {
            init: (o) => {
              console.log(o.getCenter())
              console.log(this.$refs.map.$$getInstance())
              o.getCity(result => {
                console.log(result)
              })
            },
            'moveend': () => {
            },
            'zoomchange': () => {
            },
            'click': (e) => {
              alert('map clicked');
            }
          },
          plugin: ['ToolBar', {
            pName: 'MapType',
            defaultType: 0,
            events: {
              init(o) {
             	 o.j.K.hidden = true//隐藏卫星和路况
                console.log(o);
              }
            }
          }]
        };
    },
    methods: {
        getMap() {
          // amap vue component
          console.log(amapManager._componentMap);
          // gaode map instance
          console.log(amapManager._map);
        },
   }