快速上手 |
您所在的位置：网站首页 › 高德地图是用的谁的卫星 › 快速上手 |
|
本文介绍如何创建 key 和开发一个简单的地图应用。 第一个地图示例亲手试一试 下载完整代码 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%; } 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) => { const map = new AMap.Map("container"); }) .catch((e) => { console.error(e); //加载错误提示 });本示例使用 JS API Loader 进行加载，查看更多 api 加载方式。 提示为了避免你在开发中遇到有关 key 的报错，请务必正确的使用 key 和安全密钥，详见 准备 教程。 41.4 为地图点标记 MarkerJS API 提供了在地图之上绘制覆盖物的能力，现在我们使用add()方法添加一个默认的点标记Marker。 const marker = new AMap.Marker({ position: [116.39, 39.9], //位置 }); map.add(marker); //添加到地图代码需添加到.then((AMap)=>{})中，即：AMap 对象可以取到后执行，同理后边步骤的代码都有此要求。 查看更多点标记 Marker 类型及方法 51.5 为点标记 Marker 添加事件，并唤起信息窗体 InfoWindowJS API 提供的 Map、点标记、矢量图形的实例均支持事件，鼠标或者触摸操作均会触发相应的事件。我们通过给点标记绑定click事件，通过添加信息窗体InfoWindow来处理click的回调事件。 const infoWindow = new AMap.InfoWindow({ //创建信息窗体 isCustom: true, //使用自定义窗体 content: "HELLO,AMAP!", //信息窗体的内容可以是任意html片段 offset: new AMap.Pixel(16, -45), }); const onMarkerClick = function (e) { infoWindow.open(map, e.target.getPosition()); //打开信息窗体 //e.target就是被点击的Marker }; const marker = new AMap.Marker({ position: [116.481181, 39.989792], }); map.add(marker); marker.on("click", onMarkerClick); //绑定click事件查看更多信息窗体 InfoWindow 信息配置 如：窗口打开及关闭等。 61.6 为地图添加折线 Polyline像点标记一样，通过add()方法向地图添加折线Polyline。 const lineArr = [ [116.368904, 39.913423], [116.382122, 39.901176], [116.387271, 39.912501], [116.398258, 39.904600] ]; const polyline = new AMap.Polyline({ path: lineArr, //设置线覆盖物路径 strokeColor: "#3366FF", //线颜色 strokeWeight: 5, //线宽 strokeStyle: "solid", //线样式 }); map.add(polyline);查看更多折线Polyline介绍 2、线上尝试JS API高德 JS API 2.0 提供了丰富的功能和应用场景，开发人员可以根据自己的需求，灵活运用这些功能来创建各种类型的地图应用。 想要快速体验 JS API，你可以直接访问示例中心 Demo。如果你只想快速生成一个可使用的地图代码，你可以使用地图快速生成器。3、本章涉及的属性及方法说明3.1 AMap.Marker参数/方法 说明 类型 默认值 position 点标记的位置信息 Array - offset 相对于基点的偏移位置 Array [0,0] 查看所有 AMap.Marker 属性和方法 3.2 AMap.InfoWindow参数/方法 说明 类型 默认值 position 信息窗体的位置信息 Array - isCustom 使用自定义窗体 Boolean false content 信息窗体的内容可以是任意 html 片段 String - offset 相对于基点的偏移位置 Array [0,0] 查看所有AMap.InfoWindow 属性和方法 3.3 AMap.Polyline参数/方法 说明 类型 参数值描述 默认值 path 设置线覆盖物路径 Array - - strokeColor 线颜色，使用16进制颜色代码赋值 String 使用16进制颜色代码赋值 #00D3FC strokeWeight 线宽 Number - 2 strokeStyle 线样式 String 实线: solid 虚线: dashed - 查看所有AMap.Polyline属性和方法 |
今日新闻 |
推荐新闻 |
| CopyRight 2018-2019 办公设备维修网 版权所有 豫ICP备15022753号-3 |