百度地图之自动提示--autoComplete

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="initial-scale=1, maximum-scale=1, user-scalable=no, width=device-width">
    <title>百度地图之自动提示--autoComplete</title>
</head>
<body>
<button id="btn1">将深圳设置为检索区域</button>
<button id="btn2">将上海设置为检索区域</button>
<input id="register2suggestId" size="30" type="text" class="w-100-nick" placeholder="请输入"/>
<div id="register2map" style="width:300px;height:200px;"></div>
<script src="http://api.map.baidu.com/api?v=2.0&ak=ZUHewhg0KDCnZa5emK9hxRib&callback=init"></script>
<script>

    window.windowMapBusiness = {
        //创建和初始化地图函数:
        initMap: function (id, addr, s) {
            this.createMap(id, addr, s);//创建地图
            this.setMapEvent();//设置地图事件
            this.addMapControl();//向地图添加控件
        },
        //创建地图函数:
        createMap: function (id, addr, s) {
            s = s ? s : 8;
            window.map = new BMap.Map(id);// 将map变量存储在全局 在百度地图容器中创建一个地图
            if (addr) {
                map.centerAndZoom(addr, s);//设定地图的中心点和坐标并将地图显示在地图容器中
            } else {
                var geolocation = new BMap.Geolocation();  //实例化定位对象。
                geolocation.getCurrentPosition(function (r) {   //定位结果对象会传递给r变量 r.point.lng 经度 r.point.lat 纬度
                    if (this.getStatus() == BMAP_STATUS_SUCCESS) {  //通过Geolocation类的getStatus()可以判断是否成功定位。
                        map.centerAndZoom(r.point, s);//设定地图的中心点和坐标并将地图显示在地图容器中
                        var mk = new BMap.Marker(r.point);    //基于定位的这个点的点位创建marker
                        map.addOverlay(mk);    //将marker作为覆盖物添加到map地图上
                        map.panTo(r.point);   //将地图中心点移动到定位的这个点位置。注意是r.point而不是r对象。
                    } else {
                        map.centerAndZoom(‘广东省深圳市‘, s);//设定地图的中心点和坐标并将地图显示在地图容器中
                    }
                }, {enableHighAccuracy: true});
            }
        },
        //地图事件设置函数:
        setMapEvent: function () {
            map.enableScrollWheelZoom();//启用地图滚轮放大缩小
            map.enableKeyboard();//启用键盘上下左右键移动地图
            //map.disableDragging();     //禁止拖拽
//            map.enableDragging();   // 开启拖拽
            map.enableInertialDragging();   // 开启惯性拖拽
        },
        //地图控件添加函数:
        addMapControl: function (sc) {
            //向地图中添加缩放控件
            var ctrl_nav = new BMap.NavigationControl({
                anchor: BMAP_ANCHOR_TOP_LEFT,
                type: BMAP_NAVIGATION_CONTROL_LARGE
            });
            map.addControl(ctrl_nav);
            //向地图中添加缩略图控件
            if (sc) {
                var ctrl_ove = new BMap.OverviewMapControl({
                    anchor: BMAP_ANCHOR_BOTTOM_RIGHT,
                    isOpen: 1
                });
                map.addControl(ctrl_ove);
                //向地图中添加比例尺控件
                var ctrl_sca = new BMap.ScaleControl({
                    anchor: BMAP_ANCHOR_BOTTOM_LEFT
                });
                map.addControl(ctrl_sca);
            }
        },
        // 设置单个标注-有单行提示文字
        addMarker: function (addr, sc, lf, top) {
            map.clearOverlays();//清除所有标注
            new BMap.Geocoder().getPoint(addr, function (point) {
                if (point) {
                    var sc = sc ? sc : 8,
                            lf = lf ? lf : 10 - addr.length * 6,//百度地图标注字体12px
                            top = top ? top : -20,
                            address = new BMap.Point(point.lng, point.lat);
                    map.centerAndZoom(address, sc);
                    var marker = new BMap.Marker(point);
                    map.addOverlay(marker);
                    marker.setLabel(new BMap.Label(addr, {offset: new BMap.Size(lf, top)}));
                }
            });
        },

//处理地址--传入地址、函数 处理经纬度等 执行环境window  赋值通过scope 如 $scope.Lon=point.lng; $scope.Lat=point.lat;
        responseAddr: function (addr, fun) {
            new BMap.Geocoder().getPoint(addr, function (point) {
                if (point) {//point.lng  point.lat
                    fun(point);
                }
            });
        },
//百度地图自动提示 -(未解决)还是检索的上一次的区域
        autoComplete: function (suggestId, setLocation, keywords, sc, lf, top) {// id必填 keywords-array 其余-string
            var me = this,
            //建立一个自动完成的对象
                    ac = new BMap.Autocomplete({
                        "input": suggestId, //输入框id
                        "location": setLocation//设定返回结果的所属范围
                    }),
                    iptTrigger = document.getElementById(suggestId);

            //删除多余的元素,但百度地图自动生成的js报错 报错并不影响提示功能  暂设置为隐藏多余元素
            function hideRestAcBox() {
                var elm = Array.prototype.slice.call(document.getElementsByClassName(‘tangram-suggestion-main‘));
                if (elm.length) {
                    elm.forEach(function (v, i) {
//        v.parentNode.removeChild(v);
                        v.style.zIndex = -1;
                        v.style.visibility = ‘hidden‘;
                    });
                    elm[elm.length - 1].style.zIndex = 999;
                    elm[elm.length - 1].style.visibility = ‘visible‘;
                }
            }

            function hideAcBox() {
                var elm = Array.prototype.slice.call(document.getElementsByClassName(‘tangram-suggestion-main‘));
                elm.forEach(function (v, i) {
                    v.style.zIndex = -1;
                    v.style.visibility = ‘hidden‘;
                });
            }

            //输入框的值控制 提示信息列表容器显示隐藏
            function boxHide() {
                console.log(this.value);
                if (this.value) {
                    if (keywords) {//发起某个关键字的提示请求,会引起onSearchComplete的回调
                        ac.search.apply(ac, keywords);
                    }
                    hideRestAcBox();
                } else {
                    hideAcBox();
                }
            }

            iptTrigger.oninput = boxHide;//非ie
            iptTrigger.onpropertychange = boxHide;//ie
            //鼠标点击下拉列表后的事件
            ac.addEventListener("onconfirm", function (e) {
                hideAcBox();
                var _value = e.item.value;
                var myValue = _value.province + _value.city + _value.district + _value.street + _value.business;
                console.log(myValue);
                me.addMarker(myValue, sc, lf, top);
            });
        }

    };

    document.getElementById(‘btn1‘).onclick = function () {
        console.log(1);

        windowMapBusiness.autoComplete(‘register2suggestId‘, ‘深圳市‘, [‘大厦‘, ‘楼‘, ‘大学‘, ‘校区‘, ‘学院‘, ‘中专‘, ‘中学‘, ‘小学‘, ‘幼儿园‘]);

    };
    document.getElementById(‘btn2‘).onclick = function () {
        console.log(2);

        windowMapBusiness.autoComplete(‘register2suggestId‘, ‘上海市‘, [‘大厦‘, ‘楼‘, ‘大学‘, ‘校区‘, ‘学院‘, ‘中专‘, ‘中学‘, ‘小学‘, ‘幼儿园‘]);

    };

    setTimeout(function () {
        windowMapBusiness.initMap(‘register2map‘, ‘深圳‘);
    }, 1000);
