初始化高德地图

1.首先准备vue3+js的项目(当然vue2也可以)

2.在项目中安装高德地图JavaScript API

npm install @amap/amap-jsapi-loader

3.设置地图容器

<div id="map"></div>

4.初始化地图

import { onMounted, ref } from 'vue';
import AMapLoader from '@amap/amap-jsapi-loader';
 
const map = ref(null);
 
onMounted(() => {
  AMapLoader.load({
    key: '你的秘钥', // 高德地图API密钥
    version: '2.0', // 指定API版本
    plugins: ['AMap.Geolocation', 'AMap.PlaceSearch', 'AMap.Scale', 'AMap.OverView', 'AMap.ToolBar', 'AMap.MapType', 'AMap.PolyEditor', 'AMap.CircleEditor'], // 需要使用的插件列表
    AMapUI: {
      version: '1.1',
      plugins: [],
    },
  }).then((AMap) => {
    map.value = new AMap.Map('map', {
      zoom: 11, // 初始缩放级别
      center: [116.397428, 39.90923], // 初始中心点坐标
    });
  }).catch(e => {
    console.log(e);
  });
});

这样初始化的地图出来了

但是在实际项目中，功能多的时候不能都放在一个页面里，还需要继续优化

5.创建一个.js文件

引入 JS API Loader

import AMapLoader from '@amap/amap-jsapi-loader';

初始化方法，key里面放的是你在高德申请的key值

export function initMap(map,center) {
    AMapLoader.load({
        key: 'xxx',
        version: '2.0', // 指定API版本
        plugins: ['AMap.Geolocation', 'AMap.PlaceSearch', 'AMap.Scale', 'AMap.OverView', 'AMap.ToolBar', 'AMap.MapType', 'AMap.PolyEditor', 'AMap.CircleEditor'], // 需要使用的插件列表
        AMapUI: {
            version: '1.1',
            plugins: [],
        },
        }).then((AMap) => {
        map.value = new AMap.Map('map', {
            zoom: 14, // 初始缩放级别
            center: center,
        });
    }).catch(e => {
        console.log(e);
    });
}

如何申请key

官网：lbs.amap.com/

选择右上角控制台

之后选择应用管理---我的应用，选择添加key

就可以进入api官网来查询自己想要的api

网址：lbs.amap.com/api/javascr…

6.创建完js后再vue文件中引入

import { onMounted, ref } from 'vue';
import { initMap } from '../utils/gaodeMap.js';
const map = ref(null);
const center = ref([123.429096,41.796767]);

onMounted(() => {
  initMap(map.value,center.value);
});

---

完整代码

1.gaodeMap.js

import AMapLoader from '@amap/amap-jsapi-loader';
export function initMap(map,center) {
    AMapLoader.load({
        key: 'key',
        version: '2.0', // 指定API版本
        plugins: ['AMap.Geolocation', 'AMap.PlaceSearch', 'AMap.Scale', 'AMap.OverView', 'AMap.ToolBar', 'AMap.MapType', 'AMap.PolyEditor', 'AMap.CircleEditor'], // 需要使用的插件列表
        AMapUI: {
            version: '1.1',
            plugins: [],
        },
        }).then((AMap) => {
        map.value = new AMap.Map('map', {
            zoom: 14, // 初始缩放级别
            center: center,
        });
    }).catch(e => {
        console.log(e);
    });
}

2.HelloWorld.vue

<script setup>
import { onMounted, ref } from 'vue';
import { initMap } from '../utils/gaodeMap.js';
const map = ref(null);
const center = ref([123.429096,41.796767]);

onMounted(() => {
  initMap(map.value,center.value);
});
</script>

<template>
 <div id="map"></div>
</template>

<style scoped>
#map {
  width: 100vw; /* 视口宽度 */
  height: 100vh; /* 视口高度 */
  overflow: hidden; /* 隐藏滚动条 */
  position: fixed; /* 固定定位 */
  top: 0;
  left: 0;
}
</style>

---

🌟 关于我 🌟

你好呀，感谢一直陪伴在这里的你！我是程序媛‘小帅哥’。在这里，我致力于分享前端领域的知识点，希望能为你的工作与生活带来一丝灵感与帮助。

💼 服务承接 💼

如果你也喜欢我的内容，或者正在寻找前端或者后端方面的帮助，那么请不要犹豫，联系我吧！我都愿意倾听你的想法，共同探索更多可能。

欢迎关注微信公众号：自学PS转前端