Question

我在这里似乎有一种情况可能是一个非常常见的问题。我正在右键单击创建一个谷歌地图标记。此标记包含用户的输入表单。一切正常。但是，作为该表单的一部分，有一个过滤功能。单击列表中的任何项目时，我试图将该项目显示为此列表正下方的值范围的一部分，但是，这不起作用。

在信息窗口中使用此方法还是作为变量的一部分，是否存在某种阻塞？我只是厚吗？

（我已将过滤器功能与我的代码的事件监听器部分一起包含在标记中）

过滤功能：

<script>
function iwproductFilter() {
// Declare variables
var input, filter, ul, li, a, i;
input = document.getElementById('userInput');
filter = input.value.toUpperCase();
ul = document.getElementById("myUL");
li = ul.getElementsByTagName('li');

// Loop through all list items, and hide those who don't match the search query
for (i = 0; i < li.length; i++) {
    a = li[i].getElementsByTagName("a")[0];
    if (a.innerHTML.toUpperCase().indexOf(filter) > -1) {
        li[i].style.display = "";
    } else {
        li[i].style.display = "none";
    }
}
}
</script>

事件监听器

<script type="text/javascript">


        //Right Click to Drop a New Marker
        google.maps.event.addListener(map, 'rightclick', function(event) {
            //Edit form to be displayed with new marker
            var EditForm = '<p><div class="marker-edit">'+
            '<form method="POST" name="SaveMarker" id="SaveMarker">'+
            '<label for="pType"><span>Product:</span>'+'<input type="text" id="userInput" onkeyup="iwproductFilter()" placeholder="Search for names..">'+'&nbsp;'+'&nbsp;'+'&nbsp;'+
            '<a onclick="document.getElementById(\'userInput\').value = \'\'; iwproductFilter();" style="font-size:16px;cursor:pointer;"</a>'+'&#10006'+
            '<ul id="myUL">'+
            '<li id="1a"><a>Adele</a></li>'+
            '<li id="1b"><a>Agnes</a></li>'+
            '<li id="1c"><a>Billy</a></li>'+
            '<li id="1d"><a>Bob</a></li>'+
            '<li id="1e"><a>Calvin</a></li>'+
            '<li id="1f"><a>Christina</a></li>'+
            '<li id="1g"><a>Cindy</a></li>'+
            '<li id="1h"><a>Doug</a></li>'+
            '</ul>'+
            '<span>Value:</span><span style="font-weight:bold;color:red"><a id="prodResult" name="pType" class="save-type">Select Product :)</a></span>'+
            '<scr'+'ipt>'+
            'var prod1a = document.getElementById("1a");'+
            'var prod1b = document.getElementById("1b");'+
            'var prod1c = document.getElementById("1c");'+
            'var prod1d = document.getElementById("1d");'+
            'var prod1e = document.getElementById("1e");'+
            'var prod1f = document.getElementById("1f");'+
            'var prod1g = document.getElementById("1g");'+
            'var prod1h = document.getElementById("1h");'+
            'var y = document.getElementById("prodResult");'+
            'y.innerHTML = "Select Product:)";'+
            'prod1a.onclick = function() {y.innerHTML = "Adele";}'+
            'prod1b.onclick = function() {y.innerHTML = "Agnes";}'+
            'prod1c.onclick = function() {y.innerHTML = "Billy";}'+
            'prod1d.onclick = function() {y.innerHTML = "Bob";}'+
            'prod1e.onclick = function() {y.innerHTML = "Calvin";}'+
            'prod1f.onclick = function() {y.innerHTML = "Cindy";}'+
            'prod1g.onclick = function() {y.innerHTML = "Doug";}'+
            'prod1h.onclick = function() {y.innerHTML = "Erika";}'+
            'prod1i.onclick = function() {y.innerHTML = "Fred";}'+
            'prod1j.onclick = function() {y.innerHTML = "Gareth";}'+
            'prod1l.onclick = function() {y.innerHTML = "Harvy";}'+
            '</scr'+'ipt>'+
            '<select name="pType" class="save-type"><option value="restaurant">Rastaurant</option><option value="bar">Bar</option>'+
            '<option value="house">House</option></select></label>'+
            '<label for="pUserName"><span>Place Name :</span><input type="text" name="pUserName" class="save-name" placeholder="Enter Title" maxlength="40" /></label>'+
            '<label for="pDesc"><span>Notes:</span><textarea name="pDesc" class="save-desc" placeholder="Max 50 Characters" maxlength="50"></textarea></label>'+
            '</form>'+
            '</div></p><button name="save-marker" class="save-marker">Add Product</button>';


</script>

提前致谢！：）

Answer 1

我在JSBin中创建了一个简单示例，并使用以下代码来实现您正在寻找的功能：

var myList = document.getElementById('myUL');

myList.addEventListener('click', function(event) {
  if (event.target.tagName === 'LI') {
    var name = event.target.textContent;
    var result = document.getElementById('prodResult');
    result.textContent = name;
  }
});

只有在地图上显示信息窗口时，上述代码才有效;即：如果其内容已添加到DOM中。因此，为了确保这种情况，我只在信息窗口domready事件被触发时运行代码。

infoWindow.addListener('domready', addListClickListener);

根据Google Map Docs on Info Windows，domready

将包含InfoWindow内容的内容附加到DOM时会触发
。

使用Javascript发布Google信息窗口问题？

1 个答案: