前端：高德地图快速入门使用

首先要进入高德地图的开发文档

需要做点准备，没有高德地图账号的得先注册，然后申请Key，注册这一步就不讲了，按照提示做就行注册好之后登录，点击上图“添加 Key”点击右侧的“创建新应用”会出现左侧的这个弹窗，根据自己需求填写选择就可以点击右侧加号图标添加Key，根据自己需求填写选择，我是前端，理所当然选了“web端”，然后提交回到开发文档，新建一个页面map.html,把以下的四行代码加到页面

回到开发文档，点击左侧“快速上手”，把下图红框中的js代码加到页面中

接下来就是获取中心点坐标左侧输入我们想定位的地址，右侧会显示对应的坐标把坐标替换原先的坐标就可以了这是浏览器的显示其他的东西就不讲了，这里只讲个入门，下面是我写这个demo的代码

<!DOCTYPE html>
<html lang="en-US"><head><meta charset="UTF-8"><meta name="viewport" content="initial-scale=1.0, user-scalable=no"><script type="text/javascript"src="https://webapi.amap.com/maps?v=1.4.14&key=16d55d5a5ed281dd19018764104b5db7"></script><title>高德地图快速入门</title><style type="text/css">#container {width: 1200px;height: 500px;}/* 去掉高德地图自带图标 */.amap-logo,.amap-copyright{display: none !important;}</style>
</head><body><div id="container"></div><script>var map = new AMap.Map('container', {zoom: 18,//级别，如果想显示得区域更具体可以调高级别center: [114.085947,22.547],//中心点坐标viewMode: '3D'//使用3D视图});//设置图标标记var marker = new AMap.Marker({position: new AMap.LngLat(114.085947,22.547),   // 经纬度对象，也可以是经纬度构成的一维数组[116.39, 39.9]title: '测试地址'});map.add(marker);</script>
</body>
<html>
复制代码

前端：高德地图快速入门使用相关推荐

java实现高德地图app_入门指南-高德地图手机版 | 高德地图API
Android 端如果您需要在浏览器中打开高德地图App,例如在H5页面中跳转到高德地图App,或者在本地App中加载的H5页面跳转到高德地图App,需要使用scheme调用,在H5中的链接中加入高 ...
高德地图API入门-marker标注以及区域色块着色
1.vue高德地图api安装 npm i @amap/amap-jsapi-loader --save 2.地图初始化,加载卫星titlemap initMap(){// window._AMapSe ...
html调用显示高德地图,快速上手-数据可视化 JS API | 高德地图API
接下来我们通过一个简单的例子:『将已有的全国市县位置数据,用圆形标记在地图上』,来快速了解下 Loca 的用法吧. 1. 申请开发者 KEY 使用前,请您先申请开发者 Key,这里您可以和 JS-AP ...
web前端之js快速入门（BOM和DOM）
BOM:browser object module 浏览器对象模型 BOM 主要处理浏览器窗口和框架 . window对象 open.close 打开(关闭)新的页面,窗口 <script t ...
web前端之js快速入门（ECMAscript）
javascript:首先和java没有任何关系,蹭热度.... 静态网页组成:结构(html).样式(css).动作(javascript 简称 js). 详细教程地址:菜鸟教程 - 学的不仅是技术 ...
web前端之css快速入门
css:又称层叠样式表具体英文单词(好吧,我又不是学英文) w3c,中文也称之为万维网.网页地址:http://www.w3school.com.cn/ 里面包最详细的教程,但是前提你愿意花费那么多 ...
html页面调用高德地图,html前端使用高德地图入门教程,并在地图上标记位置-Go语言中文社区...
准备工作注册Key 首先, 登陆之后,在进入「应用管理」页面「创建新应用」为应用添加 Key,「服务平台」一项请选择「 Web 端 ( JSAPI ) 」记住这个Key,等会要用,以后可能也会 ...
html前端使用高德地图入门教程,并在地图上标记位置
准备工作注册Key 首先,注册开发者账号,成为高德开放平台开发者登陆之后,在进入「应用管理」页面「创建新应用」为应用添加 Key,「服务平台」一项请选择「 Web 端 ( JSAPI ) 」 ...
web前端网页设计作业_网页前端设计快速入门技巧
我最近收到部分在校学生的邮件,很多在临近毕业实习这段时间,面临着找工作,表示压力非常大,也不知道如何去选择,大多数都是处于迷茫期,问我怎么办?也有想学前端的,问我怎么才能够快速的入门? 先说我自己吧, ...

前端：高德地图快速入门使用

前端：高德地图快速入门使用相关推荐

最新文章

热门文章