谷歌地图Api v3:点击信息窗口中的按钮时启动一个操作
Google Map Api v3 : fire an action when clicking a button in a infowindow
我用"右键单击"操作在地图上添加标记。每个标记都有其特定的信息窗口,每个信息窗口中都有一个表单
当我创建多个标记时,我的代码只触发第一个信息窗口值,而不是好的值。
google.maps.event.addListener(map, 'rightclick', function(event) {
var marker = new google.maps.Marker({
map: map,
draggable : true,
position: event.latLng,
animation: google.maps.Animation.DROP,
});
var geocoder = new google.maps.Geocoder();
geocoder.geocode({'latLng': event.latLng}, function(results, status) {
if(status == google.maps.GeocoderStatus.OK) {
var html = "<div class='infobox'>";
html += "<p>";
html += "<strong>Lieu : </strong>";
html += results[0]['formatted_address'];
html += "</p>";
html += "<p>";
html += "<strong>Nombre de place (~) : </strong>";
html += "<input type='text' class='form_input' name='nb_place' id='nb_place' />";
html += "</p>";
html += "<p>";
html += "<strong>Point d'arrimage : </strong>";
html += "<input type='checkbox' id='point_arrim' name='point_arrim' />";
html += "</p>";
html += "<input type='hidden' id='formatted_address' name='formatted_address' value='"+results[0]['formatted_address']+"' />";
html += "<input type='hidden' id='geoloc_lat' name='geoloc_lat' value='"+event.latLng.nb+"' />";
html += "<input type='hidden' id='geoloc_long' name='geoloc_long' value='"+event.latLng.ob+"' />";
html += '<input type="button" onclick="saveData()" class="info_button" value="Ajouter l''emplacement"/>'
html += "</div>";
var infowindow = new google.maps.InfoWindow({
map: map,
content : html
});
infowindow.open(map, marker);
google.maps.event.addListener(infowindow, 'domready', function(){
console.log("test");
console.log($(this));
});
}
});
});
function saveData() {
var nb_place = escape(document.getElementById("nb_place").value);
var point_arrim = escape(document.getElementById("point_arrim").checked);
var formatted_address = document.getElementById("formatted_address").value;
var geoloc_lat = document.getElementById("geoloc_lat").value;
var geoloc_long = document.getElementById("geoloc_long").value;
if(!nb_place) nb_place = null;
var url = "phpsqlinfo_addrow.php?nb_place=" + nb_place + "&point_arrim=" + point_arrim +
"&formatted_address=" + formatted_address + "&geoloc_lat=" + geoloc_lat + "&geoloc_long=" + geoloc_long;
downloadUrl(url, function(data, responseCode) {
if (responseCode == 200 && data.length <= 1) {
infowindow.close();
document.getElementById("message").innerHTML = "Location added.";
}
});
}
事实上,我想动态地触发与点击的信息窗口按钮相关的值。我看了看"domready"的动作,但想不通。
制作
var marker=[];
var infowindow=[];
在全球范围内。尝试
google.maps.event.addListener(map, 'rightclick', function(event) {
marker.push(new google.maps.Marker({position: event.latLng, map: map}));
var markIndex = marker.length-1;
.......................
..........................
infowindow[markIndex] = new google.maps.InfoWindow({
content: html
});
infowindow[markIndex].open(map,marker[markIndex]);
//You can also add the info window again while clicking on marker if you need
google.maps.event.addListener(marker[markIndex], 'click', function(e) {
infowindow[markIndex].open(map,marker[markIndex]);
});
});
此外,在创建html变量时,将信息窗口索引添加到
html += '<input type="button" onclick="saveData('+markIndex+')" class="info_button" value="Ajouter l''emplacement"/>';
现在我们可以关闭saveData函数中的特定信息窗口
function saveData(index) {
........
if (responseCode == 200 && data.length <= 1) {
infowindow[index].close();
document.getElementById("message").innerHTML = "Location added.";
}
}
您可以在这里看到创建多个信息窗口的工作演示
相关文章:
- 单击按钮后启动javascript提示
- 一键启动按钮不起作用
- 从Django中同一页面上的多个按钮启动AJAX请求
- 如何在ASP.NET中单击按钮后激活启动选项卡
- 如何在单击按钮时使用instantsearch.js启动搜索
- 为什么不't在iOS上启动按钮下拉工作
- 自定义HTML5视频控件-退出按钮不会启动全屏切换功能
- 禁用facebook在like按钮启动edge.create事件
- plupload智能手机和平板电脑浏览按钮事件未启动
- javascript中带有启动和停止按钮的启动和停止循环
- 如何创建一个onclick函数,该函数在按下重新启动按钮时被调用
- 动态更改Twitter启动按钮上的文本,同时保留图标
- 用于.ogg循环播放的javascript/jquery启动按钮
- 使用“停止-启动”按钮设置图像刷新间隔
- 启动按钮下拉赢得't运行函数onclick
- 如何冻结“启动”按钮在jquery动画
- 启动按钮没有得到突出显示时,点击
- 停止自动运行功能,直到“启动”;按钮点击
- 启动按钮加载状态
- Tab键到ASP按钮上,然后按enter键启动按钮;不要点击开火