小折腾了一下博客

关注我的都知道,本站的“足迹地图”,之前是与网站合为一体的,后来小站上了SSL,由于百度地图API那边一直不能很好的加密,网站每次吃加载都会弹出不安全的提示。这相当不友好,后期我索性就将自己的“足迹地图”页面独立出去了。

而且那个“足迹地图”自诞生之日起,一直都不完美(其实现在也不完美,安慰自己,不完美才是世界常态)虽然每个标点都配了照片跟日志链接,但每个标点第一次都弹不出完整的照片。因为不想折腾,而且这个也无伤大雅,所以就留着这个问题了。

本着稳健运行就是最好的原则,我最近一年都没改网站的代码,那个“足迹地图”的BUG就这么拖着,之前处理条件不成熟,毕竟我也没法要求百度地图全局支持SSL,多一事不如少一事。

直到最近发现百度地图API支持SSL了,所以挤了点时间重新将自己的“足迹地图”整合回本站,所以大伙在PC端看到的“足迹地图”能保留网站菜单,至于手机端嘛,如果手机性能不错那还OK,性能不佳的浏览地图就会比较卡……毕竟手机处理器还是不能跟PC比。

而后对于点击一次看不到照片的小BUG,我给每个标点弹出的框框预设了一个固定的高度,有些竖着拍的照片看着会被挤压变形,好在这样的照片不多,多数情况下是正常的,由此算是勉强解决了问题。

当然,如果有哪个前端大神能将这继续优化掉,那可真的不胜感激了!哈哈

觉得好可以点个赞!
(暂无人赞)
Loading...

《小折腾了一下博客》有13个想法

  1. 哈哈,喜欢搞足迹地图的人都是旅游达人!以前我也想搞百度地图,但自从发现了mapsmarker以后就弃之不用了。
    说到“每个标点弹出的框框预设了一个固定的高度,有些竖着拍的照片看着会被挤压变形”,是否可以以这种思路写代码?
    max-height: 300px
    width: auto

    1. 昨晚按照你的建议测试了一下,失败了。按照我的推测,没有点击标点的情况下它并不知道图片尺寸,此时width:auto跟max-height都会失效。改用min-width跟min-height就会好一点,但不治本。想要根本上解决问题,我的想法是,要么就预加载全部图片(这样负担会很重),要么就改成点击某个标点,等图片加载完,再自动刷新一次那个标点的弹窗。但这样要大改代码,我也不具备这样的技术。

      1. 今天看了一下垃圾邮件,看到了这个回复。特意去你的足迹页面检查了一下元素,貌似是可以的呀?


        只要在width前面加上max-就搞定了。

        1. 呃,我站点发出的邮件竟然会变成垃圾邮件?有点悲催呀……我的邮件地址是经过验证的,按道理不会那么轻易被过滤的

      2. 今天看了一下垃圾邮件,看到了这个回复。特意去你的足迹页面检查了一下元素,貌似是可以的呀?

        < img src="https://p.lushaojun.com/wp-content/uploads/2018/05/3644_15.jpg" style="width:300px;height:230px">

        只要在width前面加上max-就搞定了。

        (抱歉,代码被你的ajax自动过滤了,因此用全角打出来)

        1. 谢谢提供支持,这个我试过了,竖拍的照片没啥问题,就是缩小了一点,比例正确。就是横着拍的照片第一次点击的时候,左右两边显示不全,需要第二次点击才能出来完整的照片。通过限定最大尺寸这个路子可能行不通了。

          1. 今晚试验你的代码时查看了百度api,这个问题我已解决。方法如下:

            //图片加载完毕重绘infowindow
            document.getElementById('imgDemo').onload = function (){
            infoWindow.redraw(); //防止在网速较慢,图片未加载时,生成的信息框高度比图片的总高度小,导致图片部分被隐藏
            }

  2. 这个我突然也想搞一个。。。

    但是仔细想了想,好像。。。用不着。。。

    井底之蛙,方圆不过一个井。

    1. 以后跑地方多了就可以弄,现在只在一个地方的话,确实用不着,不值得折腾……

发表评论

电子邮件地址不会被公开。 必填项已用*标注