HTML 文件中引入高德地图

＊且听风吟

已于 2023-03-30 18:22:35 修改

阅读量1w

点赞数 4

CC 4.0 BY-SA版权

分类专栏： # html 文章标签：前端

于 2019-06-24 10:03:08 首次发布

本文链接：https://blog.csdn.net/HH18700418030/article/details/93461872

html 专栏收录该内容

20 篇文章

订阅专栏

本文介绍了在Web端实现高德地图页面的步骤。准备工作包括在高德开放平台注册开发者账号、创建新应用并添加Web端 ( JSAPI ) 的Key。页面实现则需创建地图容器div、设置其宽高、引入高德地图js并填写Key值，最后异步初始化插件。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

准备工作：

1、在高德开放平台，注册开发者账号；

2、登陆之后，进入“应用管理”，点击“我的应用”，选择右上角“创建新应用”；

3、为应用添加 Key，在“服务平台”一项选择“Web 端 ( JSAPI ) ”。

页面实现：

1、创建一个div，作为地图的容器；

2、设置div的宽和高；

3、引入高德地图的js，并且在对应的位置填写刚才在准备工作中申请的key值；

<!doctype html>
<html lang="en">
 <head>
  <meta charset="UTF-8">  
  <title>地图Demo</title>
  <link rel="stylesheet" type="text/css" href="./map.css"/>
 </head>
 <body>
	<div id="wrapper"></div>
	<script type="text/javascript" src="https://webapi.amap.com/maps?v=1.4.8&key=申请的key值"></script> 
	<script src="./map.js"></script>
 </body>
</html>

#wrapper{
	width:1000px;
	height:800px;
}

4、异步初始化高德地图插件。

window.onload = function(){
	var map = new  AMap.Map('wrapper',{
		resizeEnable: true, //是否监控地图容器尺寸变化
		zoom: 10  //指定缩放级别
	});
}

大功告成啦，下面是效果图：
在这里插入图片描述