jQuery Google地图根据点击获取地址

Question

我正在构建Google地图功能。当用户点击按钮时，jquery脚本应该从文本框中获取地址，但不能正常工作。有人知道我所做的一切都是错误的吗？

<script type="text/javascript" src="http://code.jquery.com/jquery.min.js"></script> 
<script type="text/javascript" src="http://maps.google.com/maps/api/js?sensor=false&amp;language=en"></script> 
<script type="text/javascript" src="<?=base_url()?>data/gmap3.js"></script> 

<script> 
    $(document).ready(function() { 
     function getAddress() { 
      $("#addressClick").click(function() { 
       $('#address').val(); 
      }); 
     } 
     $("#my_map").gmap3({ 
      marker: { 
       address: getAddress() 
      }, map:{ 
       options:{ 
        zoom: 14 
       } 
      } 
     }); 
    }); 
</script> 
<input id="address" type="text" placeholder="Please type in your address"><input type="button" value="Go to location" id="addressClick"> 
<div id="my_map" style=" height: 350px; width: 300px;"></div> 

Answer 1

看起来你不想加载地图，直到点击按钮。但是，只要页面准备就绪，您就要加载地图。你是路过undefined作为地址：

address: getAddress() 

功能getAddress()没有返回值，所以当你将它的值的属性，该属性具有的undefined值。所有getAddress()都会为您的按钮分配点击处理程序。在click处理程序中，读取文本框的值，但该值将被忽略。

如果要在点击按钮后加载地图，则需要移动代码以在点击处理程序中加载地图。另外，移动getAddress()函数之外的点击处理程序绑定。

$(document).ready(function() { 
    $("#addressClick").click(function() { 
     $("#my_map").gmap3({ 
      marker: { 
       address: $('#address').val() 
      }, map:{ 
       options:{ 
        zoom: 14 
       } 
      } 
     }); 
    }); 
}); 

工作演示：jsfiddle.net/wFxDR