‘壹’ web前端 知道的友友能告诉我点击查看地图大图,弹出一个大的地图显示框来显示当前定位是怎么实现的吗
点击按钮弹出层,JQUERY写法例如:$(".openmap").on("click",function() {
$(".map").fadeIn(600);})
弹出的层中加入网络或者其他地图的代码,地图代码都是在线生成的,可以自己去网络地图试试。
‘贰’ 如何在前端网页中调用第三方地图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。总的来说,整个过程非常简单,步骤也很清晰,只要你熟悉一下上面的过程,很快就能掌握的,官网也给出了非常详细的开发文档,非常适合初学者学习,还可以在线编辑查看效果,感兴趣的话,可以搜一下,希望以上分享的内容能对你有所帮助吧,也欢迎大家评论、留言。
‘叁’ h5跳转到移动端地图网页打开地图app
腾讯地图: https://lbs.qq.com/webApi/uriV1/uriGuide/uriWebMarker
高德地图: https://developer.amap.com/api/uri-api/guide/mobile-web/point
网络地图: http://lbsyun..com/index.php?title=uri/api/web