</script>
</body>
</html>
时间: 2024-10-11 11:25:50

百度地图之自动提示--autoComplete的相关文章

百度地图,自动获取定位,拖拽获取地点,模糊查询获取当前位置

先看下效果图,因为没有美化,只是做一下功能. 完整代码如下 <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1, user-scalable=no"> <script src="../.

顾维灏谈百度地图数据采集:POI自动处理率达90%

顾维灏谈百度地图数据采集:POI自动处理率达90% 发布时间:2015-12-21 22:37        来源:cnsoftnews.com        作者: 百度地图还创新研发高精地图,并成为国内唯一掌握这一无人驾驶汽车的核心技术的地图厂商.基于强大的自采能力和不断开拓的技术创新,百度地图正在变革人们对于地图的定义. 12月21日,百度地图十周年生态大会在798艺术区尤伦斯当代艺术中心举行,百度地图事业部副总经理顾维灏出席大会并发表主题演讲.顾维灏表示,百度地图已经拥有超过4000万的

小练习:用jQuery简单模拟百度搜索框的提示功能

今天第一次接触jQuery,用jQuery模拟了一下百度搜索的自动提示功能.连带jQuery的基本知识点,简单总结如下: 首先得在工程中导入插件:jquery-1.4.2.js ,并在html的head中引入该js: 1 <!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd"> 2 <html>

百度地图SDK引用问题 Symbol(s) not found for architecture armv64

引入百度地图后编译提示 开始以为是Baidu地图不支持64位,但后来删除armv64,还是不行 最后查看百度开发文档中的简介介绍解决问题,如图: 然后就是这样解决的:将AppDelegate.m改为AppDelegate.mm

百度地图下拉框搜索建议,并自动添加标注点

HTML代码(MVC) @*-------------------调用地图接口在百度地图的基础上,添加自动搜索(地区)框----------------------------------*@ @{ Layout = null; } <script src="~/Scripts/jquery-1.8.2.min.js"></script> <script type="text/javascript" src="http://a

百度地图API提示&quot;230错误 APP Scode校验失败&quot;

笔者近2天在 Android Studio上玩了一下百度地图,碰到了常见的"230错误 APP Scode校验失败",下面我来介绍一下具体的解决办法. 1.在andriodstudio上部署百度地图的规范.把下载下来的SDK解压,切换至Project视图.复制以下3个文件到libs文件下. 2.在grdle文件下添加:compile files('libs/BaiduLBS_Android.jar'). 3.去百度开发者页面申请AK.(具体步骤参看官方文档). 4.笔者申请AK的SHA

百度地图API 级别自动缩放

今天做一个基于百度地图API的小项目 查了很长时间apid都没有找到地图呈现出来的时候地图按坐标的多少自动缩放显示的等级比例,特此记录笔记!var points = [point1, point2,point3]; var view = map.getViewport(eval(points)); var mapZoom = view.zoom; var centerPoint = view.center; map.centerAndZoom(centerPoint,mapZoom);

百度地图-----&amp;gt;地图类型、定位模式、实时交通、我的位置、加入覆盖物、覆盖物详情及提示

在百度地图开发平台 http://developer.baidu.com/map/index.php? title=androidsdk 进行创建应用,获取应用的AK,在进行下载BaiduLBS_Android.jar和armeabi--然后放于libs文件夹下.另外获取安全码 Android SDK安全码组成:数字签名+;+包名.(查看具体配置方法),创建应用,提交后,自己主动下发Ak(配置文件里用到) 以下是官方的提示: 第一步:在project里新建libs文件夹.将开发包里的baidum

百度地图API显示多个标注点带提示的代码

效果如图: 代码: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <title>百度地图API显示多个