这里以调用高德地图和百度地图为例高德地图api,简单介绍一下前端网页中如何调用第三方地图API,主要内容如下:

调用高德地图API1.首先高德地图api,需要注册高德地图开发者,这个是使用API的前提,只有正常登陆,创建应用,生成专属的Key值,才能正常调用地图,注册的话,直接到官网上注册就行,需要输入以下信息,按照提示一步一步往下走就行,如下:

如何在前端网页中调用第三方地图API,实现网页中显示地图信息? 地图采集 高德地图api 第1张

2.注册成功后高德地图api,登陆平台,点击右上角的“控制台”,进入用户管理界面,依次点击“应用管理”-“我的应用”,就会跳转到应用管理界面,点击右上角的“创建应用”,弹出对话框,输入应用名称和类型,如下:

如何在前端网页中调用第三方地图API,实现网页中显示地图信息? 地图采集 高德地图api 第2张

3.创建成功后高德地图api,在当前的应该管理页面就可以看到刚才创建的应用,接着就是为应用添加key值,这个直接点击应用右边的“+”号就行,如下,我们是网页中引入,所以选择“Web端(JS API)”,通过JS引入前端网页:

如何在前端网页中调用第三方地图API,实现网页中显示地图信息? 地图采集 高德地图api 第3张

key值添加成功后高德地图api,就会在当前应用下列出来,如下,这里需要记住这个字符串,后面的代码中要用到:

如何在前端网页中调用第三方地图API,实现网页中显示地图信息? 地图采集 高德地图api 第4张

4.更后就是编写前端测试代码了高德地图api,基本思路先创建一个div容器,然后通过JS API引入地图到这个容器中就行,如下,非常简单,key参数传入上面的字符串就行:

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

如何在前端网页中调用第三方地图API,实现网页中显示地图信息? 地图采集 高德地图api 第5张

调用百度地图api1.首先高德地图api,也是注册百度地图开发者,这个直接到官网上注册就行,或者直接使用百度账号登陆,点击右上角的“控制台”,进入用户界面,接着点击“创建应用”按钮,弹出如下界面,输入应用名称,因为是前端网页引入,所以这里我们选择“浏览器端”:

如何在前端网页中调用第三方地图API,实现网页中显示地图信息? 地图采集 高德地图api 第6张

2.应用创建成功后高德地图api,就会为当前的应用生成一个AK值,后面的代码中就是通过这个值引入百度地图,如下,需要记住这个字符串:

如何在前端网页中调用第三方地图API,实现网页中显示地图信息? 地图采集 高德地图api 第7张

3.更后就是编写前端测试代码了高德地图api,如下,基本步骤和高德地图差不多,先创建一个div容器,然后通过JS API引入地图到这个容器,更后就可以正常显示,这里替换成自己应用的AK值:

如何在前端网页中调用第三方地图API,实现网页中显示地图信息? 地图采集 高德地图api 第8张

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

如何在前端网页中调用第三方地图API,实现网页中显示地图信息? 地图采集 高德地图api 第9张

至此,我们就完成了在前端网页中调用高德地图API和百度地图API高德地图api。总的来说,整个过程非常简单,步骤也很清晰,只要你熟悉一下上面的过程,很快就能掌握的,官网也给出了非常详细的开发文档,非常适合初学者学习,还可以在线编辑查看效果,感兴趣的话,可以搜一下,希望以上分享的内容能对你有所帮助吧,也欢迎大家评论、留言。

微信号:565859400
添加上方技术, 在线咨询
复制微信号
分享到: