0

Google Maps API を使用して地図にマーカーを追加しようとしています。スクリプト タグで application.html.erb の addMarker 関数を呼び出していますが、map.js に存在する関数が定義されていない理由がわかりません。

以下のコードを見てください。明らかなことだと思いますが、私は Web 開発に不慣れで、長い間 Web を検索しており、何が間違っているのかわかりません。

本当にありがとう！

これは私のmap.jsです......

 $(document).ready(function(){


  function initialize() {
    var mapOptions = {
      center: new google.maps.LatLng(-34.397, 150.644),
      zoom: 8,
      mapTypeId: google.maps.MapTypeId.ROADMAP
  };

  var map = new google.maps.Map(document.getElementById("map-canvas"),
    mapOptions);

}

 function addMarker(latitude, longitude, title) {
        var marker = new google.maps.Marker({
          position:new google.maps.LatLng(latitude, longitude), 
          map : map, 
          title : title
        });
      }



google.maps.event.addDomListener(window, 'load', initialize);


});

これは私のapplication.html.erbです

<!DOCTYPE html>
<html>
<head>
  <title>EventsMapper</title>
  <%= stylesheet_link_tag    "application", :media => "all" %>
  <%= javascript_include_tag "application" %>
  <%= csrf_meta_tags %>

  <!-- <meta name="viewport" content="initial-scale=1.0, user-scalable=no" /> -->
  <script type="text/javascript"
  src="https://maps.googleapis.com/maps/api/js?key=AIzaSyC74gnSe7p17ulcZUzgPJHxYurGg2bjRYg&sensor=false">
  </script>

  <script type="text/javascript">

      $(function() {
      // initMap();

      //add here var items that converts ToDoItems to JSON, take out the var to make to global

      <% Yoga.all.each do |item| %>

      addMarker(<%=item.latitude%>, <%=item.longitude%>, '<%=item.name%>');
      <%end%>
     });
  </script>

</head>

<body>
   <!--  <input type="text" id="autocomplete"> -->
   <div id='googlemap'>
    <div id="map-canvas">
    </div>
  </div>

    <%= yield %>

</body>
</html>
4

1 に答える 1

1

マーカーの追加関数はドキュメント準備完了関数内に記述されているためです。関数をドキュメント レディ スコープから削除し、外側に配置します。

于 2013-07-01T10:44:43.353 に答える