-1

感谢您的任何帮助，您可以提供！

总结我有一个用 Ruby on Rails 构建的 Google Maps API V2 地图应用程序，我正在尝试转换为 V3。我已经使用Tips for Upgrading Gmaps v2 to v3 more faster中的建议更新了我现有的 javascript 。但是，我的地图仍然没有显示在页面上。

详细信息：使用 V2，此代码将在单个网页上显示一系列独特的 A 点到 B 点地图。一个用户可能有许多保存的地图，这段代码会显示它们。现在，地图画布和路线无法解析。

再次感谢您的帮助！

编辑 3：问题是 calcRoute()

我查看了所有内容并发现地图在我开始添加 Start 和 End 变量之前有效。这些变量看起来应该可以工作，但方向和路线没有出现。在加载这些变量时我做错了什么吗？我已经提供了我的原始 js 和结果。

原来的：

function calcRoute() {
var start = <%= savedmap.from %>;
var end = <%= savedmap.to %>;
var request = {
 origin:start,
destination:end,
travelMode: google.maps.DirectionsTravelMode.DRIVING
};
directionsService.route(request, function(response, status) {
if (status == google.maps.DirectionsStatus.OK) {
directionsDisplay.setDirections(response);
}
});
}

结果：

function calcRoute() {
var start = 4400 Massachusetts Ave NW Washington, District of Columbia, 20016-8001;
var end = 2121 I Street- NW Washington, District of Columbia, 20052;
var request = {
origin:start,
destination:end,
travelMode: google.maps.DirectionsTravelMode.DRIVING
};
directionsService.route(request, function(response, status) {
if (status == google.maps.DirectionsStatus.OK) {
directionsDisplay.setDirections(response);
}
});
}

编辑 2：结果发布

根据要求，这是我使用编辑 1中列出的脚本时发生的结果

<head>
<script src="https://maps.googleapis.com/maps/api/js?key=MYKEY&sensor=false"></script>
        <script type="text/javascript"> 

      var directionsDisplay7656;
      var directionsService7656 = new google.maps.DirectionsService();
      var map7656;

      function initialize() {
        directionsDisplay7656 = new google.maps.DirectionsRenderer();
        var chicago = new google.maps.LatLng(41.850033, -87.6500523);
        var mapOptions = {
          zoom:7,
          mapTypeId: google.maps.MapTypeId.ROADMAP,
          center: chicago
        }
        map7656 = new google.maps.Map(document.getElementById("map_canvas7656"), mapOptions);
        directionsDisplay7656.setMap(map7656);
      }

      function calcRoute() {
        var start = 350 5th Ave New York, NY 10118;
        var end = 2 Lincoln Memorial Cir  Washington, DC 20037;
        var request = {
            origin:start,
            destination:end,
            travelMode: google.maps.DirectionsTravelMode.DRIVING
        };
        directionsService7656.route(request, function(response, status) {
          if (status == google.maps.DirectionsStatus.OK) {
            directionsDisplay7656.setDirections(response);
          }
        });
      }

        </script>
</head>
<body id="itineraries"
 onload="initialize()">

<input id="auth_token" class="hidden" name="" type="hidden" value="VALUEHERE=" />
<div class="wholemap">
<h4>test</h4>

    <div class="map" id="map_canvas7656"></div>
    <div class="route" id="route7656"></div>
    <div class="clear"></div>
    <a id="print7656" target="_blank" class="printmap">Print this map</a>
    <a class="removemap" href="/savedmaps/7656">Delete this map</a>
    <div class="clear"></div>
    </div>
</body

编辑 1：第二次尝试

这一次，我从 Google 的 Directions 示例开始。不幸的是，仍然没有运气。

<script src="https://maps.googleapis.com/maps/api/js?key=MYKEY&sensor=false"></script>
<script type="text/javascript"> 
    <% for savedmap in @maps %>
      var directionsDisplay<%= savedmap.id %>;
      var directionsService<%= savedmap.id %> = new google.maps.DirectionsService();
      var map<%= savedmap.id %>;

      function initialize() {
        directionsDisplay<%= savedmap.id %> = new google.maps.DirectionsRenderer();
        var chicago = new google.maps.LatLng(41.850033, -87.6500523);
        var mapOptions = {
          zoom:7,
          mapTypeId: google.maps.MapTypeId.ROADMAP,
          center: chicago
        }
        map<%= savedmap.id %> = new google.maps.Map(document.getElementById("map_canvas<%= savedmap.id %>"), mapOptions);
        directionsDisplay<%= savedmap.id %>.setMap(map<%= savedmap.id %>);
      }

      function calcRoute() {
        var start = <%= savedmap.from%>;
        var end = <%= savedmap.to %>;
        var request = {
            origin:start,
            destination:end,
            travelMode: google.maps.DirectionsTravelMode.DRIVING
        };
        directionsService<%= savedmap.id %>.route(request, function(response, status) {
          if (status == google.maps.DirectionsStatus.OK) {
            directionsDisplay<%= savedmap.id %>.setDirections(response);
          }
        });
      }
    <% end %>
        </script>

以上是最新版本。原始代码发布如下

Javascript：

