0

我正在尝试为我的表单添加谷歌地图，因此在他们输入地址后，他们可以查看地图，然后将地图纬度和经度提交到数据库。到目前为止，我无法实现它。我在 jsfiddle 上试了一下，效果很好。但是当我尝试添加到页面时它不起作用。 http://jsfiddle.net/pborreli/pJgyu/

这是完整的页面。

<!DOCTYPE html>
<htmllang-"en">
<head>
<meta charset="utf-8">
<title>My First Guide</title>
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta name="description" content="">
<meta name="author" content="">

<!-- Le styles -->
<link href="css/bootstrap.css" rel="stylesheet">
<link href="css/bootstrap-responsive.min.css" rel="stylesheet">
<link href="css/prettify.css" rel="stylesheet">
<!--<link href="css/docs.css" rel="stylesheet">-->
<script src="js/bootstrap.min.js" type="text/javascript"></script>
<style type="text/css">
  body {
    padding-top: 60px;
    padding-bottom: 40px;
  }  
</style>

<script type="text/javascript" src="http://maps.google.com/maps/api/js?sensor=false"></script>
<script type="text/javascript">
$("#address").change(function() {
      var geocoder = new google.maps.Geocoder();
        var add = $("#address").val();
        geocoder.geocode( { 'address': add}, function(results, status) {
            if (status == google.maps.GeocoderStatus.OK) {
        var latitude = results[0].geometry.location.lat();
        var longitude = results[0].geometry.location.lng();
        var map;
        function initialize() {
            var myOptions = {
              zoom: 8,
              center: new google.maps.LatLng(latitude, longitude),
              mapTypeId: google.maps.MapTypeId.ROADMAP
            };
            map = new google.maps.Map(document.getElementById('map'),
                myOptions);
          }

          google.maps.event.addDomListener(window, 'load', initialize);
    }; 
    });​
</script>
<link href="css/bootstrap-responsive.css" rel="stylesheet">
<body>
  <div class="navbar navbar-fixed-top">
    <div class="navbar-inner">
      <div class="container">
        <a class="btn btn-navbar" data-toggle="collapse" data-target=".nav-collapse">
          <span class="icon-bar"></span>
          <span class="icon-bar"></span>
          <span class="icon-bar"></span>
        </a>
        <a class="brand" href="#">My First Guide</a>
        <div class="nav-collapse">
          <ul class="nav">
            <li class="active"><a href="#">Home</a></li>
            <li><a href="#about">Write a review</a></li>
            <li><a href="#contact">Talk</a></li>
            <li><a href="#contact">Events</a></li>
            <li>
                <form class="navbar-search pull-left">
                    <!--You can put class="search-query" too.-->
                    <input type="text" class=".navbar-search" placeholder="Search">
                </form>
            </li> 
          </ul>
        </div><!--/.nav-collapse -->
      </div><!-- div container -->
    </div><!-- div navbar-inner -->
  </div><!-- navbar navbar-fixed-top -->


<div class="container">
    <form class="form-horizontal">
        <fieldset>
            <legend>Submit Business Place</legend>
            <div class="control-group">
                <label class="control-label" for="input01">Business Name</label>
                <div class="controls">
                    <input type="text" class="input-xlarge" id="input01">
                    <p class="help-block">Please specify the name of business.(May
                        be it is a brand name)</p><br />
                </div>

                <div class="control-group">
                    <label class="control-label" for="input01">Address</label>
                    <div class="controls">
                        <input type="text" class="input-xlarge" id="ad">
                        <p class="help-block">To use lines please specify
                            &lsaquo;br/&rsaquo; tag.</p><br/>
                            <div id="map"></div>
                    </div>

                    <div class="control-group">
                        <label class="control-label" for="textarea">Description</label>
                        <div class="controls">
                            <textarea class="input-xlarge" id="textarea" rows="10"></textarea>
                        </div>

                    </div>

                    <label class="control-label" for="input01">Categories</label>
                    <div class="controls">
                        <input type="text" class="input-xlarge" id="input01">
                        <p class="help-block">Use comma as a separator.</p><br />
                    </div>

        </fieldset>
    </form>


</div>

<script src="js/jquery.js"></script>
<script src="js/bootstrap-transition.js"></script>
<script src="js/bootstrap-alert.js"></script>
<script src="js/bootstrap-modal.js"></script>
<script src="js/bootstrap-dropdown.js"></script>
<script src="js/bootstrap-scrollspy.js"></script>
<script src="js/bootstrap-tab.js"></script>
<script src="js/bootstrap-tooltip.js"></script>
<script src="js/bootstrap-popover.js"></script>
<script src="js/bootstrap-button.js"></script>
<script src="js/bootstrap-collapse.js"></script>
<script src="js/bootstrap-carousel.js"></script>
<script src="js/bootstrap-typeahead.js"></script>

</body>
</html>

但这里是 javascript 的东西。

<script type="text/javascript" src="http://maps.google.com/maps/api/js?sensor=false">    </script>
<script type="text/javascript">
$("#address").change(function() {
  var geocoder = new google.maps.Geocoder();
    var add = $("#address").val();
    geocoder.geocode( { 'address': add}, function(results, status) {
        if (status == google.maps.GeocoderStatus.OK) {
    var latitude = results[0].geometry.location.lat();
    var longitude = results[0].geometry.location.lng();
    var map;
    function initialize() {
        var myOptions = {
          zoom: 8,
          center: new google.maps.LatLng(latitude, longitude),
          mapTypeId: google.maps.MapTypeId.ROADMAP
        };
        map = new google.maps.Map(document.getElementById('map'),
            myOptions);
      }

      google.maps.event.addDomListener(window, 'load', initialize);
}; 
});​
</script>

这是我添加地图的 div。

<div class="control-group">
                    <label class="control-label" for="input01">Address</label>
                    <div class="controls">
                        <input type="text" class="input-xlarge" id="ad">
                        <p class="help-block">To use lines please specify
                            &lsaquo;br/&rsaquo; tag.</p><br/>
                            <div id="map"></div>
                    </div>
4

1 回答 1

1

我已经快速扫描了您的代码，似乎存在一些基本的编码问题：

  1. 您似乎是在初始化函数中创建地图，但您的初始化函数似乎嵌入在更大的 .change() 回调函数中；我看不到您的地图将如何显示。
  2. 您的 JavaScript 代码专注于 jQuery 搜索具有 id: address的元素，但在您的标记中似乎没有具有该 id 的元素。
  3. 您定义的包含文本Address的标签表示它是一个标签：input01，但您的标记中有 2 个不同的元素被分配了 id: input01。
  4. 有多个标签被标记为：input01的标签。
  5. 您在文件底部定义的所有脚本标记都缺少type属性。

我认为您的基本编码错误太多，看起来您在提交审核过程中可能会出现乱码？很难说，但我希望我的反馈对您有所帮助，并能帮助您更接近您的目标。

于 2012-04-25T02:49:46.857 回答