百度地图信息提示框的修改 转

发布时间:2017-2-20 12:21:32 编辑:www.fx114.net 分享查询网我要评论
本篇文章主要介绍了"百度地图信息提示框的修改 转 ",主要涉及到百度地图信息提示框的修改 转 方面的内容,对于百度地图信息提示框的修改 转 感兴趣的同学可以参考一下。

一个小项目,百度地图的定制,电脑用的是触摸屏,支持手写输入,中文输入直接调用系统的虚拟键盘,手写输入是参考网上高手写的一个控件。

百度的信息提示框里的搜索框里要输入查询地址,就是去哪里,到哪里那个地址输入框,要解决的问题是怎么把虚拟输入键盘的内容赋值到这个地址输入框,并要判断当前是哪个输入框。

一般运用信息提示框是调用这个库“http://api.map.baidu.com/library/SearchInfoWindow/1.5/src/SearchInfoWindow_min.js”

下载这个库,并对其改造

增加属性和方法

    SearchInfoWindow.prototype.getOffset = function(){
        return this._opts.offset;
    }

//这里增加:

//当前的地址类型
    SearchInfoWindow.prototype.getCurrSelAddr = function(){
        return this._currSelAddr;
    }

//设置地址内容
    SearchInfoWindow.prototype.setSearchAddr = function(addr){
        this._setSearchAddr(addr);

    },


    baidu.object.extend(SearchInfoWindow.prototype,{

.........................

//

        /**
         * 得到searchInfoWindow的高度跟宽度
         * @return none
         */
        _getSearchInfoWindowSize: function(){
          this._boxWidth = parseInt(this.Container.offsetWidth,10);
          this._boxHeight = parseInt(this.container.offsetHeight,10);
        },

         //根据地址选择设置,这里要注意,只能用Value属性,不能用innerHTML和innerText(由于不熟悉html和js,这里卡了,不用Value怎么也输入不了文本)
        _setSearchAddr: function (addr) {
            switch (this._currSelAddr) {
                case BMAPLIB_TAB_SEARCH:
                    this.dom.searchText.value = addr;
                    break;
                case BMAPLIB_TAB_TO_HERE:
                    this.dom.transText.value = addr;
                    break;
                case BMAPLIB_TAB_FROM_HERE:
                    this.dom.transText.value = addr;
                    break;
            }


        },

        /**
         * 阻止事件冒泡
         * @return none
         */

...........................

//记录选择的地址类型

            //显示当前tab content并高亮tab
            switch (type) {
                case BMAPLIB_TAB_SEARCH:
                    this.dom.seartTab.className      = "BMapLib_current";
                    this.dom.searchBox.style.display = "block";
                    this.dom.transBox.style.display  = "none";
                    this._currSelAddr = BMAPLIB_TAB_SEARCH;  //地址类型
                    break;
                case BMAPLIB_TAB_TO_HERE:
                    this.dom.tohereTab.className     = "BMapLib_current";
                    this.dom.searchBox.style.display = "none";
                    this.dom.transBox.style.display  = "block";
                    this.dom.stationText.innerHTML   = "起点";
                    this._pointType = "endPoint";
                    this._currSelAddr = BMAPLIB_TAB_TO_HERE;  //地址类型
                    break;
                case BMAPLIB_TAB_FROM_HERE:
                    this.dom.fromhereTab.className   = "BMapLib_current";
                    this.dom.searchBox.style.display = "none";
                    this.dom.transBox.style.display  = "block";
                    this.dom.stationText.innerHTML   = "终点";
                    this._pointType = "startPoint";
                    this._currSelAddr = BMAPLIB_TAB_FROM_HERE;  //地址类型
                    break;
            }


            this._firstTab.className += " BMapLib_first";
        },


        /**
         * 绑定自动完成事件
         */

DELPHI调用的网页文档

//添加标记和信息窗口
function createMarkerAndInfo(mid, lng, lat, tel, addr, mIcon, iImg){
        var point = new BMap.Point(lng,lat);
        var markerIconf = new BMap.Icon(mIcon,new BMap.Size(20,32));
        var marker = new BMap.Marker(point,{icon:markerIconf});
        marker.mid = mid;
        map.addOverlay(marker);
        //var label = new BMap.Label(mid,{offset:new BMap.Size(20,-10)});
        //marker.setLabel(label);


        var infoImgf = '';
        if(iImg != ''){
                infoImgf = ' <img src="'+iImg+'" '+
                           ' alt="" style="float:right;zoom:1;overflow:hidden;width:100px;height:100px;margin-left:3px;"/>';
        }


        var sContent =  '<div style="margin:0;line-height:20px;padding:2px;" >'+ infoImgf+
                        // ' <img src="'+iImg+'" '+
                        // ' alt="" style="float:right;zoom:1;overflow:hidden;width:100px;height:100px;margin-left:3px;"/>' +
                        ' 地址: '+addr+' <br/>'+
                        ' 电话: '+tel+' <br/>' +
                        '</div>';


        var opts = {
                title : mid,                    //标题
                width : 280,                    //宽度
                height: 120,                    //高度
                panel  : "panel",               //检索结果面板
                enableAutoPan : true,           //自动平移
                enableSendToPhone : false,      //禁止发信息
                searchTypes   :[
                        BMAPLIB_TAB_SEARCH,     //周边检索
                        BMAPLIB_TAB_TO_HERE,    //到这里去
                        BMAPLIB_TAB_FROM_HERE   //从这里出发
                ]
        };


        var searchInfoWindow = new BMapLib.SearchInfoWindow(map,sContent,opts);


        marker.siw = searchInfoWindow;


        arrMarkers.push(marker);


        marker.addEventListener("click", function(){
                searchInfoWindow.open(marker);
                document.getElementById("MarkerID").innerHTML = marker.mid;
        });

//监听信息窗口的打开和关闭,打开时,显示手写输入按钮,关闭时隐藏手写输入按钮
        searchInfoWindow.addEventListener("open",function(){
                document.getElementById("isOpenInfo").innerHTML = 1;
        });
        searchInfoWindow.addEventListener("close",function(){
                document.getElementById("isOpenInfo").innerHTML = 0;
        });
}

上一篇:大数据全体系年终总结
下一篇:maven项目在eclipse启动报错:java.lang.ClassNotFoundException

相关文章

相关评论