<script src="https://maps.googleapis.com/maps/api/js?key=MYKEY&sensor=false"></script>
    <script type="text/javascript"> 

    <% for savedmap in @maps %>
        var map<%= savedmap.id %>;
        var resultx<%= savedmap.id %>;
        var directionsPanel<%= savedmap.id %>;
        var directions<%= savedmap.id %>;
    <% end %>   
        function initialize() {
            var marker = new google.maps.marker(new google.maps.LatLng(-30.368374, -71.089182)); //initialize a marker out in the middle of nowhere
            google.maps.event.addListener(marker, 'click', function() {  
            });  
            <% for savedmap in @maps %>
                map<%= savedmap.id %> = new google.maps.Map(document.getElementById("map_canvas<%= savedmap.id %>"));
                map<%= savedmap.id %>.setCenter(new google.maps.LatLng(42.351505,-71.094455), 15);
                directionsPanel<%= savedmap.id %> = document.getElementById("route<%= savedmap.id %>");
                directions<%= savedmap.id %> = new google.maps.directions(map<%= savedmap.id %>, directionsPanel<%= savedmap.id %>);
                directions<%= savedmap.id %>.load("from: <%= savedmap.from %> to: <%= savedmap.to %>");
                //google.maps.event.addListener(directions<%= savedmap.id %>, "error", handleErrors);

                map<%= savedmap.id %>.addOverlay(marker);
                map<%= savedmap.id %>.addControl(new google.maps.SmallMapControl());
                map<%= savedmap.id %>.addControl(new google.maps.MapTypeControl());
                $('a#print<%= savedmap.id %>').attr('href', 'http://maps.google.com/maps?f=q&q=from: <%= savedmap.from %> to: <%= savedmap.to %>&t=h&z=13&layer=c&pw=2')                    
            <% end %>
          }
       /*function handleErrors(){
               if (directions<%= savedmap.id %>.getStatus().code == G_GEO_UNKNOWN_ADDRESS)

                 alert("No corresponding geographic location could be found for one of the specified addresses. This may be due to the fact that the address is relatively new, or it may be incorrect.\nError code: " + directions<%= savedmap.id %>.getStatus().code);
               else if (directions<%= savedmap.id %>.getStatus().code == G_GEO_SERVER_ERROR)
                 alert("A geocoding or directions request could not be successfully processed, yet the exact reason for the failure is not known.\n Error code: " + directions<%= savedmap.id %>.getStatus().code);

               else if (directions<%= savedmap.id %>.getStatus().code == G_GEO_MISSING_QUERY)
                 alert("The HTTP q parameter was either missing or had no value. For geocoder requests, this means that an empty address was specified as input. For directions requests, this means that no query was specified in the input.\n Error code: " + gdir.getStatus().code);

            //   else if (gdir.getStatus().code == G_UNAVAILABLE_ADDRESS)  <--- Doc bug... this is either not defined, or Doc is wrong
            //     alert("The geocode for the given address or the route for the given directions query cannot be returned due to legal or contractual reasons.\n Error code: " + gdir.getStatus().code);

               else if (directions<%= savedmap.id %>.getStatus().code == G_GEO_BAD_KEY)
                 alert("The given key is either invalid or does not match the domain for which it was given. \n Error code: " + directions<%= savedmap.id %>.getStatus().code);

               else if (directions<%= savedmap.id %>.getStatus().code == G_GEO_BAD_REQUEST)
                 alert("A directions request could not be successfully parsed.\n Error code: " + directions<%= savedmap.id %>.getStatus().code);

               else alert("An unknown error occurred.");

            } */
        </script>

Maps.html.erb 代码

<% for savedmap in @maps %>

    <div class="wholemap">
        <% if savedmap.name != nil and savedmap.name != '' %>
        <h4><%= savedmap.name %></h4>
        <% else %>
        <h4>Untitled Map</h4>
        <% end %>
        <a class="directions" href="#">Show Driving Directions</a>
    <div class="clear"></div>
    <div class="map" id="map_canvas<%= savedmap.id %>"></div>
    <div class="route" id="route<%= savedmap.id %>"></div>
    <div class="clear"></div>
    <a id="print<%= savedmap.id %>" target="_blank" class="printmap">Print this map</a>
    <a class="removemap" href="/savedmaps/<%= savedmap.id %>">Delete this map</a>
    <div class="clear"></div>
    </div>
<% end %>

您尚未为此行程添加任何地图。

4

1 回答 1

0

我认为您在这里发生了一些事情：

1) 在 v3 中，您引用 api 的方式不同。它应该是这样的。

<script src="https://maps.googleapis.com/maps/api/js?v=3.exp&sensor=false"></script>

2）你有初始化函数，但你没有在任何地方调用它，比如 onload。

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

3）您设置地图的方式最好尝试设置要传入的选项数组。

var mapOptions = {
    zoom: 8,
    center: new google.maps.LatLng(-30.368374, -71.089182),
    mapTypeId: google.maps.MapTypeId.ROADMAP
};
map1 = new google.maps.Map(document.getElementById("map_canvas1"), mapOptions);

4）对于标记尝试像这样设置它。

var marker = new google.maps.Marker({
    position: new google.maps.LatLng(-30.368374, -71.089182),
    map: map1,
    title: 'Hello World!'
});
google.maps.event.addListener(marker, 'click', function() {  
    alert('here');
});

查看 Maps API 示例页面 ( https://developers.google.com/maps/documentation/javascript/examples/ )。我认为这应该让你直截了当。

通过让它在没有 Ruby 代码的情况下工作来分解问题。只需先使用 Javascript，然后在获得单个地图工作后重新添加 Ruby。我删除了所有 Ruby 代码，通过上面提到的一些更改，我得到了一个显示标记的地图。

- 克里斯

于 2013-03-18T01:33:09.280 回答