vue-amap 使用笔记

Step 1 引用

app.ts

// 引入
import VueAMap from 'vue-amap';
// 全局应用配置初始化
Vue.use(VueAMap);
VueAMap.initAMapApiLoader({
  // 申请到的AMap Key
  key: 'xxxxxx',
  // 用到的组件
  plugin: ['AMap.Scale', 'AMap.OverView', 'AMap.ToolBar', 'AMap.MapType'],
  // 版本
  v: '1.4.4'
});

vue-amap.d.ts

declare module 'vue-amap';
// 重要
declare const AMap: any; 

Step 2 页面

page.vue

<template>
    <!-- 注意，在引入原生SDK时，amap-manager属性非常重要 -->
    <el-amap ref="map" vid="amapDemo" :amap-manager="amapManager" :center="center" :zoom="zoom">
    </el-amap>
</template>

<script lang="ts">
    import { AMapManager } from 'vue-amap';
    export default class AmapDemo extends Vue {
        // amapManger实例（重要，用于兼容原生SDK，注意在el-map对象中要进行绑定）
	private amapManager: any = new AMapManager();
        // 以添加marker为例
        addMarker(): void {
            // 获取地图实例
            const map = this.amapManager.getMap();
            // 创建marker
            const marker = new AMap.Marker({
                position: [lng, lat]
            });
            // 添加至地图中
            // 方式1
            marker.setMap(map);
            // 方式2
            map.add(marker);
        }
    }    
</script>

 

来源：CSDN

作者：FunNyt_Yao

链接：https://blog.csdn.net/funnyt0/article/details/98036554