0

フォームに Google マップを追加しようとしているので、住所を入力すると地図を表示でき、その後地図の緯度と経度がデータベースに送信されます。これまでのところ、私はそれを実装できませんでした。私は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 コードは、id: addressを持つ要素の jQuery 検索に焦点を合わせていますが、マークアップにその ID を持つ要素がないようです。
  3. テキストAddressを含む定義したラベルは、それがinput01のラベルであることを示していますが、マークアップには id: input01が割り当てられた 2 つの異なる要素があります。
  4. input01のラベルとしてマークされているラベルが複数あります。
  5. ファイルの下部で定義したすべてのスクリプト タグにtype属性がありません。

基本的なコーディング エラーが多すぎて、審査のためにコードを送信する過程でコードが文字化けした可能性がありますか? わかりにくいですが、私のフィードバックが参考になり、目標に近づくのに役立つことを願っています。

于 2012-04-25T02:49:46.857 に答える