【高德地图API】快速入门第一天

最新推荐文章于 2024-06-27 21:53:00 发布

三见世

最新推荐文章于 2024-06-27 21:53:00 发布

阅读量674

点赞数 14

文章标签：前端 javascript 开发语言

本文链接：https://blog.csdn.net/qq_32258683/article/details/136724402

版权

本文详细介绍了如何在网页上使用高德地图API2.0创建地图，包括资源引入、地图容器创建、样式设置以及遇到的常见问题，如控制台报错的处理。

摘要由CSDN通过智能技术生成

官方文档参考

高德地图 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%;
      }

实现效果:

问题：即使能显示出地图, 但是控制台依然会报错

三见世

关注

14
点赞
踩
12

收藏

觉得还不错? 一键收藏
0
评论
【高德地图API】快速入门第一天

问题：即使能显示出地图, 但是控制台依然会报错。（1）引入资源——引入高德地图API。
复制链接

扫一扫