1

我正在开发一种产品，该产品将显示有关威斯康星州各个县的信息。是否可以以编程方式在地图上写下县名？我见过的唯一选择是创建一个平铺层。

4

3 回答 3

2

我在这里写了一篇关于如何实现这一点的博客文章：http ://rbrundrit.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 回答