vue中引入高德地图

觉醒的程序猿

已于 2022-12-15 15:15:31 修改

阅读量1.1k

点赞数

文章标签： vue.js javascript ecmascript

于 2022-10-11 15:05:26 首次发布

本文链接：https://blog.csdn.net/qq_42740298/article/details/127262656

版权

1，首先得有个高德开服平台的账号，并申请到key,

高德开服平台地址：高德开服平台
在这里插入图片描述

2、步骤二：安装高德地图加载器

npm i @amap/amap-jsapi-loader --save

3.自定义地图组件，并初始化地图

<template>
  <div class="login-container">
    <div id="container"></div>
  </div>
</template>
<script>
// 引入地图加载器
import AMapLoader from "@amap/amap-jsapi-loader";
// 设置安全密钥
window._AMapSecurityConfig = {
    securityJsCode: '安全密钥',
}
export default {
  name: "map",
  data() {
    return {};
  },
  created() {
    // 地图初始化
    AMapLoader.load({