###
高德 JSAPI 的使用教程
高德地图的
JavaScript API 提供了一种简单而强大的方法来集成地图功能到 Web 应用程序中。以下是关于如何在 Vue3 + Vite + TypeScript 项目中引入并配置
高德地图的相关指南。
#### 1. 注册开发者账号并获取 Key
为了能够正常使用
高德地图的功能，首先需要注册成为
高德开放平台的开发者，并申请一个专属的应用密钥（Key）。具体操作可以参考官方文档[^1]中的指引完成账户创建以及应用设置流程。
#### 2. 引入
高德地图脚本文件
可以通过 `<script>` 标签直接加载
高德地图的 JS 文件或者利用 npm 包管理工具安装依赖包 `@amap/amap-
jsapi-loader` 来动态加载所需的库资源[^2]：
```
html
<script src="https://web
api.amap.com/maps?v=2.0&key=您的KEY"></script>
```
如果采用模块化构建，则推荐通过 NPM 方式来进行安装和初始化工作：
```bash
npm install @amap/amap-
jsapi-loader --save
```
接着，在代码里这样导入它：
```
javascript
import AMapLoader from '@amap/amap-
jsapi-loader';
AMapLoader.load({
key: '您自己的key', // 由
高德申请得到
version: "2.0", // 指定要加载的版本号，默认最新稳定版
}).then((AMap)=>{
var map = new AMap.Map('container',{
zoom : 10,
center:[116.397428,39.90923]
});
});
```
以上片段展示了基本的地图实例化过程。
#### 3. 添加自定义控件或图层
除了默认显示的基础地图外，还可以根据实际需求添加更多类型的覆盖物比如标
记点、折线、多边形等；也可以启用某些特定的服务例如地理编码/逆地理编码查询地址坐标转换等功能[^3]。
对于更复杂的交互逻辑可能涉及到事件监听器绑定等方面的知识点，这些都可以查阅详细的 [官方帮助手册](http://lbs.amap.com/
api/
javascript-
api/guide/) 获取更多信息支持进一步开发。
---
### 示例代码展示
下面给出一段完整的示例代码用于演示如何在一个
HTML 页面内部嵌入一张带标注的地图视图效果:
```
html
<!DOCTYPE
html>
<
html lang="en">
<head>
<meta charset="UTF-8">
<title>HighDe Map Example</title>
<!-- 加载样式 -->
<style type="text/css">
#map {
width: 100%;
height: 500px;
}
</style>
</head>
<body>
<div id="map"></div>
<!-- 引入
高德地图 js
api -->
<script src="//web
api.amap.com/maps?v=2.0&key=你的key"></script>
<script>
// 初始化地图对象
var map = new AMap.Map('map', {resizeEnable:true});
// 设置中心位置及缩放级别
map.setCenter([116.397428, 39.90923]);
map.setLevel(12);
// 创建一个Marker实例
var marker = new AMap.Marker({
position:new AMap.LngLat(116.397428, 39.90923),
title:'北京'
});
// 将其添加至地图容器内
map.add(marker);
</script>
</body>
</
html>
```
此段落描述了一个最基础的例子，其中包含了必要的组成部分——
HTML结构部分用来呈现UI界面布局设计；
JavaScript则负责处理业务层面的数据请求与渲染控制等工作流环节。
---
扫一扫
1万+
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
