Question

我正在开发一种产品，展示有关威斯康星州个别县的信息。是否有可能以编程方式在地图上写出县名？我见过的唯一选择是创建一个图块层。

Answer 1

我在这里撰写了一篇关于如何实现这一目标的博文：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>

Answer 2

只需使用带有自定义图像的图钉，并将自定义图像设置为透明图像，所以您看到的只是图钉文字。为了方便起见，您甚至可以直接指定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);

Answer 3

我不确定你在后端使用的是什么，但我通过以下方式完成此任务：

ajax回调服务器，获取一个返回以下内容或类似内容的对象 {CountyName ='Iron'，纬度='23'，经度= -100}

回调中的

迭代然后填充自定义信息框。

Bing Maps v7在地图上写字

3 个答案: