Bing必应地图中国API-画线与添加多边形

2011-05-24 14:31:20|  分类： Bing&Google|字号订阅

在必应地图上画线的功能应用也很广泛：显示从出发地到目的地的行驶路径，或者显示某一辆车的历史行驶轨迹，等等。
上一讲中我们提到shape类可以是点、线或多边形。在初始化shape类的时候，可以通过输入参数VEShapeType.Polyline来实现一个折线示例。需要注意的是，可以通过指定多个经纬度来确定一条折线。例如：
var shape = new VEShape(VEShapeType.Polyline, [new VELatLong(39.9022,116.3321), new VELatLong(39.9833,116.3423),new VELatLong(39.9946,116.3571)]);
这条折线包含了两个线段。
此外，shape类提供了许多方法来设置shape的各种属性，例如：
shape.SetLineWidth(3);     设置折线的宽度
shape.SetLineColor(new VEColor(0,150,100,1.0));     设置折线的颜色
 
接下来，我们定义一个画线函数来完整的实现这一功能：
  function AddPolyline()
         {
            var ll = map.GetCenter();
            var lat = ll.Latitude;
            var lon = ll.Longitude;
            var shape = new VEShape(VEShapeType.Polyline, [new VELatLong(lat-0.1,lon-0.1), 
                                                  new VELatLong(lat+0.1,lon-0.1),
                                                  new VELatLong(lat+0.1,lon), 
                                                  new VELatLong(lat-0.1,lon), 
                                                  new VELatLong(lat-0.1,lon+0.1),
                                                  new VELatLong(lat+0.1,lon+0.1)]);
            shape.SetTitle('我的折线');
            shape.SetDescription('显示一段折线');
            map.AddShape(shape);
         }
这段代码应该很好理解了，首先取屏幕中心经纬度，然后参考这个经纬度分别取6个点，确定一条5折线。

作为必应地图的三项最基本应用之一，添加多边形的作用也非常广泛。例如，在物流、导航、监控领域，设置一个监控区域，或者观察目标状态的变化。如果我们学习了上两讲的内容，那么这一讲的内容应该内度并不大。
首先我们要初始化一个多边形：
var shape = new VEShape(VEShapeType.Polygon, [new VELatLong(lat,lon-0.15),
                                                   new VELatLong(lat+0.1,lon-0.05),
                                                   new VELatLong(lat+0.1,lon+0.05),
                                                   new VELatLong(lat,lon+0.15),
                                                   new VELatLong(lat-0.1,lon+0.05),
                                                   new VELatLong(lat-0.1,lon-0.05)]);
此处lat和lon为当前地图中心的纬度和经度。
可以看到，多边形的初始化参数为VEShapeType.Polygon，至少三个点确定一个多边形。
我们还可以通过shape类的各种方法来指定多边形的属性：线条粗细、颜色，填充颜色，多边形描述信息等等。这一讲我们增加一个新的内容，即多边形的描述可以支持html语法。
var infobox = "<div style='width:309px;'>You can add html codes into the info box or change the style of the info box. You can design and show any info box you want!<br>"
                    +"<a href='http://msdn2.microsoft.com/en-us/library/bb412553.aspx' target='_blank'>Click here to find out more.</a><br></div>"
                    +"<embed src='http://images.soapbox.msn.com/flash/soapbox1_1.swf' quality='high' width='309px' height='272px' wmode='transparent' type='application/x-shockwave-flash' pluginspage='http://macromedia.com/go/getflashplayer' flashvars='c=v&v=a4b53303-d58c-450e-a01d-069c9bcb5fe9' ></embed><br /><a href='http://soapbox.msn.com/video.aspx?vid=a4b53303-d58c-450e-a01d-069c9bcb5fe9' target='_blank' title='Virtual Earth - Bird&#39;s eye view and 3D'>Video: Virtual Earth - Bird&#39;s eye view and 3D</a>";
上面的代码看似很长，其实就是定义了一个包含html语法的字符串。然后通过调用shape.SetDescription(infobox)设置多边形的描述内容。
 
下面让我们看一下添加多边形函数的完整实现：
  function AddPolygon()
         {
            var ll = map.GetCenter();
            var lat = ll.Latitude;
            var lon = ll.Longitude;
            var shape = new VEShape(VEShapeType.Polygon, [new VELatLong(lat,lon-0.15),                                        
                       new VELatLong(lat+0.1,lon-0.05),                                    
                       new VELatLong(lat+0.1,lon+0.05),                                    
                       new VELatLong(lat,lon+0.15),                                        
                       new VELatLong(lat-0.1,lon+0.05),                                    
                       new VELatLong(lat-0.1,lon-0.05)]);
         
           shape.SetTitle("<h2>Custom Pin</h2>");
           shape.SetDescription(infobox);
           //Add the shape the the map
           map.AddShape(shape);
         }
并且在html body中增加一个控制链接：
<div><a href='#' οnclick='AddPolygon();'>增加多边形</a></div>
记住，别忘了在代码中定义infobox字符串。