Question

我正在使用移动框架作为背景图像。将会有一个Google地图，其中将显示标记，并且可以单击标记。在那里，我编写了一个自定义搜索框，该搜索框从我的api生成列表。但是，当搜索框处于活动状态时，则表示我在搜索，该地图无法使用，意味着该搜索已阻止了Google地图。应该是，当我从搜索结果中选择一个项目时，在指示地图上的标记后将关闭搜索框，该地图也将可访问。

实际上，它会像带有搜索功能的Google Map一样工作，但是只会使用我的自定义搜索功能。

这是代码

    function searchCamera(event){
    let searchKey = event.target.value.toLowerCase();

    $('#searchResultList').empty();
    let searchResult = cameraList.filter(function(item, key){
        let s1 = item.name.toLowerCase().indexOf(searchKey);
        let s2 = item.address.toLowerCase().indexOf(searchKey);
        return searchKey.length > 0 && (( s1 >= 0) || (s2 >= 0));
    });

    searchResult.map(function(item){
        $('#searchResultList').append(createCameraSearchItem(item));
    })}
    function createCameraSearchItem(camera){
    return '<li onclick="searchedResultSelected(event)"'+
    'data-id="'+camera.id+'" data-lat="'+camera.lat+'" data-lon="'+camera.lon+'"'+'>'+'<a>'+
    camera.name+'</a>'+
    '</li>';}
    function searchedResultSelected(event){
    //todo
    let context = event.target;
    let id = $(context).data('id'), lat = $(context).data('lat'), lon = 
    $(context).data('lon'), name=$(context).data('name');
    showMap(id, lat, lon, name);}

#mapbg {
    background: url(../img/mapbody.png) no-repeat top;
    width: 100%;
}
    #mapView {
    width: 323px;
    height: 573px;
}

.mapViewClass {
    position: absolute;
    z-index: 0;
    margin: 54px 0 0px 14px;
}

.mapgoogle {
    position: absolute;
    width: 324px;
    height: 571px;
    z-index: 0;
    overflow: hidden;
    margin: 20px 0 0px 13px;
}
#mySearch {
    background-image: url(../img/icons/search.png);
    background-position: 4px 18px;
    background-repeat: no-repeat;
    text-align: center;
    border: 1px solid;
}
input[type=texts], textarea.md-textarea {
    background-color: #FFFFFF;
    outline: 0;
    font-size: 1rem;
    width: 97%;
    height: 3rem;
    box-sizing: content-box;
    transition: all .3s;
    margin: 2.9rem .2rem 0.2rem .2rem;
}

.searchResultList {
    background: white;
    font-weight: 700;
    color: #4d4d4d;
    list-style-type: none;
    z-index: 1;
    height: 1%;
    margin: auto;
}

 

    <div class="col-md-4 " style="position: relative" id="mapbg">
          <div class="mapViewClass" id="mapView" > </div>
          <div class="mapgoogle">
                 <input type="texts" id="mySearch" onkeyup="searchCamera(event)" placeholder="Search camera here" title="Type in a category" class="cameraSearchInput" >
                 <div>
                   <ul class="searchResultList" id="searchResultList"></ul>
                 </div>
               </div>
        </div>

https://drive.google.com/file/d/1Y7fWgVnIrKQzUGYh8tWMwbDmUj3ZdJ1B/view?usp=sharing

如何修复搜索框和谷歌地图

0 个答案: