Google地图模态表单文本框自增异常：需实现步长为1的自增

嘿，我一眼就瞅出问题所在啦！你现在的代码每次点击标记打开模态框时，都会给shown.bs.modal事件新增一个监听器——说白了就是，第一次点击标记，这个监听器触发1次；第二次点击，就有2个监听器同时生效；第三次是3个，以此类推。这就导致数值不是每次加1，而是加1、加2、加3...最后就变成了1,3,6,10这种累加序列，完全不是你想要的步长为1的自增。

给你两种靠谱的解决方案：

方案一：只绑定一次模态框显示事件 #

把shown.bs.modal的事件绑定逻辑移到标记的点击监听外面，全程只绑定一次，这样就不会重复触发了：

// 先一次性绑定模态框显示后的自增逻辑，放在所有监听外面
$('#myModal').on('shown.bs.modal', function() {
  // 显式把输入框值转成整数，避免字符串拼接的潜在问题
  let currentValue = parseInt($("#num").val(), 10);
  $("#num").val(currentValue + 1);
});

// 地图双击添加标记的逻辑
google.maps.event.addListener(map, "dblclick", function(event){
 marker = new MarkerWithLabel ({
 position: event.latLng,
 map: map,
 icon:mmcross,
 draggable: true,
 labelContent: '',
 labelAnchor: new google.maps.Point(15,33),
 labelClass: "labels", // 自定义的CSS类
 labelInBackground: false
 });
 map.setCenter(event.latLng);
 // 标记点击只负责打开模态框即可
 google.maps.event.addListener(marker, 'click', function() {
 $('#myModal').modal('show');
 });
});

方案二：使用one()绑定单次触发事件 #

如果你的业务逻辑必须在标记点击时绑定事件，可以用jQuery的one()方法，它会确保事件只触发一次，不会重复累加：

google.maps.event.addListener(map, "dblclick", function(event){
 marker = new MarkerWithLabel ({
 position: event.latLng,
 map: map,
 icon:mmcross,
 draggable: true,
 labelContent: '',
 labelAnchor: new google.maps.Point(15,33),
 labelClass: "labels",
 labelInBackground: false
 });
 map.setCenter(event.latLng);
 //Add listener to marker to open modal
 google.maps.event.addListener(marker, 'click', function() {
 $('#myModal').modal('show');
 // 用one代替on，每次打开模态框只触发一次自增
 $('#myModal').one('shown.bs.modal', function() {
   let currentValue = parseInt($("#num").val(), 10);
   $("#num").val(currentValue + 1);
 });
 });
});

另外补充个小细节：虽然$("#num").get(0).value++看起来能工作，但因为输入框的value本质是字符串类型，显式用parseInt转成整数再运算，能避免用户手动输入非数字内容时出现的异常，更稳妥哦～

内容的提问来源于stack exchange，提问作者geom