谷歌地图两点之间的路线图

本文介绍了谷歌地图两点之间的路线图的处理方法，对大家解决问题具有一定的参考价值，需要的朋友们下面随着小编来一起学习吧！

问题描述

我写了这个无辜的javascript代码，它可以让用户创建两个标记并绘制它们之间的路线。它不起作用，相反，它给出了一个奇怪的错误：

 未捕获的TypeError：无法读取未定义的属性'ya'

有人可以告诉我这里有什么错：

<$ p $如果（isCreateHeadPoint）{
// $ call $ a $ b $ GEvent.addListener（map，click，function（overlay，point））{
添加头部标记
headMarker = new GMarker（point，{icon：redIcon，title：'Head'}）;
map.addOverlay（headMarker）;
isCreateHeadPoint = false;
} else {
//添加尾标记
tailMarker = new GMarker（point，{icon：greenIcon，title：'Tail'}）;
map.addOverlay（tailMarker）;
isCreateHeadPoint = true;
//从头到尾创建一条路径
direction.load（from：+ headMarker.getPoint（）。lat（）+，+ headMarker.getPoint （）.lng（）+to：+ tailMarker.getPoint（）。lat（）+，+ tailMarker.getPoint（）。lng（），{ge tPolyline：true，getSteps：true}）;
//显示路径
map.addOverlay（direction.getPolyline（））;
}
}）;

解决方案

关注，你可能不需要使用 map.addOverlay（ direction.getPolyline（））。在以下示例中，折线会自动添加到地图中：

 <！DOCTYPE html> 
< html> 
< head> 
< meta http-equiv =content-typecontent =text / html; charset = UTF-8/> 
< title> Google地图GDirections< / title> 
< script src =http://maps.google.com/maps?file=api&amp;v=2&amp;sensor=false
 type =text / javascript> ;< /脚本> 
< / head> 
< body onunload =GUnload（）> 
 
< div id =mapstyle =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（新GLatLng（51.50，-0.12），12）; 
 
 GEvent.addListener（map，click，function（overlay，point）{
 if（isCreateHeadPoint）{
 //添加头标记
 headMarker =新的GMarker（点）; 
 map.addOverlay（headMarker）; 
 isCreateHeadPoint = false; 
} 
 else {
 //添加尾标记
 tailMarker = new GMarker（point）; 
 map.addOverlay（tailMarker）; 
 isCreateHeadPoint = true; 
 //创建一个从头到尾的路径
 directions.load（from ：+ headMarker.getPoint（）。lat（）+，+ 
 headMarker.getPoint（）。lng（）+ 
to：+ tailMarker.getPoint（）。lat（）+ ，+ 
 tailMarker.getPoint（）。lng（），
 {getPolyline：true，getSteps：true}）; 
} 
}）; 
< / script> 
< / body> 
< / html>

截图：

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

解决方案

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&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>

Screenshot:

这篇关于谷歌地图两点之间的路线图的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持！