Fatal编程技术网
  • ruby-on-rails/
  • Ruby on rails 为Ruby on Rails应用程序将Google Maps API V2转换为V3

Ruby on rails 为Ruby on Rails应用程序将Google Maps API V2转换为V3

ruby-on-rails google-maps-api-3

Ruby on rails 为Ruby on Rails应用程序将Google Maps API V2转换为V3,ruby-on-rails,google-maps-api-3,google-maps-api-2,Ruby On Rails,Google Maps Api 3,Google Maps Api 2,谢谢你能提供的任何帮助 摘要我有一个在Ruby on Rails中构建的Google Maps API V2地图应用程序，我正在尝试转换为V3。我已经使用来自的建议更新了我现有的javascript。但是，我的地图仍然没有显示在页面上 详细信息：使用V2，此代码将在单个网页上显示一系列独特的点a到点B地图。一个用户可以有许多已保存的地图，此代码将显示这些地图。现在，地图画布和路线无法解析 再次感谢你的帮助 编辑3：问题是calcRoute（） 我已经查看了所有内容，并发现在开始添加开始变量和结束

谢谢你能提供的任何帮助

摘要我有一个在Ruby on Rails中构建的Google Maps API V2地图应用程序，我正在尝试转换为V3。我已经使用来自的建议更新了我现有的javascript。但是，我的地图仍然没有显示在页面上

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

再次感谢你的帮助

编辑3：问题是calcRoute（）

我已经查看了所有内容，并发现在开始添加开始变量和结束变量之前，映射是有效的。这些变量看起来应该起作用，但是方向和路线没有出现。在加载这些变量时，我是否做错了什么？我已经提供了我的原始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);
}
});
}
编辑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


var方向显示7656；
var directionsService7656=新的google.maps.DirectionsService（）；
var map7656；
函数初始化（）{
directionsDisplay7656=新的google.maps.DirectionsRenderer（）；
var chicago=new google.maps.LatLng（41.850033，-87.6500523）；
变量映射选项={
缩放：7，
mapTypeId:google.maps.mapTypeId.ROADMAP，
中心：芝加哥
}
map7656=新的google.maps.Map（document.getElementById（“Map_canvas7656”），mapOptions）；
方向显示7656.setMap（map7656）；
}
函数calcRoute（）{
var start=纽约州纽约市第五大道350号，邮编10118；
var end=华盛顿哥伦比亚特区林肯纪念堂2号，邮编20037；
var请求={
来源：start，
目的地:完，
travelMode:google.maps.Directions travelMode.DRIVING
};
directionsService7656.路由（请求、功能（响应、状态）{
if（status==google.maps.directionstatus.OK）{
方向显示7656.设置方向（响应）；
}
});
}
测试
您还没有为这次旅行添加任何地图。

我想您在这里有一些事情要做：

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

<script src="https://maps.googleapis.com/maps/api/js?v=3.exp&sensor=false"></script>
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');
});
请查看“地图API示例”页面（）。我想这会让你明白的

通过在不使用Ruby代码的情况下让它工作来解决问题。只需先使用Javascript，然后在单个映射正常工作后再添加Ruby即可。我去掉了所有的Ruby代码，只做了上面提到的几处修改，就得到了一个带有标记的地图

--克里斯

克里斯，谢谢你的回复！实际上，我从directions示例开始，通过慢慢添加Ruby来尝试解决这个问题。不幸的是，当我添加
var-start=
和
var-end=
时，首先会抛出它。我知道这些字段将在我的数据中循环，因为我尝试将它们打印到HTML中，但由于某些原因，V3JavaScript不会接受。我已经发布了我的最新版本。感谢您提供的任何帮助！Ruby处理完HTML后，你能发布它是什么吗？由于GoogleMaps是Javascript端的，一旦服务器端脚本（Ruby）说出了它需要做的事情，就很容易调试。此时我们只处理Javascript（以防Ruby输出导致问题）。对不起，Chris，现在正在备份一个项目。我会尽快回复你的。克里斯，我回来了，已经发布了Ruby输出的结果。我无法在画布中解析地图。谢谢你的帮助！好的，尝试通过添加宽度和高度来更新map DIV行：
我认为这样应该可以显示地图。 
<% 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 %>

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

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

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);

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');
});