Question

我正在尝试使用Google Maps API将标记添加到我的地图上。我在我的application.html.erb中调用脚本标记中的addMarker函数，我无法解释为什么函数在map.js中存在时没有定义。

看看下面的代码，我确信它是显而易见的，但我是网络开发的新手，并且已经在网上搜索了很长时间，无法看到我做错了什么。

非常感谢！

这是我的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>

Answer 1

因为您的添加标记功能是在文档就绪函数内写的。从文档就绪范围中删除该功能并将其放在外面。

未捕获的参考错误addMarker未定义

1 个答案: