Windows Phone 7 架构师 CSS 移动应用初学者 C# 3.0 HTML C# 4.0 中级开发 Javascript C#

Windows Phone HTML5 应用中的“立即申请”地图

Khademul Basher

4.87/5 (21投票s)

2013年12月4日

CPOL

3分钟阅读

26369

474

在 Windows Phone HTML5 应用中添加诺基亚 Here 地图。

下载源代码 - 244.8 KB

引言

本教程介绍如何在 Windows Phone Html5 应用中添加 Nokia Here 地图。您知道
Windows phone html5 应用让我们能够使用 HTML、CSS 和 JavaScript 编写应用。在这里，我将使用 HTML、JavaScript 和 CSS 来实现 Here 地图。

本教程介绍了以下主题

创建一个 Windows Phone Html5 应用
为 Here 地图凭据创建一个应用程序 ID 和应用程序令牌
在 Html5 应用中添加 Here 地图
在 Here 地图中显示标记和信息气泡

第 1 部分：创建一个 Windows Phone Html5 应用

以下步骤展示了如何创建一个 Windows Phone Html5 应用。

打开 Microsoft Visual Studio 2012。
打开文件 -> 新建 -> 项目。它将打开以下窗口：
从左侧面板选择 Windows Phone 选项，然后从右侧面板选择 Windows Phone HTML5 App 模板
。
输入项目名称和位置，然后单击“确定”。
这将打开一个新的 Html5 App 项目。应用的解决方案如下所示

MainPage.xaml 的 XAML 代码如下所示

<phone:PhoneApplicationPage
    x:Class="AroundYou.MainPage"
    xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
    xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
    xmlns:phone="clr-namespace:Microsoft.Phone.Controls;assembly=Microsoft.Phone"
    xmlns:shell="clr-namespace:Microsoft.Phone.Shell;assembly=Microsoft.Phone"
    xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
    xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
    mc:Ignorable="d"
    FontFamily="{StaticResource PhoneFontFamilyNormal}"
    FontSize="{StaticResource PhoneFontSizeNormal}"
    Foreground="{StaticResource PhoneForegroundBrush}"
    SupportedOrientations="Portrait" Orientation="Portrait"
    shell:SystemTray.IsVisible="True">
    <Grid x:Name="LayoutRoot" Background="Transparent">
        <phone:Pivot Name="pivotBroser" Margin="0">
            <phone:PivotItem Margin="0" >
                <Grid>
                    <ProgressBar x:Name="pg1" 
                    Value="100"  Margin="20" Maximum="200" 
                    Height="15" IsIndeterminate="True" />
                </Grid>
            </phone:PivotItem>
            <phone:PivotItem Margin="0" >
                <Grid>
                    <phone:WebBrowser x:Name="MapBrowser" 
                    IsScriptEnabled="True"
                          HorizontalAlignment="Stretch"
                          VerticalAlignment="Stretch"
                          Loaded="MapBrowser_Loaded" 
                          Background="Red"
                          NavigationFailed="MapBrowser_NavigationFailed" 
                          LoadCompleted="MapBrowser_LoadCompleted"
                          Navigated="MapBrowser_Navigated" />
                </Grid>
            </phone:PivotItem>
        </phone:Pivot>
    </Grid>
    <phone:PhoneApplicationPage.ApplicationBar>
        <shell:ApplicationBar IsVisible="True" 
        IsMenuEnabled="True" Mode="Minimized">
            <shell:ApplicationBarIconButton IconUri=
            "/Assets/AppBar/appbar.back.rest.png" 
                                            IsEnabled="True" 
                                            Text="back" 
                                            Click="BackApplicationBar_Click"/>
            <shell:ApplicationBarIconButton 
            IconUri="/Assets/AppBar/appbar.next.rest.png" 
                                            IsEnabled="True" 
                                            Text="forward" 
                                            Click="ForwardApplicationBar_Click"/>
            <shell:ApplicationBar.MenuItems>
                <shell:ApplicationBarMenuItem Text="home" 
                Click="HomeMenuItem_Click" />
            </shell:ApplicationBar.MenuItems>
        </shell:ApplicationBar>
    </phone:PhoneApplicationPage.ApplicationBar>
</phone:PhoneApplicationPage>

MainPage 的后端代码如下所示

