展示地图 | 您所在的位置:网站首页 › 高德地图怎么显示下雨 › 展示地图 |
本文介绍如何使用 JS API 创建一个地图,开发者可以根据需要设置地图样式。 默认地图示例试一试 下载完整代码 1、实现步骤11.1 准备成为开发者并创建 key为了正常调用 API ,请先注册成为高德开放平台开发者,并申请 web 平台(JS API)的 key 和安全密钥,点击 具体操作。 提示你在2021年12月02日以后申请的 key 需要配合你的安全密钥一起使用。 21.2 HTML 页面准备编写 HTML 页面的基本的结构代码,需要一个节点作为地图容器,同时为此指定id属性,本教程中使用 ,id你可以自定义。 HELLO, AMAP! html, body, #container { width: 100%; height: 100%; } 提示如果是移动端开发,请在标签内添加标签并设置name属性为"viewport",以达到最佳的绘制性能。 通过 css 为地图容器指定高度、宽度。 #container { width: 300px; height: 180px; } 31.3 加载 JS API推荐使用 JS API Loader 来加载,引入在控制台申请的 key 和安全密钥。 window._AMapSecurityConfig = { securityJsCode: "「你申请的安全密钥」", }; AMapLoader.load({ key: "「你申请的应用key」", //申请好的Web端开发者key,调用 load 时必填 version: "2.0", //指定要加载的 JS API 的版本,缺省时默认为 1.4.15 }) .then((AMap) => { //JS API 加载完成后获取AMap对象 }) .catch((e) => { console.error(e); //加载错误提示 });为了避免你在开发中遇到有关 key 的问题,请务必正确的使用 key 和安全密钥。 提示本章头部的示例使用的是标签加载的 JS API 脚本。 查看更多 API 加载方式 41.4 地图初始化地图初始化需要设置基本的地图图层,你可以传入地图中心点经纬度(center)和地图初始展示级别(zoom)来展示你想要的区域范围。本例展示北京以天安门为中心的11级地图视野。 const map = new AMap.Map("container", { viewMode: '2D', //默认使用 2D 模式 zoom: 11, //地图级别 center: [116.397428, 39.90923], //地图中心点 });提示viewMode 是地图渲染的模式,'2D':平面模式,'3D':带有俯仰角的 3D 模式。 注意初始化前需要获得AMap对象,创建地图实例的代码写在Loader的.then((AMap)=>{})中或者标签加载后。 51.5 主题样式如果你想更改地图的样式,只需要在上一步创建地图对象的时候传入mapStyle即可设置地图样式。你可以使用官方地图样式,也可以使用 GeoHUB 自定义地图平台 创建自定义样式。 提示官方主题样式 也可以使用 map.setMapStyle('amap://styles/whitesmoke')来动态的设置地图样式。 更多官方主题示例 至此,你已经成功使用 JS API 2.0展示了一个简单的地图。你可以根据自己的需求,进一步探索和使用 JS API 2.0的其他功能,例如:添加图层、添加点标记 等。 2、本章涉及的属性及方法说明2.1 AMap.Map参数/方法 说明 类型 参数值描述 zoom 初始化地图层级,值越大放大比例越大 Number 可以设置为整数或浮点数(一位) center 初始化地图中心点 Array 地图中心点的经纬度 mapStyle 设置地图的显示样式 String 目前支持两种地图样式: 第一种:自定义地图样式,如:amap://styles/d6bf8c1d69cea9f5c696185ad4ac4c86 可前往教程 使用官方地图样式 第二种:官方样式模版,如: amap://styles/normalamap://styles/greyamap://styles/whitesmokeamap://styles/darkamap://styles/lightamap://styles/graffiti等,查看 标准主题示例查看所有AMap.Map属性和方法 |
CopyRight 2018-2019 实验室设备网 版权所有 |