HTML文件怎么引入高德地图

2023-11-13

1.首先,注册高德地图开发者,这个直接在官网上注册,输入必要信息就行,如下:
在这里插入图片描述
2.注册完成后,进入个人中心,依次点击“应用管理”->“我的应用”->“创建新应用”,如下,这里输入应用名称,选择类型就行:

在这里插入图片描述
3 接着就需要为应用添加key值,点击右上角的+号,就会弹出添加窗口,这里我们选择“Web端(JS API)”,如下:
在这里插入图片描述
4 添加key值成功后,就会在应用列表中看到刚才添加的key值,如下,后面的代码中需要用到这个key值:
在这里插入图片描述
5.最后就是编写代码,在html页面中引入3D地图了,如下,代码很简单,主要是创建div容器,然后通过JS引入地图到这个容器中,这里需要JS API版本在1.4.0以上,指定地图模式为3D,key值替换成自己应用的key值:

<!doctype html>
<html>

<head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="initial-scale=1.0, user-scalable=no, width=device-width">
    <link rel="stylesheet" href="https://a.amap.com/jsapi_demos/static/demo-center/css/demo-center.css" />
    <style>
        html,
        body,
        #container {
            width: 100%;
            height: 100%;
        }
    </style>
    <title>地图加载完成</title>
</head>
<body>
<div id="container"></div>
<script src="https://webapi.amap.com/maps?v=1.4.13&key=你的key值"></script>
<script src="https://a.amap.com/jsapi_demos/static/demo-center/js/demoutils.js"></script>
<script>
    var map = map = new AMap.Map('container', {
        resizeEnable: true,
        viewMode:'3D'
    });
    map.on("complete", function(){
        log.success("地图加载完成!");
    });
</script>
</body>

</html>

6 浏览效果如图:
在这里插入图片描述

本文内容由网友自发贡献,版权归原作者所有,本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容,请联系:hwhale#tublm.com(使用前将#替换为@)

HTML文件怎么引入高德地图 的相关文章

  • webpack之加载json数据格式

    webpack之加载json数据格式 webpack中可以加载的有用资源还有数据 如 json 文件 csv tsv xml 如果需要导入这些格式的数据 第一种方法是 我们需要两个 loader 去加载这些格式的数据 第二种方法是 我们可以

