<!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>

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

  1. 百度地图的demo提示key验证错误！错误码：230;

    在已经有BaiduMap的APIKey后使用AndroidStudio导入Baidu地图的as版的demo,提示key验证错误!错误码:230; 首先,因为百度地图demo中用自己的keystore文 ...

  2. 使用百度地图API自动获取地址和经纬度

    先上效果图,这是直接点击获取经纬度和地址的.没有做搜索的功能. 代码: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitiona ...

  3. echarts 中国地图 数据自动提示

    mounted() { // 首先每种图是根据series -->type决定的 eg:bar--柱状图 line 折线图 pie饼图 map地图等等三部曲 跟着走 // @第一步都是初始化 v ...

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

    顾维灏谈百度地图数据采集:POI自动处理率达90%   发布时间:2015-12-21 22:37        来源:cnsoftnews.com        作者:   百度地图还创新研发高精地 ...

  5. Vue中加载百度地图

    借助百度地图的 LocalSearch 和 Autocomplete 两个方法 实现方式:通过promise以及百度地图的callback回调函数 map.js 1 export function M ...

  6. 百度地图api 实例 自动提示 并计算两地的行驶距离

    百度地图api 实例 自动提示 并计算两地的行驶距离 <!DOCTYPE html> <html> <head> <meta http-equiv=" ...

  7. 百度地图API提示"230错误 APP Scode校验失败"

    笔者近2天在 Android Studio上玩了一下百度地图,碰到了常见的"230错误 APP Scode校验失败",下面我来介绍一下具体的解决办法. 1.在andriodstud ...

  8. 百度地图API 级别自动缩放

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

  9. 百度地图API显示多个标注点,解决提示信息问题以及给标注增加地图旁的文字连接提示的另一种解决办法

    原文:百度地图API显示多个标注点,解决提示信息问题以及给标注增加地图旁的文字连接提示的另一种解决办法 公司的网站改版要求在一个页面显示百度地图.上面要同时显示很多标注点,标注点当然要有提示信息嘛,提 ...

随机推荐

  1. 修改linux系统的默认语言

    修改linux系统的默认语言: 1.全局修改:         所有用户都是同一种统一的语言设置          修改/etc/sysconfig/i18n文件          vi /etc/s ...

  2. PAT——1036. 跟奥巴马一起编程

    美国总统奥巴马不仅呼吁所有人都学习编程,甚至以身作则编写代码,成为美国历史上首位编写计算机代码的总统.2014年底,为庆祝“计算机科学教育周”正式启动,奥巴马编写了很简单的计算机代码:在屏幕上画一个正 ...

  3. Loadrunner之HTTP脚本编写

    Loadrunner之HTTP脚本编写 刚学习性能测试的时候还是建议以录制脚本为好,从录制的脚本中去了解脚本结构,各个函数的用法,慢慢再去尝试自己去编写脚本,如果想往技术方向发展,建议最好学习一门编程 ...

  4. Android 面试题之编程

    1.排序 package cn.java.suanfa; public class SuanFa { public static void main(String[] args) { int[] ar ...

  5. freemark生成静态网页乱码问题

    输出流问题:修改Writer如下: OutputStreamWriter writer = new OutputStreamWriter(new FileOutputStream(dir), &quo ...

  6. ZooKeeper系列（2）--基于ZooKeeper实现简单的配置中心

    ZooKeeper节点的类型分为以下几类:  1. 持久节点:节点创建后就一直存在,直到有删除操作来主动删除该节点 2. 临时节点:临时节点的生命周期和创建该节点的客户端会话绑定,即如果客户端会话失效 ...

  7. 洛谷P1501 [国家集训队]Tree II(LCT)

    题目描述 一棵n个点的树,每个点的初始权值为1.对于这棵树有q个操作,每个操作为以下四种操作之一: + u v c:将u到v的路径上的点的权值都加上自然数c: - u1 v1 u2 v2:将树中原有的 ...

  8. #leetcode刷题之路25- k个一组翻转链表

    给出一个链表,每 k 个节点一组进行翻转,并返回翻转后的链表.k 是一个正整数,它的值小于或等于链表的长度.如果节点总数不是 k 的整数倍,那么将最后剩余节点保持原有顺序. 示例 :给定这个链表:1- ...

  9. linux 学习第十三天（screen不间断会话、apache服务、SELinux安全子系统）

    一.screen 命令不间断会话 1.安装screen(从系统镜像作为yum仓库安装) 1.1.加载系统镜像 1.2.mount /dev/cdrom /media/cdrom/  (挂在系统镜像) ...

  10. 偏前端--之小白学习本地存储与cookie

    百度了很多都是讲的理论,什么小于4kb啊之类的,小白看了一脸懵逼复制到html中为什么没效果!!哈哈.我来写一个方便小白学习. 贴图带文字描述,让小白也运行起来,然后自己再去理解... 1. cook ...