Maps for ASP.NET Web Forms
カスタムソースを追加する
主な機能 > マップのソース > カスタムソースを追加する

Bing Maps に事前定義されている３つのタイプに加え、マップでカスタムソースを使用することもできます。  カスタムソースを使用するには、SourceプロパティをCustomSourceに設定し、タイルソースを取得するためのJavascript関数を定義する必要があります。このトピックでは、マップのカスタムソースとしてGoogle Mapsを使用する方法を示します。  

デザイナの場合

  1. スマートタグをクリックして［C1Mapsのタスク］メニューを開きます。
  2. Sourceプロパティの横にあるドロップダウン矢印をクリックし、CustomSourceを選択します。
  3. コントロールを右クリックし、コンテキストメニューから［プロパティ］を選択してプロパティウィンドウを開きます。
  4. CustomSourceプロパティグループを展開します。
  5. MaxZoomを22、MinZoomを１、TileWidthを256、TileHeightを256、およびGetUrlをgetUrlに設定します。

ソースビューで、次のようにgetUrl関数を定義します。

ソースビューの場合

  1. 以下に、マップのソースを変更し、カスタムソースプロパティを設定した後のC1Mapsコントロールの最終的なマークアップを示します。

    ソースビュー
    コードのコピー 
      <c1:C1Maps ID="C1Maps1" runat="server" Height="500px"
  Width="600px" Source="CustomSource">
      <CustomSource GetUrl="getUrl" MinZoom="1" MaxZoom="22"
  TileHeight="256" TileWidth="256"/>
</c1:C1Maps>

  2. <head></head>タグの間に、Google Mapsタイルを取得するgetUrl関数のスクリプトを次のように追加します。

    ソースビュー
    コードのコピー 
    <script type="text/javascript">
     function getUrl(zoom, x, y) {
     var uriFormat =
     "http://mt{subdomain}.google.cn/vt/lyrs=r&hl=en-us&gl=cn&x={x}&y={y}&z={zoom}";
      var subdomains = ["0", "1", "2", "3"];
      var subdomain = subdomains[(y * Math.pow(2, zoom) + x) % subdomains.length];
      return uriFormat.replace("{subdomain}", subdomain).replace("{x}", x).
      replace("{y}", y).replace("{zoom}", zoom);
                   }
</script>

コードの場合

  1. 次のコードを Page_Load イベントに追加して、マップのソースを変更し、カスタムソース設定を指定します。
    C#
    コードのコピー 
    C1Maps1.Source = C1.Web.Wijmo.Controls.
C1Maps.MapSource.CustomSource;
C1Maps1.CustomSource.MaxZoom = 22;
C1Maps1.CustomSource.MinZoom = 1;
C1Maps1.CustomSource.TileWidth = 256;
C1Maps1.CustomSource.TileHeight = 256;
C1Maps1.CustomSource.GetUrl = "getUrl";

    VB
    コードのコピー 
    C1Maps1.Source = C1.Web.Wijmo.Controls.
C1Maps.MapSource.CustomSource
C1Maps1.CustomSource.MaxZoom = 22
C1Maps1.CustomSource.MinZoom = 1
C1Maps1.CustomSource.TileWidth = 256
C1Maps1.CustomSource.TileHeight = 256
C1Maps1.CustomSource.GetUrl = "getUrl"
  2. プロジェクトを実行します。

ここまでの成果

次の図は、C1MapsコントロールにGoogleマップタイルを表示したところです。

 

 

Copyright © GrapeCity, Inc. All rights reserved.