zoukankan      html  css  js  c++  java
  • 百度地图信息提示框的修改

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

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

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

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



  • 相关阅读:
    维特比(Viterbi)算法解最优状态序列
    c#重要知识点复习1---程序流程控制
    学C# Hook原理及EasyHook简易教程
    EmguCV 绘画图形
    EmguCV创建/保存图片
    EmguCV中图像类型进行转换
    basler 相机拍照简单类综合Emgu.CV---得到图档--原创
    RotatedRect 类的用法
    EmguCv“线段” 结构类型学习
    aforge 学习-基本图像处理要用的类库
  • 原文地址:https://www.cnblogs.com/jankerxp/p/7774033.html
Copyright © 2011-2022 走看看