public partial class MainPage : PhoneApplicationPage
    {
        private string MainUri = "/Html/index.html";
        public MainPage()
        {
            InitializeComponent();
        }
        private void MapBrowser_Loaded(object sender, RoutedEventArgs e)
        {
            MapBrowser.Navigate(new Uri(MainUri, UriKind.Relative));
        }
        private void BackApplicationBar_Click(object sender, EventArgs e)
        {
            MapBrowser.GoBack();
        }
        private void ForwardApplicationBar_Click(object sender, EventArgs e)
        {
            MapBrowser.GoForward();
        }
        private void HomeMenuItem_Click(object sender, EventArgs e)
        {
            MapBrowser.Navigate(new Uri(MainUri, UriKind.Relative));
        }
        private void MapBrowser_NavigationFailed
        (object sender, System.Windows.Navigation.NavigationFailedEventArgs e)
        {
            MessageBox.Show("Navigation to this page failed, 
            	check your internet connection");
        }
        private void MapBrowser_LoadCompleted(object sender, NavigationEventArgs e)
        {
            PivotItem item = (PivotItem)pivotBroser.Items[1];
            pivotBroser.SelectedIndex = 1;
        }
        private void MapBrowser_Navigated(object sender, NavigationEventArgs e)
        {
            
        }
    }

index.html 的默认代码如下所示

 <!DOCTYPE html>
<html>
    <head>
        <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
        <link rel="stylesheet" type="text/css" 
        href="/html/css/phone.css" />
        <title>Windows Phone</title>
    </head>
    <body>
        <div>
            <p>MY APPLICATION</p>
        </div>
        <div id="page-title">
            <p>page title</p>
        </div>
    </body>
</html>

第 2 部分：为 Here 地图凭据创建一个应用程序 ID 和应用程序令牌

因此，要在我们的项目中添加 Here 地图，我们需要身份验证令牌。它包含一个应用程序 Id 和一个应用程序令牌编号。获取身份验证令牌的步骤如下所示

浏览网站 http://developer.here.com。
单击“登录/注册”。
如果您是新用户，请单击“注册”按钮。
它将显示以下弹出窗口。
填写必要的字段，然后单击“注册”。
邮件验证后，使用新的电子邮件和密码登录。
登录后，单击“创建应用”。
它将显示以下 UI。
完成该过程后，您将获得一个应用程序 ID 和应用程序令牌。

注意：有关如何注册和获取身份验证令牌的详细信息，请访问 URL http://developer.nokia.com/Community/Wiki/How_to_Obtain_Your_Own_Nokia_appID_and_Token 并处于登录状态。

第 3 部分：在 Html5 应用中添加 Here 地图

现在是时候添加 Here 地图的代码了。我将在 index.html 页面中使用 JavaScript 和 CSS 添加 Here 地图。

以下代码显示了应用 Here 地图后 index.html 的代码。

<!DOCTYPE html>
<html>
    <head>
        <title>Here Map</title>
		<meta name=viewport content="initial-scale=1.0, 
		maximum-scale=1.0, user-scalable=no"/>
		<script type="text/javascript" 
		charset="UTF-8" 
		src="http://js.cit.api.here.com/se/2.5.3/jsl.js?with=all"></script>
        <style type="text/css">
			#mapContainer {
				width: 100%;
				height: 100%;
				left: 0;
				top: 0;
				position: absolute;
			}
		</style>
    </head>
    <body>
        <div id="mapContainer"></div>
		<script type="text/javascript" id="exampleJsSource">
		    nokia.Settings.set("app_id", "hgdlNkMDgQ1gNTkpTC0U");
		    nokia.Settings.set("app_code", "D0aMgUETHr8LyoDoo1WF6g");
		    var mapContainer = document.getElementById("mapContainer");
		    var map = new nokia.maps.map.Display(mapContainer, {
		        center: [23.709921, 90.407143],
		        zoomLevel: 15
		    });
		</script>
    </body>
</html>

以上代码段的描述

<script type="text/javascript" 
src="http://js.api.here.com/se/2.5.3/jsl.js" charset="utf-8">
</script>

此 JavaScript 文件允许用户创建 Here 地图对象并调用必要的 API。

nokia.Settings.set("app_id", "YOUR APP ID");
nokia.Settings.set("app_code", "YOUR TOKEN");

以上两行代码首先执行并检查身份验证。

var map = new nokia.maps.map.Display(object,object);

此行代码在您的站点中初始化一个地图对象，并将其与作为参数提供的 div 控件绑定。

第 4 部分：在 Here 地图中显示标记和信息气泡

最后，我们将在地图上添加一个标记和信息气泡。为此，我们必须添加以下代码行

// This statement create a new instance of InfoBubbles 
var infoBubbles = new nokia.maps.map.component.InfoBubbles(); 
//This statement create a new instance of StandardMarker 
var standardMarker = new nokia.maps.map.StandardMarker(map.center); 

//This statement bind click event with the Marker and on click shows the infoBubble.

standardMarker.addListener(
                CLICK,
                function (evt) {
                    infoBubbles.openBubble("Dhaka, Bangladesh", standardMarker.coordinate);
                }
            );

// Next we need to add it to the map's object collection so it will be rendered into the map.
map.objects.add(standardMarker);

index.html 的完整代码如下所示

<!DOCTYPE html>
<html>
    <head>
        <title>Here Map</title>
		<meta name=viewport content="initial-scale=1.0, 
		maximum-scale=1.0, user-scalable=no"/>
		<script type="text/javascript" charset="UTF-8" 
		src="http://js.cit.api.here.com/se/2.5.3/jsl.js?with=all"></script>
        <style type="text/css">
			#mapContainer {
				width: 100%;
				height: 100%;
				left: 0;
				top: 0;
				position: absolute;
			}
		</style>
    </head>
    <body>
        <div id="mapContainer"></div>
		<script type="text/javascript" id="exampleJsSource">
		    nokia.Settings.set("app_id", "hgdlNkMDgQ1gNTkpTC0U");
		    nokia.Settings.set("app_code", "D0aMgUETHr8LyoDoo1WF6g");
		    var mapContainer = document.getElementById("mapContainer");
		    var infoBubbles = new nokia.maps.map.component.InfoBubbles();
		    var map = new nokia.maps.map.Display(mapContainer, {
		        center: [23.709921, 90.407143],
		        zoomLevel: 15,
		        components: [infoBubbles]
		    });
		    var standardMarker = new nokia.maps.map.StandardMarker(map.center);
		    var TOUCH = nokia.maps.dom.Page.browser.touch,
                CLICK = TOUCH ? "tap" : "click";
		    standardMarker.addListener(
                CLICK,
                function (evt) {
                    infoBubbles.openBubble
                    ("Dhaka, Bangladesh", standardMarker.coordinate);
                }
            );
		    map.objects.add(standardMarker);
		</script>
    </body>
</html>

此项目的 UI 如下所示


加载中	映射

结论

希望阅读本教程后，您已经了解了如何在 Windows Phone Html5 应用中添加 Here 地图。在 WebBrowser 控件中加载地图需要一些时间，因此我添加了一个 ProgressBar 控件，以便给用户留下良好的印象。为此，我添加了一个 Pivot 控件。附加的 zip 文件包含所有代码。