随机推荐

  • dronekit-sitl+MAVproxy+MissionPlanner进行无人机仿真

    以下教程为通过dronekit sitl MAVproxy和MissionPlanner进行无人机仿真 其中dronekit sitl用于模拟无人机 MAVproxy用于将无人机的数据转发到其他端口 MissionPlanner用于无人机的
  • css 背景图旋转 只让背景图片旋转180度的实现示例

    最近进行二次开发的时候有个图片用背景图要旋转一定角度 下图中如果只给 question添加背景通过CSS3的transfrom rotate肯定是会影响文字的展示 所以把背景图放到伪类中进行旋转就可以完美解决这个问题了 话不多说 上代码 d
  • Shell命令行下如何查找并替换多个文件中的字符

    如果你在shell命令行下 需要一种能快速查找并替换多个文件里字符的方法 那么下面这行命令你一定要记住或者收藏起来 它能帮到你的 find name html print0 xargs 0 perl pi e s SEARCHSTRING
  • 大数据技术——连接数据库报错:Cased by:javax.net.ssl.SSLHandshakeException:No appropriate protocol (protocol is dis

    问题 连接数据库报错 Cased by javax net ssl SSLHandshakeException No appropriate protocol protocol is disabled or cipher suites ar
  • css浮动改变鼠标箭头样式

    默认箭头样式 cursor default 系统默认箭头样式 手型 cursor pointer 手型 手型 cursor hand 手型 移动十字箭头 cursor move 移动十字箭头 帮助问号 cursor help 系统自带帮助问
  • 在openwrt上安装和配置git、ssh和python3

    简单记录在openwrt上安装配置git ssh和python3的流程 更新包管理器 openwrt 自带的包管理器是opkg 安装之前先更新一下 opkg update git和ssh一般放在一起配置 ssh配置完成才可以正常使用git
  • STM32的学习记录--2.WiFi模块的使用

    本次学习用的单片机是STM32F103C8T6 本次学习用的WiFi模块是ESP8266 本博客仅用于课余学习 不可商用 如有侵权 请告知我删除博客 谢谢配合 以下学习资料均在云盘 仅供学习交流 禁止用于商业用途 本文链接 个人博客 htt
  • 计算机视觉—— 相机标定

    目录 简介 一 相机模型 1 坐标系 2 坐标系变化 3 相机畸变模型 二 相机标定原理 三 张正友黑白棋盘格标定 2 1 算法思想 2 2 求解内参和外参的积 2 3 求解内参矩阵 2 4 求解外参矩阵 2 5 得到相机畸变矫正参数 2
  • 一文搞定Windows11+WSL+Pycharm开发环境及避坑

    WSL Pycharm开发环境搭建以及常见问题处理 Windows11 零 环境及背景 0 1 为什么需要这样的开发环境 0 2 什么是WSL 0 3 搭建环境 壹 Windows11 搭建WSL 1 1 启动 WSL 1 2 启动虚拟机平
  • Kibana忘记初始密码怎么办?

    在你elasticsearch的安装目录bin目录下面执行 bin gt elasticsearch reset password u elastic 执行结束之后就是下面初始化新的密码 注意 首次登录Kibana的登录名 elastic
  • Oracle数据库中神奇的dual表

    DUAL是oracle中非常神奇的一张表 有好多人用了很久oracle都不知道dual是干什么的 因为不是自己设计的表 一般处理的SQL也用不到 这里简单说下DUAL的用法 知道之后很多情况下DUAL查询还是很方便的 一 DUAL简介 1
  • Matlab:读取和处理大数据表格文本文件

    Matlab 读取和处理大数据表格文本文件 在实际的数据分析应用中 往往需要处理海量数据 针对大型数据文件 Matlab提供了快速高效的读取和处理工具 可以便捷地完成数据处理任务 本文将介绍如何使用Matlab读取和处理大型表格文本文件 第
  • c#控制台Console类

    c 控制台Console类 console表示控制台 是一个类 它封装了控制台的一些基本操作 输出 Console Write 输出一个或多个值后不换行 其后没有新行符 可以接着前面的字符继续写入 Console WriteLine 输出一
  • 炸弹人小游戏代码开源(python)

    作者 小刘在C站 个人主页 小刘主页 每天分享云计算网络运维课堂笔记 努力不一定有回报 但一定会有收获加油 一起努力 共赴美好人生 夕阳下 是最美的绽放 当遵从一心 踏浪而往 纵千山万水 也要抵达 目录 一 什么是python 二 游戏代码
  • 学python心得体会800字-python心得体会

    广告关闭 腾讯云双11爆品提前享 精选热门产品助力上云 云服务器首年88元起 买的越多返的越多 最高满返5000元 前些日子用python基于prometheus开发了一个vsphere volume卷监控的exporter 于是跟vsph
  • Swift入门篇-闭包和函数

    今天主要是给大家分享的是 swift中闭包的用法 我个人觉得闭包就是函数的简写方法 如果您函数不是很熟悉请查阅 swift入门篇 函数 1 函数类型 函数类型 var 变量 类型 gt 返回值 函数名 说明 1 函数名 表示函数地址 2 类
  • Mysql Workbench的下载和简单使用

    一 下载和安装 1 1网站 http dev mysql com downloads workbench 1 2 点击下载按钮 一直下一步下一步就可以安装成功 二 了解简单使用 2 1安装后 打开首页入下 2 2 连接数据库 点击MySQL
  • crm2013sql服务器安装Microsoft Dynamics CRM Reporting Extensions遇到问题

    前提 我需要创建一个新的组织 但是告诉我未在为组织指定的 Microsoft SQL Server Reporting Services 实例上安装 Microsoft Dynamics CRM Reporting Extensions 然
  • 算法程序设计实验报告

    多种方法解决算法问题 题目一 方法一 快速排序 方法二 直接插入排序 方法三 选择法排序 方法四 冒泡排序 题目二 方法一 冒泡排序 方法二 堆排序 方法三 分治策略 方法四 二路归并排序 题目三 方法一 穷举法 方法二 动态规划 方法三
  • HTML文件怎么引入高德地图

    1 首先 注册高德地图开发者 这个直接在官网上注册 输入必要信息就行 如下 2 注册完成后 进入个人中心 依次点击 应用管理 gt 我的应用 gt 创建新应用 如下 这里输入应用名称 选择类型就行 3 接着就需要为应用添加key值 点击右上