vue-amap的引用和使用文档

最新推荐文章于 2024-09-04 18:51:06 发布

素质白嫖怪

最新推荐文章于 2024-09-04 18:51:06 发布

阅读量4.4k

点赞数 6

文章标签： vue.js 前端 javascript

本文链接：https://blog.csdn.net/Working_hard_111/article/details/132081788

版权

本文介绍了如何在Vue项目中注册并使用高德地图API，包括创建账号、安装vue-amap插件、配置key和securityJsCode，以及各个地图组件如marker、circle等的使用方法和属性事件。

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

一、注册高德地图api

高德开放平台 | 高德地图API 注册自己的账号，创建一个应用，保存key和securityJsCode（安全密钥）

二、引用vue-amap

npm install vue-amap --save

三、注册到自己的项目中

import Vue from 'vue'
import VueAMap from 'vue-amap';

Vue.use(VueAMap);
// 初始化vue-amap 开始
VueAMap.initAMapApiLoader({
  key: '这里填写创建应用的key',
    //插件根据自己项目中需要用到的自行添加
  plugin: ['AMap.Scale', 'AMap.OverView', 'AMap.ToolBar', 'AMap.MapType', 'AMap.PlaceSearch', 'AMap.Geolocation', 'AMap.Geocoder', 'AMap.DistrictSearch', 'AMap.Polygon'],
  v: '1.4.4',
  uiVersion: '1.0'
});
window._AMapSecurityConfig = {
  securityJsCode:'这里填写创建应用的安全密钥',
}