[英]Adding unique info windows to markers and updating a database to store the info (google map api)
I am currently coding a travel website that will allow a user to click on a map, resulting in a marker going into that location. 我目前正在编写一个旅游网站,该网站将允许用户单击地图,从而使标记进入该位置。 From here I wish for the user to apply an info window to that particular marker with details such as Country, City, Duration, Comments.
在这里,我希望用户将信息窗口应用于该特定标记,并带有诸如国家/地区,城市,时长,注释之类的详细信息。 However when I code this, the info window will appear but the data is not unique, the data the user enters and saves shows over the next marker the exact same.
但是,当我编写此代码时,将出现信息窗口,但数据不是唯一的,用户输入并保存的数据在下一个标记上完全相同。 So for example, say the user clicks Ireland, when they click England, and go to edit that marker the marker will have all the Ireland information in it.
例如,假设用户单击爱尔兰,然后单击英格兰,然后编辑该标记,则标记中将包含所有爱尔兰信息。 How do i make this unique?
我如何使它独特?
here is my HTML code: 这是我的HTML代码:
function initialize() {
var latlng = new google.maps.LatLng(54.5, -7.0);
var options = {
zoom: 7,
center: latlng,
mapTypeId: google.maps.MapTypeId.ROADMAP
}
var map = new google.maps.Map(document.getElementById("map"), options);
var html = "<table>" +
"<tr><td>Country:</td> <td><input type='text' id='country'/> </td> </tr>" +
"<tr><td>City:</td> <td><input type='text' id='city'/></td> </tr>" +
"<tr><td>Duration:</td> <td><input type='text' id='duration'/></td> </tr>" +
"<tr><td>Category:</td> <td><select id='category'>" +
"<option value='city' SELECTED>City Break</option>" +
"<option value='beach'>Beach Holiday</option>" +
"<option value='romantic'>Romantic Holiday</option>" +
"<option value='activity'>Activity Holiday</option>" +
"<option value='site'>Site Seeing</option>" +
"</select> </td></tr>" +
"<tr><td></td><td><input type='button' value='Save & Close' onclick='saveData()'/></td></tr>";
infowindow = new google.maps.InfoWindow({
content: html
});
google.maps.event.addListener(map, "click", function(event) {
marker = new google.maps.Marker({
position: event.latLng,
map: map
});
google.maps.event.addListener(marker, "click", function() {
infowindow.open(map, marker);
});
});
}
function saveData() {
var country = escape(document.getElementById("country").value);
var duration = escape(document.getElementById("duration").value);
var category = document.getElementById("category").value;
var latlng = marker.getPosition();
var url = "phpsqlinfo_addrow.php?country=" + country + "&city" + city + "&duration=" + duration +
"&category=" + category + "&lat=" + latlng.lat() + "&lng=" + latlng.lng();
downloadUrl(url, function(data, responseCode) {
if (responseCode == 200 && data.length >= 1) {
infowindow.close();
document.getElementById("message").innerHTML = "Location added.";
}
});
}
function downloadUrl(url, callback) {
var request = window.ActiveXObject ?
new ActiveXObject('Microsoft.XMLHTTP') :
new XMLHttpRequest;
request.onreadystatechange = function() {
if (request.readyState == 4) {
request.onreadystatechange = doNothing;
callback(request.responseText, request.status);
}
};
request.open('GET', url, true);
request.send(null);
}
function doNothing() {}
</script>
Reinitialize the infowindow content when you create a new marker: 创建新标记时,重新初始化信息窗口内容:
google.maps.event.addListener(map, "click", function(event) {
marker = new google.maps.Marker({
position: event.latLng,
map: map
});
infowindow.setContent(html);
google.maps.event.addListener(marker, "click", function() {
infowindow.open(map, marker);
});
});
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.