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

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

图1


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

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


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


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


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

  • 0
    点赞
  • 7
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值