谷歌地圖兩點

之間的情節路線我寫了這個無辜的javascript代碼，它可以讓用戶創建兩個標記，繪製它們之間的路由。它不工作，相反，它提供了一個奇怪的錯誤：谷歌地圖兩點

Uncaught TypeError: Cannot read property 'ya' of undefined

有人建議我什麼是錯在這裏：

// called upon a click 
GEvent.addListener(map, "click", function(overlay,point) { 
    if (isCreateHeadPoint) { 
     // add the head marker 
     headMarker = new GMarker(point,{icon:redIcon,title:'Head'}); 
     map.addOverlay(headMarker); 
     isCreateHeadPoint = false; 
    } else { 
     // add the tail marker 
     tailMarker = new GMarker(point,{icon:greenIcon,title:'Tail'}); 
     map.addOverlay(tailMarker); 
     isCreateHeadPoint = true; 
     // create a path from head to tail 
     direction.load("from:" + headMarker.getPoint().lat()+ ", " + headMarker.getPoint().lng()+ " to:" + tailMarker.getPoint().lat() + "," + tailMarker.getPoint().lng(), { getPolyline: true, getSteps: true }); 
     // display the path 
     map.addOverlay(direction.getPolyline()); 
    } 
});

來源

2010-05-17 user315067

繼from your solution，你可能不需要使用map.addOverlay(direction.getPolyline())在所有。折線被在下面的例子中自動添加到地圖：

<!DOCTYPE html> 
<html> 
<head> 
    <meta http-equiv="content-type" content="text/html; charset=UTF-8"/> 
    <title>Google Maps GDirections</title> 
    <script src="http://maps.google.com/maps?file=api&amp;v=2&amp;sensor=false" 
      type="text/javascript"></script> 
</head> 
<body onunload="GUnload()"> 

    <div id="map" style="width: 400px; height: 300px"></div> 

    <script type="text/javascript"> 

    var map = new GMap2(document.getElementById("map")); 
    var directions = new GDirections(map); 
    var isCreateHeadPoint = true; 
    var headMarker, tailMarker; 

    map.setCenter(new GLatLng(51.50, -0.12), 12); 

    GEvent.addListener(map, "click", function(overlay,point) { 
     if (isCreateHeadPoint) { 
     // add the head marker 
     headMarker = new GMarker(point); 
     map.addOverlay(headMarker); 
     isCreateHeadPoint = false; 
     } 
     else { 
     // add the tail marker 
     tailMarker = new GMarker(point); 
     map.addOverlay(tailMarker); 
     isCreateHeadPoint = true; 
     // create a path from head to tail 
     directions.load("from:" + headMarker.getPoint().lat()+ ", " + 
         headMarker.getPoint().lng() + 
         " to:" + tailMarker.getPoint().lat() + "," + 
         tailMarker.getPoint().lng(), 
         { getPolyline: true, getSteps: true }); 
     } 
    }); 
    </script> 
</body> 
</html>

截圖：

Google Maps GDirections

來源

2010-05-17 12:11:36

該死！你偷走了我發現正確答案的喜悅;）魔法是var directions = new GDirections（map）; 十分感謝您的回答 – user315067 2010-05-17 12:28:33

@ amarsh - 阿南德：大聲笑:) ......你也可以刪除'getPolyline：從'GDirectionsOptions' TRUE'選項，因爲默認情況下它仍然會加載折線時在地圖附加到方向對象。 – 2010-05-17 12:33:04

謝謝你。那是所有剪切/粘貼代碼。再次感謝您的幫助 – user315067 2010-05-17 12:39:21

哦，我知道了......一些奇怪的原因，我認爲方向。 load（）是一個阻塞調用。以下作品：

// called upon a click 
GEvent.addListener(map, "click", function(overlay,point) { 
    if (isCreateHeadPoint) { 
     // add the head marker 
     headMarker = new GMarker(point,{icon:redIcon,title:'Head'}); 
     map.addOverlay(headMarker); 
     isCreateHeadPoint = false; 
    } else { 
     // add the tail marker 
     tailMarker = new GMarker(point,{icon:greenIcon,title:'Tail'}); 
     map.addOverlay(tailMarker); 
     isCreateHeadPoint = true; 
     // create a path from head to tail 
     direction.load("from:" + headMarker.getPoint().lat()+ ", " + headMarker.getPoint().lng()+ " to:" + tailMarker.getPoint().lat() + "," + tailMarker.getPoint().lng(), { getPolyline: true, getSteps: true }); 
    } 
}); 

// called when the direction.load() returns 
GEvent.addListener(direction,"load", function() { 
    // display the path 
    map.addOverlay(direction.getPolyline()); 
});

來源

2010-05-17 12:03:43 user315067

谷歌地圖兩點

回答

相關問題