65.9K
CodeProject 正在变化。 阅读更多。
Home

添加自定义图钉 - Bing 地图 SDK - Windows 8

VijayaMalla
starIconstarIconstarIconstarIcon
emptyStarIcon
starIcon

4.50/5 (2投票s)

2013年7月31日

CPOL

5分钟阅读

viewsIcon

22751

使用 Bing Maps SDK 向地图添加自定义图钉。

引言

我开始使用 Bing Maps SDK（可在以下链接找到）创建基本地图并添加各种点。起初，我直接在地图控件本身添加新位置，然后通过代码隐藏添加自定义图钉。 

下面的帖子提供了一个非常简单的技巧，介绍如何在 Windows 8 应用程序中将自定义图钉添加到 Bing Maps。

背景

自 Beta 版发布以来，我一直对使用 Bing Maps SDK 感兴趣，并在 2013 年 Build 会议之后深入研究。我经常在各种场合尝试使用它。我已经完成/遵循了 MSDN 网站上的基本示例，然后继续进行我自己的创作/使用。

使用代码 

在您的计算机上安装 Bing Maps SDK 的步骤

  • 您必须使用 Windows 8 计算机，并在计算机上安装 VS 2012（Express 版或任何付费版）。
  • 在此处下载 SDK： http://visualstudiogallery.msdn.microsoft.com/ebc98390-5320-4088-a2b5-8f276e4530f9
  • 安装 SDK 后，您必须为您的应用程序获取一个密钥。请按照下面的链接操作，您将只需几个步骤即可为您的应用程序获取密钥： bingmapsportal 
  • 有了这两样东西，您就可以开始在您的 Windows 8 应用程序中添加 Bing Maps 了。

遵循以下步骤，您就可以开始在您的 Windows 8 应用程序中使用 Bing Maps 了： 

  1. 在 VS 2012 中创建一个新项目（我在这里使用的是 Express 版，任何版本都可以）。

    2. 我在左侧选择了 Windows Store Application，然后选择了 Blank Template，并为其命名。

  2. VS 创建了您的空白 Windows 8 应用程序后，您的解决方案资源管理器中将包含以下文件：

    3.  

    • 我们将主要处理MailnPage.xaml文件，但在我们开始编写将 Bing Maps 添加到我们应用程序的代码之前，我们必须
    • 将解决方案配置平台从“Any CPU”更改为“x64”（您也可以选择以下任何一个选项：“x86”、“x64”、ARM）。
      • 在解决方案资源管理器中右键单击解决方案文件，您将看到以下窗口，请进行标记为红色的更改，然后单击 OK。

    • 通过右键单击 References 并按照下图中标示的部分操作，将以下引用添加到您的项目中。
      • Bing Maps for C#, C++, or Visual Basic
      • Microsoft Visual C++ runtime package

  3. 现在，让我们欢庆这个重要的时刻，因为我们所做的步骤将使我们的应用程序能够使用 Bing Maps。
    • 打开MainPage.xaml。
    • 为 Bing Maps 添加一个 using 语句。
    • 在应用程序的主网格中添加一个 Bing Maps 控件，如下所示。

    您可能已经知道如何在 XAML 文件中添加 using 语句。

    xmlns:bm ="using:Bing.Maps"

    xmlns 定义命名空间，"bm"是我们为引用指定的名称。我们将使用 bm 来创建/引用我们应用程序中的 Bing Maps 引用。而 using 语句用于 Bing Maps。

    现在，如果您查看 Grid，我们添加了一个新的 Map 控件。

    <bm:Map x:Name="bingMap" Credentials="PLEASE PUT YOUR KEY HERE">  </bm:Map>

    我们使用 Name 标签为其命名，而 Credentials 属性用于提供我们一开始获取的 Bing Maps 密钥。

    现在，您就可以开始编写一些后端代码来读取数据（位置）并将图钉放置在地图上。

  4. 我将先展示代码，然后解释我在这里做了什么。
    5. var locationList = new List<Location>
{
    new Location( double.Parse("+42.32460"),  double.Parse("-071.069970")),
    new Location( double.Parse("+37.242268"),  double.Parse("-081.248898")),
    new Location( double.Parse("+25.672805"), double.Parse("-080.379635")),
    new Location( double.Parse("+42.082917"), double.Parse("-070.925096")),
};

var i = 1;

foreach (var location in locationList)
{
    var pushpin = new Pushpin(){Text = i.ToString(), 
           Background = new SolidColorBrush(Color.FromArgb(100,100,100,(byte)i))};
    MapLayer.SetPosition(pushpin,location);
    bingMap.Children.Add(pushpin);
    i++;
}

由于这只是一个小型入门级应用程序，用于告诉您如何将 Bing Maps 添加到您的应用程序中，所以我没有做任何花哨的事情。

在 MainPage 构造函数中，我添加了上述代码。

  1. 我正在创建一个 Location 类型对象的列表（locationlist）。一个 Location 对象接受两个 double 值，一个用于纬度，另一个用于经度。
  2. 由于我们将这四个点添加到地图上，所以我为其设置了一个循环。
  3. 我为上述四个 Location 对象创建了一个自定义 Pushpin 对象，提供了标识文本和用于区分它们的颜色。
  4. MapLayer 是对我们添加的地图的引用。因此，我们设置地图图层的位置，也就是我们的图钉对象应该位于地图上的位置，然后将它们添加到 bingMap 中，而 bingMap 是我们在 MainPage.xaml 中放置的地图控件的 ID。
  5. 运行应用程序，您将看到以下内容。
我在模拟器模式下运行了应用程序，看到了以下内容：

我知道我选择了一个错误的背景颜色，但是您可以在地图上看到那四个位置（我不得不放大才能看到这个视图，但默认情况下缩放级别显示的是整个世界）。

您可以看到 1 和 4 靠近波士顿，2 在弗吉尼亚州，3 在佛罗里达州。

您可以将背景颜色更改为您想要的任何颜色，也可以添加自定义图像而不是圆点。在图钉上添加任何文本，并进行更多自定义。

需要记住的事情

  • 确保您获取了 Bing Maps 密钥。
  • 确保您安装了 Bing Maps SDK。
  • 在将引用添加到应用程序之前，请确保将解决方案模式更改为 x86、x64 或 ARM 中的任何一种。提前更改否则会引发错误。
  • 请务必多加练习，并在下方添加您的链接，供更多人探索 SDK。
© . All rights reserved.