分类 html 下的文章

Google Map Javascript Api 坐标/经纬度拾取


主要参考的API在https://developers.google.com/maps/documentation/javascript/3.exp/reference?authuser=1#Map
中的Events.click

代码如下,注意需要修改KEY

<!DOCTYPE html>
<html>
<head>
    <style>
        #map {
            height: 600px;
            width: 100%;
        }
    </style>
</head>
<body>
<div id="map"></div>
<script>
    function initMap() {
        var uluru = {lat: 23.4302665, lng: 121.5833201};
        var map = new google.maps.Map(document.getElementById('map'), {
            zoom: 7,
            center: uluru
        });
        var marker = new google.maps.Marker;

        map.addListener('click', function(ApiMouseEvent) {

            marker.setMap(null);

            var lat = ApiMouseEvent.latLng.lat();
            var lng = ApiMouseEvent.latLng.lng();
            var locationJson = ApiMouseEvent.latLng.toJSON()

            var contentString = '<div id="content" style="text-align:center;">'+lat+','+lng+'<br/><button onclick="select('+lat+','+lng+');">选择该位置</button></div>';

            var infowindow = new google.maps.InfoWindow({
                content: contentString
            });
            marker = new google.maps.Marker({
                position: locationJson,
                map: map,
                title: lat+','+lng
            });

            infowindow.open(map, marker);
        });


    }
</script>
<script async defer
        src="https://maps.googleapis.com/maps/api/js?key=YOURKEY&callback=initMap">
</script>
<script>
    function select(lat,lng){
        console.log(lat)
        console.log(lng)
    }
</script>
</body>
</html>

鼠标单击变双击测试工具


最近鼠标貌似坏了,单击有时候会变成双击,为了验证下了写了小工具

在线测试地址

测试结果展示
testResult.jpg

代码如下,精度写了120毫秒,即两次点击间隔小于120毫秒视为双击了,我这个鼠标快速手动点击间隔都在160毫秒以上。

<input type='button' onclick='testMouse();' value='双击测试'/>
<p></p>
<div></div>
<script src="http://ajax.useso.com/ajax/libs/jquery/1.8.0/jquery.min.js"></script>
<script>
var i=0;
var lastClick=0;
var ok=0;
var error=0;
function testMouse(){
    i++;
    nowTime = Math.round(new Date().getTime());
    clickTime = lastClick==0?0:(nowTime-lastClick);
    lastClick = nowTime;
    if(clickTime<120&&clickTime>0){
        is_doubleClick = "疑似双击";
        error++;
    }else{
        is_doubleClick = "正常";
        ok++;
    }
    $("div").prepend("点击第"+i+"次 间隔时间:"+clickTime+"毫秒 "+is_doubleClick+"<br/>");
    $("p").html("正常"+ok+"次 双击"+error+"次 错误率"+Math.round(error/ok*10000)/100+"%");
}
</script>

点击按钮button异常提交表单的原因


如果表单中含有按钮用作它用而非submit,点击时也会提交表单,是因为

<botton>在Internet Explorer 的默认类型是 "button",而其他浏览器中(包括 W3C 规范)的默认值是 "submit"。

解决办法:
1、放弃使用button标签,改用input type='button'.
2、继续使用button标签,但是指定其 type为 button.