html高德地图api使用教程,高德地图API如何使用?

这篇博客详细介绍了如何注册并使用高德地图API。首先,你需要在高德地图官网注册成为开发者,并创建应用获取Key。接着,在应用管理中添加Key,选择Web端(JSAPI)。然后,在网页中引入地图API,通过创建div容器和JSAPI调用显示地图。此外,还展示了如何引入地铁图。整个过程简单明了,适合前端开发者快速上手。
摘要由CSDN通过智能技术生成

这个很简单,需要先注册一下高德地图开发者,然后创建应用、添加Key,最后通过script标签引入网页,就可以直接使用高德地图API了,下面我简单介绍一下实现过程,主要内容如下:

1.首先,注册高德地图开发者,这个直接到官网上注册就行,按着提示一步一步填写信息,如下:

151482353_1_20190107112417334

2.注册登录成功后,依次点击“个人中心”->“应用管理”->“我的应用”,点击右上角的“创建新应用”,如下,输入应用名称,选择应用类型:

151482353_2_20190107112417428

应用创建成功后,新创建的应用就会出现在应用管理列表中,接着我们点击应用右边的“+”号,为应用添加key值,如下,输入Key名称,因为是网页中引入,所以选择“Web端(JS API)”:

151482353_3_20190107112417521

成功添加key值后,我们需要记住这个key值,后面的代码中需要传入这个key值,才能调用高德地图API,如下:

151482353_4_20190107112417631

3.最后就是在网页中使用API,引入高德地图了,很简单,基本步骤是先创建一个div容器,然后通过JS API引入地图到这个容器中就行,如下:

151482353_5_20190107112417709

用浏览器打开这个html文件,效果如下,已经成功引入高德地图:

151482353_6_20190107112417787

4.这里我们也可以引入地铁图,基本过程和上面差不多,还是需要先创建一个div容器,然后再通过JS API引入地铁图到容器中,主要代码如下:

151482353_7_20190107112417896

用浏览器打开这个文件,效果如下,已经成功引入地铁图:

151482353_8_20190107112417974

至此,我们就完成了高德地图API的使用。总的来说,整个过程很简单,只要你有一定的前端基础,熟悉一下相关操作和步骤,很快就能掌握的,官方也给出了非常详细的开发文档,有详细的步骤和示例,可以在线编辑运行,非常适合初学者学习,可以参考一下,网上也有相关教程和资料,感兴趣的话,可以搜一下,希望以上分享的内容能对你有所帮助吧,也欢迎大家评论、留言。

评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值