-1

我在标签中显示谷歌地图时遇到问题，

这是我尝试过但没有成功的方法，在 IE 中工作正常，但在 Firefox 中，选项卡没有显示 corect 并且 Route Planner 上的行不起作用。A点到B点-应该有一条线..

请参阅此链接：http ://s1.xfactor-online.com/

我做了什么荣？

这是我的 HTML

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Route Planner</title>
<script type="text/javascript" src="/js/script.js"></script>
<script type="text/javascript" src="/js/tabs.js"></script>
<script type="text/javascript" src="/js/jquery.js"></script>
<script type="text/javascript" src="/js/jquery.maphilight.min.js"></script>
<link rel="stylesheet" href="/css/stil.css" type="text/css" media="screen" />
<meta name="viewport" content="initial-scale=1.0, user-scalable=no" />
<script type="text/javascript" src="http://maps.google.com/maps/api/js?sensor=false"></script>
<script type="text/javascript">
   var directionDisplay;
      var directionsService = new google.maps.DirectionsService();
      var map;

function initialize_route() {
      var myOptions = {
      zoom: 10,
      center: new google.maps.LatLng(42.662068,23.388755),
      mapTypeId: google.maps.MapTypeId.ROADMAP
    }
    map = new google.maps.Map(document.getElementById("map_go"), myOptions);
    directionsDisplay = new google.maps.DirectionsRenderer({
        'map': map,
        'preserveViewport': true,
    });
    directionsDisplay.setPanel(document.getElementById("directions_panel"));
    google.maps.event.addListener(directionsDisplay, 'directions_changed',
      function() {
        if (currentDirections) {
          oldDirections.push(currentDirections);
          setUndoDisabled(false);
        }
        currentDirections = directionsDisplay.getDirections();
      });
    setUndoDisabled(true);
    calcRoute();
  }

function calcRoute() {
      var start = document.getElementById("start").value;
      var end = document.getElementById("end").value;           
        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 loadScript_route() {
   var script = document.createElement("script");
   script.type = "text/javascript";
   script.src = "http://maps.google.com/maps/api/js?sensor=false&callback=initialize_route";
   document.body.appendChild(script);
    }
   window.onload = loadScript_route;
</script>
<script>
function initialize_map() {
  var myLatlng = new google.maps.LatLng(42.662068,23.388755);
     var myOptions = {
        zoom: 16,
        center: myLatlng,
        mapTypeId: google.maps.MapTypeId.ROADMAP
   }
  var map = new google.maps.Map(document.getElementById("map_go_full"), myOptions);
     var pos1 = new google.maps.LatLng(42.662068,23.388755);
  var image = 'http://icongal.com/gallery/download/446950/32/png';
  var marker = new google.maps.Marker({
  position: pos1,
  map: map,
  icon: image
   });  
  marker.setMap(map);
   }

function loadScript_map() {
   var script = document.createElement("script");
   script.type = "text/javascript";
   script.src = "http://maps.google.com/maps/api/js?sensor=false&callback=initialize_map";
   document.body.appendChild(script);
    }
   window.onload = loadScript_map;
</script>
<script type="text/javascript">
$(document).ready(function(){
    $("#tabs li").click(function() {
        $("#tabs li").removeClass('active');
        $(this).addClass("active");
        $(".tab_content").hide();
        var selected_tab = $(this).find("a").attr("href");
        $(selected_tab).fadeIn();
        return false;
    });
});
</script>
<script type="text/javascript">
    window.onload = function () {
        initialize_route();
        initialize_map();
    }
</script>
</head>

<body>
<div id="tabs_wrapper">
 <div id="tabs_container">
  <ul id="tabs">
   <li><a href="#tab1" onclick="loadScript_map();">Map</a></li>
   <li><a href="#tab2" onclick="loadScript_route();" >Route Planning</a></li>
  </ul>
 </div>
 <div id="tabs_content_container">
  <div id="tab1" class="tab_content" style="display: block;">
   <div id="map_go_full"></div>
  </div>
  <div id="tab2" class="tab_content">
   <div id="map">
    <table>
     <tr>
      <td><b>Start position:</b>&nbsp;<br />
       <input type="text" size="35" id="start"  class="poz" name="from" value=""/></td>
      <td><b>Destination:&nbsp;</b>Address (optional), city, country<br />
       <input type="text" size="135" id="end" name="to" class="des" value="Iasi" /></td>
      <td align="right" colspan="2"><br />
       <input class="but" value="Calculate route" type="submit" onclick="calcRoute();" /></td>
     </tr>
    </table>
    * Please enter your position to calculate route.
    <table>
     <tr>
      <td class="hs"><b>Satelite Map</b></td>
      <td class="hd"><b>Directions</b></td>
     </tr>
     <tr>
      <td valign="top"><div id="map_go"></div></td>
      <td valign="top"><div class="hdir">
        <div id="directions_panel"></div>
       </div>
       <div id="undo"></div></td>
     </tr>
    </table>
   </div>
  </div>
 </div>
</div>
</body>
</html>

谢谢

4

1 回答 1

0

首先，您应该更具体地解决您的问题，并请尝试使用拼写器，您不需要说一口流利的英语，但至少要善意地自动纠正您的单词。

我没有发现 IE 和 Firefox 之间有什么不同，尽管控制台在路线规划标签中显示错误：Warning: you have included the Google Maps API multiple times on this page. This may cause unexpected errors.

这可能是您的问题，检查您的代码是否重复包含谷歌地图并删除它们，每个文件只需要一个。

于 2013-05-02T17:30:39.380 回答