vue-amap 使用笔记

最新推荐文章于 2024-12-06 15:51:10 发布

Cedric’s Note

最新推荐文章于 2024-12-06 15:51:10 发布

阅读量689

点赞数

CC 4.0 BY-SA版权

分类专栏： JS AMap 文章标签：高德地图API

本文链接：https://blog.youkuaiyun.com/funnyt0/article/details/98036554

JS 同时被 2 个专栏收录

2 篇文章

订阅专栏

AMap

1 篇文章

订阅专栏

本文记录了在Vue项目中使用vue-amap插件集成高德地图的步骤，包括在app.ts和page.vue文件中的具体配置和页面展示。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

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>