在WP8上创建地图图块?

时间:2014-06-13 02:20:41

标签: c# javascript windows-phone-8 map bing-maps

我一直在使用谷歌地图API一段时间用于交互式雷达地图,但我现在正在为Windows Phone工作。遇到很多问题,将这个JS代码转换为WP8地图控件的工作地图图块......

有人可以帮助我吗?我知道这个HTML没用,但只是想知道从哪里开始。谷歌地图API中存在的东西,例如地图X,Y,(在256x256瓦片网格中)等似乎根本不存在于Windows手机地图控件中。这是我遇到的主要问题......

    <html>
  <head>
    <meta name="viewport" content="initial-scale=1.0, user-scalable=no">
    <meta charset="utf-8">
    <title>Atmosphere Backend</title>
    <style>
      html, body, #map-canvas {
        height: 100%;
        margin: 0px;
        padding: 0px
      }
    </style>
    <script src="https://maps.googleapis.com/maps/api/js?v=3.exp"></script>
    <script>
function initialize() {
  var mapOptions = {
    zoom: 4,
    center: new google.maps.LatLng(-33, 151),
    disableDefaultUI: true
  }
  var map = new google.maps.Map(document.getElementById('map-canvas'),
                                mapOptions);

    tileNEX = new google.maps.ImageMapType({
    getTileUrl: function(tile, zoom) {
        return "http://mesonet.agron.iastate.edu/cache/tile.py/1.0.0/nexrad-n0q-900913/" + zoom + "/" + tile.x + "/" + tile.y +".png?"+ (new Date()).getTime();
    },

    tileSize: new google.maps.Size(256, 256),
    opacity:0.50,
    name : 'NEXRAD',
    isPng: true
});


  map.overlayMapTypes.push(tileNEX);

}

google.maps.event.addDomListener(window, 'load', initialize);

    </script>
  </head>
  <body>
    <div id="map-canvas"></div>
  </body>
</html>

1 个答案:

答案 0 :(得分:1)

要开始使用,您可以在此处找到有关Windows Phone 8中地图的一些文档:http://msdn.microsoft.com/en-us/library/windowsphone/develop/jj207045(v=vs.105).aspx应该注意的是,Windows Phone 8.1使用WP8中新的/不同的地图控件。

要开始使用,您可以像往常一样在Windows Phone 8中向页面添加地图。

<phone:PhoneApplicationPage
    x:Class="SpatialDataViewer.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"
    xmlns:m="clr-namespace:Microsoft.Phone.Maps.Controls;assembly=Microsoft.Phone.Maps"
    FontFamily="{StaticResource PhoneFontFamilyNormal}"
    FontSize="{StaticResource PhoneFontSizeNormal}"
    Foreground="{StaticResource PhoneForegroundBrush}"
    SupportedOrientations="PortraitOrLandscape" Orientation="Portrait"
    shell:SystemTray.IsVisible="True">

    <Grid x:Name="LayoutRoot" Background="Transparent">
        <m:Map Name="MyMap"/>  
    </Grid>
</phone:PhoneApplicationPage> 

接下来展开项目的属性部分并打开WMAppMainiifest文件。打开Capabilities选项卡并检查ID_CAP_MAP。

您可以从代码中为此地图添加图块层:

using Microsoft.Phone.Controls;
using Microsoft.Phone.Maps.Controls;
using System;
using System.Windows;

namespace SampleApp
{
    public partial class MainPage : PhoneApplicationPage
    {
        public MainPage()
        {
            this.InitializeComponent();

            MyMap.Loaded += (s, e) =>
            {
                string tileURL = "http://mesonet.agron.iastate.edu/cache/tile.py/1.0.0/nexrad-n0q-900913/{zoomLevel}/{x}/{y}.png?" + DateTime.Now.ToString();
                MyMap.TileSources.Add(new TileSource(tileURL));
            };
        }
    }
}

可以在此处找到有关TileSource类的文档:http://msdn.microsoft.com/en-us/library/windowsphone/develop/microsoft.phone.maps.controls.tilesource(v=vs.105).aspx

您还可以在此处找到有关UriFormat的文档:http://msdn.microsoft.com/en-us/library/windowsphone/develop/microsoft.phone.maps.controls.tilesource.uriformat(v=vs.105).aspx