使用 JQuery 对话框向 Google 地图添加标记确认答案

【问题标题】：Add marker to Google Map with a JQuery dialog confirm使用 JQuery 对话框向 Google 地图添加标记确认
【发布时间】：2011-08-15 08:06:16
【问题描述】：

我有一张 Google Map V3 地图。当用户单击它时，会弹出确认警报，询问他们是否要在此处添加标记。如果他们说是，则添加标记。代码如下；

编辑：JSFiddle 上的标准 JS 工作版本： http://jsfiddle.net/sT8xU/4/

google.maps.event.addListener(map, 'click', function (event) {
   if (event.latLng) {
      var answer = confirm("Add marker?");
         if (answer) {
               addMarker(map, event.latLng);
         }
   }
});

这很好用。我现在尝试将此标准警报转换为 JQuery 对话框，如下所示；但无法让它工作。我想要的是使用上述 JQuery UI 对话框中的地图和事件参数调用 addMarker 函数。

试图让这个在 JSFiddle 上工作 http://jsfiddle.net/sT8xU/5/

google.maps.event.addListener(map, 'click', function (event) {
   if (event.latLng) {
     $('#divConfirmDialog').html('Add marker?'); $('#divConfirmDialog').dialog('open');
     function showResultsTest(x) {
        addMarker(map, event.latLng);
        alert(x);
     }
   }
});

$('#divConfirmDialog').dialog({
   buttons: {
   "Add": function () {
     x = "1";
     $(this).dialog("close");
     showResultsTest(x);
   },
   "Don't add": function () {
     $(this).dialog("close");
    }
   }
});

谢谢

【问题讨论】：

能不能把这段代码放到jsFiddle里让我们帮忙调试一下？
这里是问题中的两个 JSFiddle 链接更新：标准 JS 版本：jsfiddle.net/sT8xU/4JQuery UI 版本：jsfiddle.net/sT8xU/5

标签： jquery-ui dialog google-maps-api-3 confirm

【解决方案1】：

给你：http://jsfiddle.net/sT8xU/9/

我在map var 的全局声明下添加了var eventlatLng;。然后我在google.maps.event.addListener 函数中设置它。然后在Add Marker按钮函数中调用addMarker(map, eventlatLng);。

var map;
var eventlatLng; //new var

$(document).ready(function() {
    //no changes in document.ready
});

google.maps.event.addListener(map, 'click', function(event) {
    if (event.latLng) {
        eventlatLng = event.latLng; // new var set here
        $('#divConfirmDialog').html('Add marker?');
        $('#divConfirmDialog').dialog('open');
    }
});

$('#divConfirmDialog').dialog({
    dialogClass: 'dialogShadow',
    resizable: false,
    height: 100,
    autoOpen: false,
    modal: true,
    buttons: {
        "Add Marker?": function() {
            addMarker(map, eventlatLng); //added call to function with new var
            $(this).dialog("close");
        },
        "Don't Add": function() {
           $(this).dialog("close");
        }
    }
});
// rest of code unchanged

【讨论】：