顯示誤差在2個標籤映射的jQuery

-1

這是wath我已經嘗試，但沒有sucess，在IE中工作得很好，但在Firefox的標籤沒有顯示corect和路線規劃器上的線路不工作。 A點到POIN乙 - 有768,16是一條線..

Wath我已經做了榮？

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

感謝

來源

2013-05-02 Lucica

首先，你應該對你的問題更具體，請嘗試使用拼寫，你不需要會講流利的英語，但至少善待自動改正你的話。

我沒有發現任何IE和火狐之間的不同，雖然控制檯顯示了錯誤的路線規劃標籤：Warning: you have included the Google Maps API multiple times on this page. This may cause unexpected errors.

這可能是你的問題，檢查你的代碼重複包括谷歌地圖和刪除它們，你只需要每個文件一個。

來源

2013-05-02 17:30:39

Hugo請現在看看，我更新了我的HTML代碼的帖子。 – Lucica 2013-05-02 18:14:51

Google Maps API腳本在頭部加載了3次，每次加載loadScript_map和loadScripot_route函數。 – geocodezip 2013-05-03 00:11:51

顯示誤差在2個標籤映射的jQuery

回答

相關問題