首页 > 前端开发 > 正文

web前端开发地图 前端PC端使用地图步骤(高德)

2023-09-02 18:16:03 | 我爱编程网

今天我爱编程网小编为大家带来了web前端开发地图 前端PC端使用地图步骤(高德),希望能帮助到大家,一起来看看吧!

web前端开发地图 前端PC端使用地图步骤(高德)

如何运用高德地图JavaScript API打造个性化Web地图

一、进入高德地图官网,再找到高德地图的开放平台,我是做前端的,所以使用的是javascriptAPI。
地图的功能很多,使用API可以自己定制自己想要的功能。在使用前需要自己申请一个Key,引入API的时候会用到这个key。
二、详细看一下左边的那一列各个里面的内容,看完了基本就知道怎么回事了,它提供的javascriptAPI其实就是一个接口,调用它的相应的接口就可以得到自己需要的数据。至于怎么调用接口,里面都讲的很清楚。

web前端开发地图 前端PC端使用地图步骤(高德)

如何在前端网页中调用第三方地图API,实现网页中显示地图信息?

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

调用高德地图API

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

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

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

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

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

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

调用百度地图API

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

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

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

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

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

web前端开发地图 前端PC端使用地图步骤(高德)

前端PC端使用地图步骤(高德)

使用地图前,需要到对应官网申请key
1.首先, 注册开发者账号 ,成为高德开放平台开发者
2. 登陆之后,在进入「应用管理」 页面「创建新应用」
3. 为应用 添加 Key ,「服务平台」一项请选择「 Web 端 ( JSAPI )」

申请完key之后,这里已后台系统为例,使用地图。
1.在index.html,一般在public 文件夹 下或 根目录

引用相关文件,这里使用了地图工具,有兴趣可以官网可以了解下AMap.Geocode

2.引用完之后,项目基本可以使用了,这里使用组件的方式引入

引用

功能方法 描述
1.该组件可以在地图标记点
2.该组件可以通过选择联想输入的地址,设置标点
3.该组件可以通过标点获得当前地址详细信息和 经纬度

其他方法示例

相关方法
画圆 、显示附近点

以上就是我爱编程网整理的web前端开发地图 前端PC端使用地图步骤(高德)相关内容,想要了解更多信息,敬请查阅我爱编程网。
与“web前端开发地图 前端PC端使用地图步骤(高德)”相关推荐
web前端地图开发 如何运用高德地图JavaScript API打造个性化Web地图
web前端地图开发 如何运用高德地图JavaScript API打造个性化Web地图

如何运用高德地图JavaScriptAPI打造个性化Web地图一、进入高德地图官网,再找到高德地图的开放平台,我是做前端的,所以使用的是javascriptAPI。地图的功能很多,使用API可以自己定制自己想要的功能。在使用前需要自己申请一个Key,引入API的时候会用到这个key。二、详细看一下左边的那一列各个里面的内容,看完了基本就知道怎么回事了,它提供的javascriptAP

2023-09-03 22:21:15
web前端高德导航开发 高德地图api怎么用
web前端高德导航开发 高德地图api怎么用

如何在前端网页中调用第三方地图API,实现网页中显示地图信息?这里以调用高德地图和百度地图为例,简单介绍一下前端网页中如何调用第三方地图API,主要内容如下:调用高德地图API1.首先,需要注册高德地图开发者,这个是使用API的前提,只有正常登陆,创建应用,生成专属的Key值,才能正常调用地图,注册的话,直接到官网上注册就行,需要输入以下信息,按照提示一步一步往下走就行,如下:

2023-09-25 02:50:52
web前端地图导航开发 地图网站开发
web前端地图导航开发 地图网站开发

如何在前端网页中调用第三方地图API,实现网页中显示地图信息?这里以调用高德地图和百度地图为例,简单介绍一下前端网页中如何调用第三方地图API,主要内容如下:调用高德地图API1.首先,需要注册高德地图开发者,这个是使用API的前提,只有正常登陆,创建应用,生成专属的Key值,才能正常调用地图,注册的话,直接到官网上注册就行,需要输入以下信息,按照提示一步一步往下走就行,如下:

2023-09-10 15:46:01
web前端室内地图开发 webgis前端开发在运行时浏览器加载不了地图
web前端室内地图开发 webgis前端开发在运行时浏览器加载不了地图

webgis前端开发在运行时浏览器加载不了地图视图显示参数设置不当。要使发布在ArcGISServer上的地图资显示在浏览器上,需要对视图显示属性如范围、中心点和缩放等参数进行正确设置,否则将会导致地图加载不出来,由此得知,webgis前端开发在运行时浏览器加载不了地图是视图显示参数设置不当导致的。前端PC端使用地图步骤(高德)使用地图前,需要到对应官网申请key1.首先,注册开发

2023-10-05 17:53:34
开源web前端开发流程图 网页原型图怎么画-网站制作流程步骤详解
开源web前端开发流程图 网页原型图怎么画-网站制作流程步骤详解

WEB前端项目开发流程这个环节是由项目经理完成,项目经理首先和客户进行交流,了解客户的需求,然后分析项目的可行性,如果项目可以被实现,项目经理写出项目需求文档交给设计师完成后续的开发。这个环节主要是UI设计师参与,UI设计师根据产品需求分析文档,对产品的整体美术风格、交互设计、界面结构、操作流程等做出设计。负责项目中各种交互界面、图标、LOGO、按钮等相关元素的设计与制作。这个部

2023-10-14 03:58:25
web前端开发整个流程图 网页原型图怎么画-网站制作流程步骤详解
web前端开发整个流程图 网页原型图怎么画-网站制作流程步骤详解

怎样自学web前端开发?Web应用程序的开发过程现在特征已经弄清楚了,我们就可以开始定义开发一个web应用程序的整个过程了。当然,这依赖于工程的大小,过程中的某些步骤可能很小,在你的脑海里就能完成这种工作,但把事情整个的了解一下总是有好处的。同时还有一点很重要的你要明白,这篇文章并不会对每个步骤进行深层次的描述。步骤一:分析开发一个web应用的第一步是分析你的需求。你此时

2023-10-09 21:51:17
沭阳电脑编程培训班 沭阳县地图全图高清版德辰教育在什么位置
沭阳电脑编程培训班 沭阳县地图全图高清版德辰教育在什么位置

沭阳哪儿有好的电脑培训学校?学电脑到徐州天启电脑设计培训中心,徐州天启电脑是一家专业培训室内设计和平面设计的实战培训基地,是专业培养室内装潢设计师和平面广告设计师的摇篮!详情了解可以到百度上搜一下相关信息沭阳铸捷教育培训怎么样沭阳铸捷教育培训很好。沭阳铸捷教育培训拥有一支优秀的师资团队,他们具备丰富的教学经验和专业知识,能够有效地传授知识和提升学生的学习能力。培训机构注重

2023-09-17 12:27:03
php异步框架编程 如何使用PHP+jQuery+MySQL实现异步加载ECharts地图数据(附源码下载)_jquery
php异步框架编程 如何使用PHP+jQuery+MySQL实现异步加载ECharts地图数据(附源码下载)_jquery

如何使用fsockopen函数实现异步执行PHPWeb服务器执行一个PHP脚本,有时耗时很长才能返回执行结果,后面的脚本需要等待很长一段时间才能继续执行。如果想实现只简单触发耗时脚本的执行而不等待执行结果就直接执行下一步操作,可以通过fscokopen函数来实现。PHP支持socket编程,fscokopen函数返回一个到远程主机连接的句柄,可以像使用fopen返回的句柄一样,对它进行f

2023-09-14 04:23:19