vue3中调用高德地图开放api2.0

迷茫的Queteen

已于 2023-11-12 21:42:19 修改

阅读量284

点赞数 1

分类专栏：高德地图api的学习文章标签： js arcgis

于 2023-11-12 21:39:58 首次发布

本文链接：https://blog.csdn.net/weixin_54937289/article/details/134366150

版权

高德地图api的学习专栏收录该内容

5 篇文章 0 订阅

订阅专栏

写在前面

好久没有来CSDN了

今天想记录一下困扰我半天的高德地图api底图加载问题
高德底图api的调用在官网写得非常清楚，大家可以仔细阅读官网。欢迎大家互相交流，后面应该会继续更新对于高德底图api学习遇到的坑。
准备-地图 JS API 2.0 | 高德地图API (amap.com)

高德地图api2.0调用思路

申请调用高德地图api，成为开发者并申请KEY；
在项目中调用高德地图api。快速上手-地图 JS API 2.0|高德地图API (amap.com)

HTML页面中调用高德地图api

过程

HTML页面构建，记得添加如下meta

<meta name="viewport" content="initial-scale=1.0, user-scalable=no">

添加地图对象container并添加样式，注意用**id选择器**而不是用类选择器

  <div id="container"></div>
  <style>
      #container {
        width: 100%;
        height: 700px;
      }
  </style>

加载高德地图api，注意在2021年12月02日以后申请的key需要配合您的安全密钥一起使用。

<script type="text/javascript">
      window._AMapSecurityConfig = {
        securityJsCode: "您的密钥",
      };
    </script>
    <script
      type="text/javascript"
      src="https://webapi.amap.com/maps?v=2.0&key=您的KEY"
    ></script>
    <script type="text/javascript">
      // 地图初始化应该在地图容器div已经添加到DOM树之后
      var map = new AMap.Map("container", {
        zoom: 12,
      });
    </script>

完整代码如下

加上自身的密钥和KEY可运行

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
    <style>
      #container {
        width: 100%;
        height: 700px;
      }
    </style>
  </head>
  <body>
    <div id="container"></div>
    <script type="text/javascript">
      window._AMapSecurityConfig = {
        securityJsCode: "您的密钥",
      };
    </script>
    <script
      type="text/javascript"
      src="https://webapi.amap.com/maps?v=2.0&key=您的KEY"
    ></script>
    <script type="text/javascript">
      // 地图初始化应该在地图容器div已经添加到DOM树之后
      var map = new AMap.Map("container", {
        zoom: 12,
      });
    </script>
  </body>
</html>

vue3项目中调用高德地图api

一般思路

1. 安装高德地图api插件

2. 引入高德地图api插件

3. 创建地图容器div和设置样式，并加载api。

过程

JS API 结合 Vue 使用-基础-进阶教程-地图 JS API 2.0|高德地图API (amap.com)

用NPM安装@amap/amap-jsapi-loader
```
npm i @amap/amap-jsapi-loader --save
```

引入@amap/amap-jsapi-loader

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

创建地图容器div和设置样式

<template>
	<div id="container"></div>
</template>
<style scoped>
#container {
	width: 100%;
	height: 600px;
}
</style>

加载高德地图api

<script setup>
import AMapLoader from '@amap/amap-jsapi-loader'
import { onMounted, onUnmounted } from 'vue'

let map = null
window._AMapSecurityConfig = {
	securityJsCode: 'bf9f0b1b5a979b83d96b4d1e11e2f0d9',
}
onMounted(() => {
	AMapLoader.load({
		key: '69f3fe52a0d75073953c1886e659f8a1',
		version: '2.0',
		plugins: [],
	})
		.then((AMap) => {
			map = new AMap.Map('container', {
				viewMode: '3D',
				zoom: 8,
				center: [116.397428, 39.90923],
			})
		})
		.catch((e) => {
			console.log(e)
		})
})
onUnmounted(() => {
	map?.destory()
})
</script>

完整代码如下

<template>
	<div id="container">kkkk</div>
</template>

<script setup>
import AMapLoader from '@amap/amap-jsapi-loader'
import { onMounted, onUnmounted } from 'vue'

let map = null
//  window._AMapSecurityConfig = {
// 	securityJsCode: 'bf9f0b1b5a979b83d96b4d1e11e2f0d9',
// }
onMounted(() => {
	AMapLoader.load({
		key: '您的KEY',
		version: '2.0',
		plugins: [],
	})
		.then((AMap) => {
			map = new AMap.Map('container', {
				viewMode: '3D',
				zoom: 8,
				center: [116.397428, 39.90923],
			})
		})
		.catch((e) => {
			console.log(e)
		})
})
onUnmounted(() => {
	map?.destory()
})
</script>

<style scoped>
#container {
	width: 100%;
	height: 600px;
}
</style>

效果如下

只是加载高德底图

总结

官网上显示必须配置安全密钥才可以使用，但在实际过程中不添加安全密钥，只使用key也可以正常加载。
刚开始只能加载高德logo，而不能加载页面，后面发现是页面中心的精度不够，只写了小数点后一位，后面调试完就可以正常加载。
使用vue cli脚手架加安全密钥的配置不会报错，若用vue+vite加载的会报错，还不懂什么原因。

迷茫的Queteen

关注

1
点赞
踩
0

收藏

觉得还不错? 一键收藏
3
评论
vue3中调用高德地图开放api2.0

官网上显示必须配置安全密钥才可以使用，但在实际过程中不添加安全密钥，只使用key也可以正常加载。刚开始只能加载高德logo，而不能加载页面，后面发现是页面中心的精度不够，只写了小数点后一位，后面调试完就可以正常加载。使用vue cli脚手架加安全密钥的配置不会报错，若用vue+vite加载的会报错，还不懂什么原因。
复制链接

扫一扫