基于bootstrap旅游网站以及高德地图API的使用

时间:2024-04-04 07:51:22

自己比较喜欢bootstrap框架,所以在很多界面的布局上主要是采用的这个的框架,因为大四做毕业设计的原因自己写的框架也会采用的这个框架,关于这个框架其实只要对于HTML和CSS基础很好的人来说这个框架入手很快,好处就不多说了,说一个自己在答辩的时候遇到一个问题,就是bootstrap会随着界面自己做适配,然后答辩的时候我把项目投到投影上的时候,然后框架里面的部分内容都变形了,这个框架可能在缩小的时候比较方便,在放大的超出浏览器的大小的时候就会没办法做到很好的适配。

图1

基于bootstrap旅游网站以及高德地图API的使用

图一是网站的主页面,在这个上面也没有很多花里胡哨的处理,就是一些基础的CSS的应用,因为是旅游网站所以在地图上会有很多的应用,这里面更多的是想说是使用高德地图的使用,我自己先做一个简单的介绍,http://lbs.amap.com/ 这个是高德地图的API接口里面开放了很多的源代码,只要注册一下获取一个KEY的值就可以开发一些很好用的功能点,我今天主要介绍的是在后台推送上图片以后如何通过点击图片再跳转到具体的地址。

图二是上传一个景点名以及具体的坐标

基于bootstrap旅游网站以及高德地图API的使用

图三最后一张上传到了前端

基于bootstrap旅游网站以及高德地图API的使用

图四点击图片或者地址可以跳转到具体的地址

基于bootstrap旅游网站以及高德地图API的使用

关于坐标的抓取http://lbs.amap.com/console/show/picker高德地图里面相应的坐标的抓取,这样可以抓到坐标,这样方便在后面的跳转以后可以准确的跳转到具体的地址,自己还有一个小的想法就是不通过具体的坐标去抓取到那个位置,这样的方式实现我觉得还是比较简单的,关于那种做法以后有空试试,自己对于高德地图的开放源码研究也不是很多,纯属自己的一个小想法。