snmoney@gmail.com 发布的文章

参考tx地图API文档
https://lbs.qq.com/uri_v1/guide-poiMarker.html

没什么好特别说明的，自己注册一个开发者账号创建appid,获得一个key 就可以在每日的额度内调用这个api，目的是打开腾讯地图并定位在某处坐标。且标注一些自定义信息

然而，我调用出来被定位到了世界地图之外。 汗..
跳过全部的过程说结论，太恶心了...
引用一下文档的原文

参数:coord 必填:是
说明 标注点的位置坐标： lat,lng
注意：纬度在前，经度在后，两值之间用英文逗号分隔。
示例: coord:39.892326,116.342763

你大爷的，都特别说明加注意事项再加范例。我深信不疑了，于是一直在找其他原因..
结果你的实际操作这么骚，竟！然！是！反！！的！！。
正确调用应该是 lonlat ?!!!!

按照文档构建的uri （lat,lng）

https://apis.map.qq.com/uri/v1/marker?marker=coord:23.667477,113.061188;title:清远市清城区凤翔小学;addr:新城B25号区凤翔大道&coord_type=1&referer=2HXBZ-XLJK2-DSDUW-CIXYN-H5JNS-CFF2F

QQ截图20190427005205.jpg

反过来修正的uri

https://apis.map.qq.com/uri/v1/marker?marker=coord:113.061188,23.667477;title:清远市清城区凤翔小学;addr:新城B25号区凤翔大道&coord_type=1&referer=2HXBZ-XLJK2-DSDUW-CIXYN-H5JNS-CFF2F

QQ截图20190427005224.jpg

WELL DONE! 无FUCK可说.

P.S. 其实百度地图的API也是一样反的，同样恶心 Orz.. 会不会是百度的工程师跳槽去了鹅厂？

经验教训只有1句：做人千万不要手贱！

盲写了80多行的js, 运行~~ ..

无论如何函数都提示未定义，看浏览器的F12排除网络问题也排除拼写错误，但就是不认刚写的函数。
查半天浪费几个小时浏览器都刷新爆了。

*国内网有篇博客被转载九万多次的，列举的3个原因并没有鸟用。再次鄙视国内的转载复制黏贴风。

发现只是自己智障用自动补完添加了多余的内容

<script type="javascript" src="js/main.js"></script>

去掉或者修改为 type="text/javascript" 一切正常

<script src="js/main.js"></script>

我给自己跪了，TMD...为了这么无聊的事情熬夜

js函数多参数、默认值写法。
基础，但总是执笔忘，以前总去查自己的旧blog...那在这边再写一遍。

function mFun(){
    var arg1 = arguments[0]?arguments[0]:1; //参数1, 默认值1
    var arg2 = arguments[0]?arguments[0]:false; //参数1, 默认值 false

    if(arg2) 
        return arg1;
    else
        return 0;
}

var a = mFun(); // 0
var b = mFun(3,true); //3
var c = mFun(2); //0

备忘，以前总是用图片素材来实现

效果如图（直男审美，未优化）
QQ截图20190424174747.jpg

完整的源码DEMO

<!DOCTYPE html>
<html>
<head lang="en">
    <meta charset="UTF-8">
    <title>CSS气泡</title>
</head>

<style>
body {background: #0086da;  }

.mid {
    position: absolute;
    z-index: 1;
    top: 50%;
    left: 50%;
    -webkit-transform: translate(-50%,-50%);
    transform: translate(-50%,-50%);
}

.bubble {
    background: #fff;
    padding: 11px 14px;
    line-height: 1.4rem;
    position: relative;
    box-shadow: 1px 2px 2px rgba(0,0,0,0.4);
    border-radius: 11px;
    border:2px solid #999;
}
.bubble::before {
    content: '';
    background: #fff;
    position: absolute;
    width: 12px; height: 12px;
    right: -8px;
    top: 11px;
    transform: rotate(45deg);
    border-top: 2px solid #999;
    border-right: 2px solid #999;

}

</style>

<body>

<div class="mid" style="width: 200px">
    <div class="bubble">
        对话框风格的气泡<br/>
        新起一行
    </div>
</div>


</body>
</html>

源码解析

HTML部分

<div class="bubble">
    对话框风格的气泡<br/>
    新起一行
</div>

CSS部分

.bubble {
    background: #fff;
    padding: 11px 14px;
    line-height: 1.4rem;
    position: relative;
    box-shadow: 1px 2px 2px rgba(0,0,0,0.4);
    border-radius: 5px;
    border:2px solid #999;
}
.bubble::before {
    content: '';
    background: #fff;
    position: absolute;
    width: 12px; height: 12px;
    right: -8px;
    top: 11px;
    transform: rotate(45deg);
    border-top: 2px solid #999;
    border-right: 2px solid #999;
}

在 .bubble置入一个同背景色的方块且旋转45度，位移 使其一半外露在泡泡边缘外形成角尖。
注意的两点

  1. bubble需要定义position ，否则尖角无法参考位置定位
  2. 计算尖角的位置要考虑上边框等因素

选择多，好用，简单，免费，未被墙。讲晒!

官网
https://fontawesome.com/

...emm，还是简单备忘下集成步骤

添加到head的CDN:

<link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.8.1/css/all.css">

也可以下载整个插件到本地，但13M，考虑下自己的带宽资源是否合适

然后到
https://fontawesome.com/icons
搜适合的图标，找到合适的就复制网站提供的代码插入，例如

<i class="far fa-heart"></i>

效果如下
QQ截图20190424135134.jpg

  1. 1
  2. ...
  3. 41
  4. 42
  5. 43
  6. 44
  7. 45
  8. 46
  9. 47