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

最新推荐文章于 2024-03-12 15:56:50 发布

飘然的风

最新推荐文章于 2024-03-12 15:56:50 发布

阅读量715

点赞数

分类专栏： google maps 文章标签： Google JavaScript XHTML HTML ViewUI

google maps 专栏收录该内容

1 篇文章 0 订阅

订阅专栏

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 οnlοad="load()" οnunlοad="GUnload()">
    <div id="mapdiv" style="width: 800px; height: 600px"></div>
</body>
</html>

飘然的风

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
google maps 实现带箭头的线完整实例

google maps 实现带箭头的线完整实例注：实例中没有画线，因为画线google API中有，很容易实现，关键是用箭头表示方向。 &lt;!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"&gt; &lt...
复制链接

扫一扫