輸入全球信息的文字

Question

This question extends an answer here that uses domready。該擴展名試圖包含名稱略有不同的第二個infowindow：inwindow vs infowindow。第一個問題是，鑑於回答者的第一個「規則」 - 「僅創建infowindow對象的一個​​實例並使用setContent（）方法修改其內容。」 - 可以在那裏是第二個infowindow對象？

如果是這樣，那麼我如何創建inwindow如下圖所示出現了什麼問題？單擊地圖時出現inwindow，但單擊其「提交」按鈕似乎沒有任何作用。

A working JSFiddle.com version在這裏（至少它顯示了一張地圖）。

接下來是一些全局變量和對象。

var map 
var infowindow = new google.maps.InfoWindow(); 
var inwindow = new google.maps.InfoWindow(); 
var markers = []; 
var counter = 0; 

initialize()接下來是摘錄。

google.maps.event.addListener(map, 'click', function (event) { 

    addMarker(event.latLng); 
    }); 

google.maps.event.addListener(inwindow, 'domready', function() { 
    var button = document.getElementById('inputButton'); 
    var input = document.getElementById('nameinput').value; 
    button.onsubmit = function() { 
    marker.title = input; 
    inwindow.close(); 
    }; 
    }); 
google.maps.event.addListener(infowindow, 'domready', function() { 
    var button = document.getElementById('deleteButton'); 
    var id = parseInt(button.getAttribute('data-id')); 
    button.onclick = function() { 
    deleteMarker(id); 
    }; 
    }); 
} 

function addMarker(location) { 

    counter++; 

    var inputForm = 'Name: <input type="text" id="nameinput" size="31" maxlength="31" tabindex="1"/>' + '<input type="button" id="inputButton" value="Submit">'; 

    var marker = new google.maps.Marker({ 
position: location, 
map: map, 
id: counter 
}); 
inwindow.setContent(inputForm); 
inwindow.open(map, marker); 

markers.push(marker); 

var deleteButton = '<button id="deleteButton" data-id="' + counter + '">Delete</button>'; 

google.maps.event.addListener(marker, 'rightclick', function() { 
    infowindow.setContent(deleteButton); 
    infowindow.open(map, marker); 
    }); 
} 

function deleteMarker(markerId) { 
    for (var i=0; i<markers.length; i++) { 
    if (markers[i].id === markerId) { 
     markers[i].setMap(null); 
    } 
    } 
} 

Answer 1

您可以擁有任意數量的infowindows。 規則我給你there更像是提示（因此斜體字體）。您可以隨時調整以適應您的需求。

現在，你必須在你的代碼的幾個問題：在表單中點擊提交按鈕時，觸發

1. onsubmit事件。行動應該在表格上，而不是在按鈕上。但你在這裏沒有表格。您可以使用onclick事件（如刪除按鈕）。

2. 在infowindow準備就緒後（domready），在用戶填充字段之後，您將獲得輸入值。因此它將永遠是空的。

3. 您設置了marker.title = xxx，但此處不可用，此外，您應該使用setTitle()方法更改標記標題。

4. 爲什麼不使用我（和你）用於刪除按鈕操作的相同技巧？ （使用Id等）我建議您嘗試瞭解那裏發生的情況並將其適用於您設置標記標題的部分。

如果你仍然堅持，讓我知道，我會進一步解釋！

編輯：

JSFiddle demo

注意，沒有對輸入和按鈕界定的tabindex，並且我用.focus()信息窗口打開時將焦點設置在輸入或按鈕。

希望這會有所幫助。