百度地图‘’关键字提示输入‘’的回车选定功能

最近， 终于把刨了一年多的坑填上了， 这里记录一下， 省的下次遇到类似的还要重复劳动。

需求

项目中有个表单需要用户输入地址， 并以地图的形式在前台展现。

挖坑

需要地图形式展现， 就需要用到第三方地图组件， 首当其冲的肯定是百度地图了， 正好也有符合预期的了api，拿来直接用就ok了， 这也是挖坑人用的方法。

经过一段时间的运营， 问题很快就暴露出来了， 直接用百度给的方法， 会出现地址字段存了， 但经纬度字段是空的， 导致前台地图bug了。。后来经过分析发现， 很多用户在表单中键入地址后会直接回车结束， 而百度api默认没有对回车操作进行响应， 导致没有经纬度坐标的换算，它没做， 咱就自己来。

填坑

问题不大， 但也有写小意外， 比如不能直接监听input下的keyup事件， 会导致api失效。具体如何解决， 上代码。

/**
 * Created by NMTuan on 2017/3/6.
 * 地址-百度地图
 */
(function () {
    var marryLocation = function (params) {
        var defaults = {

            mapId: '',  //地图id
            inputId: '',//inputId
            rsId: '',   //结果列表id
            callback: null  //回调, 返回坐标
        };
        params = $.extend(defaults, params);

        var map = new BMap.Map(params.mapId, {enableMapClick: false});
        map.centerAndZoom("北京", 12);                   // 初始化地图,设置城市和地图级别。
        map.enableScrollWheelZoom();   //启用滚轮放大缩小，默认禁用
        map.enableContinuousZoom();    //启用地图惯性拖拽，默认禁用
        var myValue;
        var ac = new BMap.Autocomplete(    //建立一个自动完成的对象
            {
                "input": params.inputId, 
                "location": map,
                onSearchComplete: function (rs) {
                    var _value = rs.getPoi(0);
                    myValue = _value.province + _value.city + _value.district + _value.street + _value.business;
                }
            });

        ac.addEventListener("onhighlight", function (e) {  //鼠标放在下拉列表上的事件
            var str = "";
            var _value = e.fromitem.value;
            var value = "";
            if (e.fromitem.index > -1) {
                value = _value.province + _value.city + _value.district + _value.street + _value.business;
            }
            str = "FromItem<br />index = " + e.fromitem.index + "<br />value = " + value;

            value = "";
            if (e.toitem.index > -1) {
                _value = e.toitem.value;
                value = _value.province + _value.city + _value.district + _value.street + _value.business;
            }
            str += "<br />ToItem<br />index = " + e.toitem.index + "<br />value = " + value;
            $('#' + params.rsId).html(str);
        });

        ac.addEventListener("onconfirm", function (e) {    //鼠标点击下拉列表后的事件
            var _value = e.item.value;
            myValue = _value.province + _value.city + _value.district + _value.street + _value.business;
            $('#' + params.rsId).html("onconfirm<br />index = " + e.item.index + "<br />myValue = " + myValue);

            setPlace();
        });

        function setPlace() {
            map.clearOverlays();    //清除地图上所有覆盖物
            function myFun() {
                var pp = local.getResults().getPoi(0).point;    //获取第一个智能搜索的结果
                map.centerAndZoom(pp, 18);
                var marker = new BMap.Marker(pp);// 创建标注
                map.addOverlay(marker);    //添加标注
                marker.enableDragging();
                if (params.callback) {
                    params.callback(marker.getPosition())
                    marker.addEventListener('dragend', function (rs) {
                        params.callback(marker.getPosition())
                    });
                }
            }

            var local = new BMap.LocalSearch(map, { //智能搜索
                onSearchComplete: myFun
            });
            local.search(myValue);
        }

        //input enter事件
        $('#' + params.inputId).on('keydown', function (e) {
            if (e.keyCode == 13) {
                setPlace();
            }
        });

    };

    module.exports = marryLocation;
})();

总结

坑不大， 但一直没去面对， 找各种理由一拖再拖， 实践再一次证明，凡事直接面对，其实也没什么难的。

转载于:https://my.oschina.net/nmtuan/blog/857210