官方文档参考
高德地图 API :高德开放平台 | 高德地图API
使用指南:展示地图-入门教程-地图 JS API 2.0 | 高德地图API
示例:地图的创建-生命周期-示例中心-JS API 2.0 示例 | 高德地图API
使用过程
(1) 引入资源——引入高德地图API
<head>标签内
<script type="text/javascript">
window._AMapSecurityConfig = {
securityJsCode: "密匙",
};
</script>
<script src="https://webapi.amap.com/loader.js"></script>
<script type="text/javascript">
AMapLoader.load({
key: "key", //申请好的Web端开发者 Key,调用 load 时必填
version: "2.0", //指定要加载的 JS API 的版本,缺省时默认为 1.4.15
})
.then((AMap) => {
const map = new AMap.Map("container");
})
.catch((e) => {
console.error(e); //加载错误提示
});
</script>
(2)创建地图容器
<body>标签内
<div id="container"></div>
(3)加载地图
<body>标签内
var map = new AMap.Map('container')
(4)设置地图样式
<head>标签内
<style>
html,
body,
#container {
/* emmet:w100%+h100% */
width: 100%;
height: 100%;
}
实现效果:
问题:即使能显示出地图, 但是控制台依然会报错