google maps 实现带箭头的线完整实例

zdz8207

浏览: 254179 次
性别:
来自: 深圳

最近访客更多访客>>

9626142

somdip

sushuiyuzhou

chamcon

博主相关

博客

微博

相册

留言

关于我

文章分类

社区版块

存档分类

博客分类：

google maps

Google JavaScript XHTML HTML

google maps 实现带箭头的线完整实例

注：实例中没有画线，因为画线google API中有，很容易实现，关键是用箭头表示方向。

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
    "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
    <meta http-equiv="content-type" content="text/html; charset=utf-8"/>
    <title>Google Maps JavaScript API Example</title>
    <script src="http://maps.google.com/maps?file=api&v=2&key=ABQIAAAA4ZZxnijCQhlZlf57igoGExTwM0brOpm-All5BF6PoaKBxRWWERR0mYEVnCnlZi8Qmoq3uoivZ9cIgQ"
            type="text/javascript"></script>
    <script type="text/javascript">
    //<![CDATA[
var map = null;
var arrowIcon = null;
    function load() {
      if (GBrowserIsCompatible()) {
        map = new GMap2(document.getElementById("mapdiv"));
        map.setCenter(new GLatLng(39.917, 116.397), 5);
  //箭头图标
        arrowIcon = new GIcon();
        arrowIcon.iconSize = new GSize(24,24);
        arrowIcon.shadowSize = new GSize(1,1);
        arrowIcon.iconAnchor = new GPoint(12,12);
        arrowIcon.infoWindowAnchor = new GPoint(0,0);
      }
   var point1 = new GLatLng(39.917, 116.397);
  var gmarker = new GMarker(point1);
  map.addOverlay(gmarker);

var point2 = new GLatLng(38.017, 116.217);
map.addOverlay(new GMarker(point2));

var point3 = new GLatLng(38.017, 115.217);
map.addOverlay(new GMarker(point3));

  var points = [point1,point2,point3];
  //arrowHead(points);
  midArrows(points);

}

        //一个箭头
        function arrowHead(points)
        {
            var p1=points[points.length-1];
            var p2=points[points.length-2];
            var dir = bearing(p2,p1);
            var dir = Math.round(dir/3) * 3;
            while (dir >= 120) {dir -= 120;}

            arrowIcon.image = "http://www.google.com/intl/en_ALL/mapfiles/dir_"+dir+".png";
            map.addOverlay(new GMarker(p1, arrowIcon));
        }

        //多个箭头
        function midArrows(points)
        {
   if(points.length < 2) return;

            for (var i=1; i < points.length; i++)
            {
                var p1=points[i-1];
                var p2=points[i];
                var dir = bearing(p1,p2);
                var dir = Math.round(dir/3) * 3;
                while (dir >= 120) {dir -= 120;}

                arrowIcon.image = "http://www.google.com/intl/en_ALL/mapfiles/dir_"+dir+".png";
                map.addOverlay(new GMarker(points[i], arrowIcon));
            }
        }

        var degreesPerRadian = 180.0 / Math.PI;
        function bearing( from, to )
        {
            var lat1 = from.latRadians();
            var lon1 = from.lngRadians();
            var lat2 = to.latRadians();
            var lon2 = to.lngRadians();

            var angle = - Math.atan2( Math.sin( lon1 - lon2 ) * Math.cos( lat2 ), Math.cos( lat1 ) * Math.sin( lat2 ) - Math.sin( lat1 ) * Math.cos( lat2 ) * Math.cos( lon1 - lon2 ) );
            if ( angle < 0.0 )
                angle += Math.PI * 2.0;
            angle = angle * degreesPerRadian;
            angle = angle.toFixed(1);

return angle;
}

    //]]>
    </script>
</head>
<body onload="load()" onunload="GUnload()">
    <div id="mapdiv" style="width: 800px; height: 600px"></div>
</body>
</html>

分享到：

准备总结一下Linux服务器运维使用经验，写 ... | Google Maps Street View 快捷键全屏

2010-04-12 14:55
浏览 4725
评论(0)
分类:Web前端
查看更多

发表评论

您还没有登录,请您登录后再发表评论

最近访客更多访客>>

博主相关

文章分类

社区版块

存档分类

最新评论