vue-cli3中使用vue-amap(高德地图插件)

最新推荐文章于 2024-08-23 22:01:39 发布

赤简

最新推荐文章于 2024-08-23 22:01:39 发布

阅读量7.4k

点赞数 4

分类专栏：前端开发文章标签： vue.js 前端

本文链接：https://blog.csdn.net/zjingru/article/details/110948556

版权

前端开发专栏收录该内容

17 篇文章 3 订阅

订阅专栏

本文详细介绍了如何通过npm安装并配置Vue-Amap插件，从main.js全局注册到index.vue中使用地图组件，包括API加载、关键插件选择和事件监听。适合初学者学习AMap在Vue项目中的应用。

摘要由CSDN通过智能技术生成

npm安装
可以先看一眼amap的文档熟悉里面的一些插件和api
https://elemefe.github.io/vue-amap/#/zh-cn/introduction/install

//安装命令
npm install vue-amap --save

main.js文件配置

import VueAMap from 'vue-amap'  //引入
Vue.use(VueAMap)				//全局注册
VueAMap.initAMapApiLoader({ 	//初始化
  key: '3aaff3b0ba41ba7ac1ef4932e16991c4',		//高德地图api开放平台申请的key
  //需要用到的插件 用什么放什么 放多余的加载会很慢
  plugin: ['AMap.ToolBar', 'AMap.PlaceSearch', 'AMap.Geolocation', 'AMap.Geocoder'],	 
  v: '1.4.4'	//版本号
})

index.vue文件配置
引入一个简单的地图

<template>
  <div>
    <div class="amap-page-container">
      // 地图组件
      <el-amap
        ref="map"
        //地图的id
        vid="amapDemo"
        :amap-manager="amapManager"
        //地图的中心点
        :center="center"
        //地图的缩放比例
        :zoom="zoom"
        //绑定的插件
        :plugin="plugin"
        //绑定的事件
        :events="events"
        class="amap-demo"
      >
      </el-amap>
    </div>
  </div>
</template>
<script>
// 引入AMapManager 
import { AMapManager } from "vue-amap";
//获取实例
let amapManager = new AMapManager();
export default {
  data() {
    return {
      amapManager,
      zoom: 12,
      center: [120.19, 30.26],
      events: {
        init: (o) => {
          o.getCity((result) => {
            console.log(result);
          });
        },
        click: (e) => {
        	console.log(e)
        },
      },
    };
  },
};
</script>
<style scoped>
.amap-page-container {
  width: 100%;
  height: 400px;
}
</style>