可以将文章内容翻译成中文,广告屏蔽插件可能会导致该功能失效(如失效，请关闭广告屏蔽插件后再试):
问题:
I have written this innocent javascript code, which lets the user create two markers and plot the route between them. It doesnt work, instead, it gives a weird error:
Uncaught TypeError: Cannot read property 'ya' of undefined
Can someone suggest me whats wrong here:
// 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()); } });
回答1:
Following from your solution, you may not need to use map.addOverlay(direction.getPolyline()) at all. The polyline gets added to the map automatically in the following example:
<!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&v=2&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>
Screenshot:
回答2:
Oh I got it ... for some weird reason, I thought direction.load() is a blocking call. The following works:
// 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()); });
