2012-08-07 70 views
1

我正在研究一個產品,該產品將顯示威斯康星州各縣的相關信息。是否有可能以編程方式在地圖上寫下該縣的名字?我見過的唯一選擇是通過創建一個貼圖層。Bing Maps v7在地圖上寫字

回答

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> 
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); 
0

我不知道你用的是什麼的後端,但方式我會做到這一點是執行以下操作:

AJAX調用回服務器,獲取一個對象,返回以下或類似的東西 {CountyName =「鐵」,北緯=「23」,東經= -100}

上回調,儘管如此,並填充自定義信息框。