学习使用Bing Maps Silverlight Control(三):向地图添加标记

4 自定义标记

1、添加图钉(Pushpin)。可以在XAML中的m:Map控件标签中直接加入Pushpin标签进行图钉的添加,其中的Location是图钉的经纬度坐标:

<m:Pushpin Location="33.845881352,105.165628188471"></m:Pushpin>

并且可以直接在设计视图中预览,效果如下:

4.1

还可以使用Pushpin类可以在Bing Maps控件上添加一个图钉标记。示例如下:

//通过鼠标左键单击向地图上添加一个标记
private void map_MouseLeftButtonDown(object sender, MouseButtonEventArgs e)
{
    //定义一个Location类型的变量来记录当前点击位置的经纬度
    Location location;
//获取当前点击相对地图控件边界的位置
    Point point = e.GetPosition(sender as Map);

    //将像素坐标转换为经纬度坐标
    this.map.TryViewportPointToLocation(point, out location);

    //新建一个“图钉”
    Pushpin pushpin = new Pushpin();
    pushpin.Location = location;

    //将图钉添加到地图上
    this.map.Children.Add(pushpin);
}
运行效果如下:
4.1
2、添加自定义图层(MapLayer)。
首先需要在XAML中的m:Map控件标签里添加一个MapLayer控件:
<m:Map CredentialsProvider="AkzZURoD0H2Sle6Nq_DE7pm7F3xOc8S3CjDTGNWkz1EFlJJkcwDKT1KcNcmYVINU"
x:Name="map" MouseLeftButtonDown="map_MouseLeftButtonDown">
    <m:MapLayer x:Name="imglayer"></m:MapLayer>
</m:Map>
然后就可以在后台代码中对MapLayer上进行添加各种控件的添加操作:
//通过鼠标左键单击向地图上添加一个图片控件
private void map_MouseLeftButtonDown(object sender, MouseButtonEventArgs e)
{
    //定义一个Location类型的变量来记录当前点击位置的经纬度
    Location location;

    //获取当前点击相对地图控件边界的位置
    Point point = e.GetPosition(sender as Map);

    //将像素坐标转换为经纬度坐标
    this.map.TryViewportPointToLocation(point, out location);

    //新加一个图片控件
    Image image = new Image();
    image.Source = new BitmapImage(new Uri("http://localhost/w-brand.png", UriKind.RelativeOrAbsolute));
    image.Stretch = Stretch.None;

    //图像默认起始位置是:鼠标点击的位置为图像左上角的位置,即:0,0
    //可以设置偏移:
    //垂直方向1为图片高的100%,上正下负;
    //水平方向1为图片宽的100%,左正右负。
    PositionOrigin position = new PositionOrigin(0.5, 0.5);

    //这里的imglayer是在xaml中定义的MapLayer
    //通过AddChild将image控件添加到地图的location位置上,相对于location的偏移为position
    this.imglayer.AddChild(image, location, position);
}
注:MapLayer上可以AddChild所有UIElement类型的元素,Image只是一个示例。
运行效果:
4.4
3、添加路径(MapPolyline)和多边形(MapPolygon)。
首先可以在XAML中的m:Map控件标签中直接加入MapPolyline、MapPolygon标签进行路径和多边形的添加,其中的Locations是图形的各个顶点的经纬度坐标集合,Stroke是描边颜色,StrokeThickness是描边宽度,Fill是填充颜色,Opacity是透明度。
<m:MapPolygon Locations="10,10 5,120 60,90" Fill="Red" StrokeThickness="5" Opacity="0.8"></m:MapPolygon>
<m:MapPolyline Locations="-10,50 -10,-100" Stroke="Green" StrokeThickness="5"></m:MapPolyline>
可以在设计视图中即时预览到效果:
4.5
除了在前台直接添加,还可以使用代码在后台动态添加,以下分别使用路径和多边形做两个例子。
1)使用MapPolyline定义路径,示例如下:
//添加新的路径到地图
private void btn_AddPolyline_Click(object sender, RoutedEventArgs e)
{
    //新路径
    MapPolyline polyline = new MapPolyline();
    //描边颜色
    polyline.Stroke = new System.Windows.Media.SolidColorBrush(System.Windows.Media.Colors.Green);
    //描边宽度
    polyline.StrokeThickness = 5;
    //透明度
    polyline.Opacity = 1;
    //通过Location集合来定义路径各个拐点的位置
    polyline.Locations = new LocationCollection()
    {
        new Location(34.9294740237661,87), 
        new Location(37.7814222409819, 85.979148275863),
        new Location(40.2865067209496, 89.219382650863),
        new Location(29.8104584489867, 95.943992025863)
    };
    //向Map控件中添加路径
    this.map.Children.Add(polyline);
}
2)使用MapPolygon定义多边形,示例如下:
//添加新的多边形到地图
private void btn_AddPolygon_Click(object sender, RoutedEventArgs e)
{
    //新多边形
    MapPolygon polygon = new MapPolygon();
    //填充颜色
    polygon.Fill = new System.Windows.Media.SolidColorBrush(System.Windows.Media.Colors.Red);
    //描边颜色
    polygon.Stroke = new System.Windows.Media.SolidColorBrush(System.Windows.Media.Colors.Yellow);
    //描边宽度
    polygon.StrokeThickness = 5;
    //透明度
    polygon.Opacity = 0.7;

    //通过Location集合来定义多边形各个顶点的位置
    //数量不限,三个顶点就是三角形,四个就是四边形,五个就是五边形。。。
    polygon.Locations = new LocationCollection() { 
                new Location(34.9294740237661,107.506492025863), 
                new Location(37.7814222409819, 105.979148275863), 
                new Location(40.2865067209496, 109.219382650863),
                new Location(29.8104584489867, 115.943992025863)};
    //向Map控件中添加多边形
    this.map.Children.Add(polygon);
}
运行效果如下:
4.4
以上就是对地图控件一些简单的自定义图层的添加。

(以上内容部分参考自:http://www.cnblogs.com/beniao/archive/2010/01/13/1646446.html,请访问原博客查看更多。)


输了你,赢了世界又如何...
原文地址:https://www.cnblogs.com/xwgli/p/3013765.html