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

Posted 2020-08-22 张志峰的博客

http://blog.csdn.net/jankercsdn/article/details/45392635

 

版权声明：本文为博主原创文章，未经博主允许不得转载。

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

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

一般运用信息提示框是调用这个库“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+‘" ‘+
                           ‘ 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+‘" ‘+
                        // ‘ 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;
        });
}