分类 前端 下的文章

最近有做一个项目，需要根据用户当前位置自动填写省市区，然后心里有选择：H5原生定位、百度地图、腾讯地图和高德地图。
既然是做公众号，还是比较偏向用腾讯自家的地图--腾讯地图。不是因为它好，主要就是怕用其它的不稳定。
为什么呢？主要怕腾讯那一天搞什么限制，限制使用其它地图，倒是定位功能无法正常使用。
觉得多虑的话，可以想想淘宝抖音为什么在微信打不开。好了，不说这么多废话了，回归正题~

一、申请key

申请网址：https://lbs.qq.com/dev/console/key/manage
调用地图服务需要用到KEY，所以需要申请。申请流程也很简单，不用怎么说了，直接打开上面的网址申请即可。

二、引入JS

<script charset="utf-8" src="https://apis.map.qq.com/tools/geolocation/min?key={你的KEY}&referer={你的网站名}"></script>

三、Javascript调用代码

官方有提供三种用法，几种用法经过测试，第三种相对比较稳定，所以这里写的是第三种用法。
官方文档：https://lbs.qq.com/tool/component-geolocation.html
第一次尝试根据GPS定位，如果失败（用户拒绝了获取精确位置），则尝试根据IP地址定位。
获取成功后，直接根据返回对象里数据拼接即可

let geolocation = new qq.maps.Geolocation();
geolocation.getLocation(
    // 获取成功回调
    function (position) {
        // {"module":"geolocation","type":"cache","adcode":"4402**","nation":"中国","province":"广东省","city":"韶关市","district":"**区","addr":"***","lat":24.***57,"lng":113.***708,"accuracy":3720}
        console.log(position);
    },
    // 获取失败回调
    function () {
        console.info('获取精确定位失败，尝试通过IP地址获取位置信息');

        geolocation.getIpLocation(
            // 获取成功回调
            function (position) {
                // {"module":"geolocation","adcode":440204,"type":"ip","nation":"中国","province":"广东省","city":"韶关市","district":"","addr":"","lat":24.80446,"lng":113.61095,"accuracy":10000}
                console.log(position);
            },
            // 获取失败回调
            function () {
                console.info('尝试通过IP地址获取位置信息失败');
                alert("您的当前位置获取失败，请手动填写安装地区");
            }
        )

    },
    {
        // 获取定位超时时间，超过这个时间则直接失败，单位：秒
        timeout: 30,
        failTipFlag: true
    }
);

在使用input propertychange事件时，遇到一个问题。我输入一个字时，会重复执行五六次事件，事件里又包含了网络请求，体验非常差。经过搜索，找到了解决办法，详情如下。

代码

// 监听textarea的输入
$(document).on('input propertychange', 'textarea', function () {
    var detailsElement = $(this),
        details = $(this).val();
    // 确保是propertychange事件，并且是改变了内容
    if (window.event && event.type == 'propertychange' && event.propertyName != 'value')
        return;

    // 清除旧的定时器
    window.clearTimeout($(this).data('timeout'));
    // 设置新的定时器
    $(this).data('timeout', setTimeout(function () {
        // 这里放置要执行的代码
        console.log('值改变了~输入值：' + details);
    }, 5000)); // 延时值：5000 = 5秒
});

原理

1.监听textarea多行文本输入框的input和propertychange事件
2.事件触发后，判断是否是propertychange事件，并且是改变内容的propertychange事件
3.清除旧的定时器，然后设置新的定时器。这样在一定时间内，回调函数不会重复执行，只会执行一次。

最近有个做招聘网站的客户提出了个修改要求，要求报名列表上的某个元素可点击，点击后可以录取这个人。
这不是日了个狗了嘛，现在的列表项的每项是用a标签包着的，并且是多处调用这里，所以不能将a标签改成其它。
不过也得满足不是。
经过一番查找，找到一个方法：阻止冒泡事件

代码如下：

<div class="list">
    <a href="" class="list-item">
        麻花藤<br/>
        2018-10-15 18:52:33<br/>
        <!-- 给span元素加上pass类，点击这丫的录取此人 -->
        <span class="pass">点击录取</span>
    </a>
    <a href="" class="list-item">
        马云<br/>
        2018-10-15 18:52:33<br/>
        <span class="pass">点击录取</span>
    </a>
    <a href="" class="list-item">
        王健林<br/>
        2018-10-15 18:52:33<br/>
        <span class="pass">点击录取</span>
    </a>
</div>
<script>
// 这里用了JQuery，很多人说过时了，但我还是挺喜欢用的，方便！
$(document).on('click', '.pass', function (e) {
    // 这里执行你要执行的动作，例如请求同意录取接口
    // .....

    // 阻止冒泡事件
    e.stopPropagation();
    // 取消默认动作
    return false;
});
</script>
  1. 1
  2. 2