1

私はウィスコンシンの個々の郡に関する情報を表示する製品に取り組んでいます。プログラムで郡の名前を地図に書くことは可能ですか？これを行うために私が見た唯一のオプションは、タイルレイヤーを作成することです。

4

3 に答える 3

2

これを実現する方法についてのブログ投稿をここに書きました：http：//rbrundritt.wordpress.com/2012/03/31/label-pushpins-in-bing-maps-v7/

コードサンプルは次のとおりです。

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html>
   <head>
      <title></title>
      <meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
      <script type="text/javascript" src="http://ecn.dev.virtualearth.net/mapcontrol/mapcontrol.ashx?v=7.0"></script>

      <script type="text/javascript">
         var map = null;         

         function GetMap()
         {
            // Initialize the map
            map = new Microsoft.Maps.Map(document.getElementById("myMap"),
                  {
                    credentials:"YOUR_BING_MAPS_KEY"
                  }); 

            var labelPin = new Microsoft.Maps.Pushpin(new Microsoft.Maps.Location(0,0),{
                text : 'Custom Label',    //The text for the label
                typeName : 'labelPin',     //Assign a CSS class to the pin
                anchor : new Microsoft.Maps.Point(0,0),  //Reset the anchor point of the pin to make aligning the text easier.
                textOffset : new Microsoft.Maps.Point(-45,0) //Adjust textOffset point for better label positioning
                //Adjust the x value as you see fit for better centering of text
            });

            map.entities.push(labelPin);
         } 
      </script>
      <style>
      /* Allow div of pushpin to display overflowing content */
      .labelPin{
        overflow:visible !important;
      }

      /* Hide the default pushpin, Alternatively point the icon property of the pushpin to a transparent image */
      .labelPin img{
        display:none;
      }

      /*Use this to style the text*/
      .labelPin div{
        white-space:nowrap;
        color:blue !important;
      }
      </style>
   </head>
   <body onload="GetMap();">
    <div id='myMap' style="position:relative; width:800px; height:600px;"></div>
   </body>
</html>
于 2012-09-01T12:22:44.177 に答える
1

カスタム画像で画鋲を使用し、カスタム画像を透明な画像に設定するだけで、表示されるのは画鋲のテキストだけです。簡単にするために、以下に示すように、base64でエンコードされた透明な画像をインラインで直接指定することもできます。

var pushpinOptions = {
    icon: "data:image/gif;base64,R0lGODlhAQABAIAAAP///////yH5BAEKAAEALAAAAAABAAEAAAICTAEAOw==",/* Transparent 1px x 1px gif with a 1bit palette, created with gimp and encoded with base64 tool in linux.*/
    text: 'Your county name goes here',
    draggable: false,
    visible: true,
};
var pushpin = new Microsoft.Maps.Pushpin(new Microsoft.Maps.Location(47.6, - 122.33), pushpinOptions);
于 2012-08-08T05:57:57.523 に答える
0

バックエンドに何を使用しているかはわかりませんが、これを実現する方法は次のとおりです。

ajaxがサーバーにコールバックし、次のようなオブジェクトを取得します{CountyName ='Iron'、latitude = '23'、longitude = -100}

コールバックでそれを繰り返し、カスタム情報ボックスに入力します。

于 2012-08-17T16:20:41.033 に答える