我正在研究一個產品,該產品將顯示威斯康星州各縣的相關信息。是否有可能以編程方式在地圖上寫下該縣的名字?我見過的唯一選擇是通過創建一個貼圖層。Bing Maps v7在地圖上寫字
1
A
回答
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}
上回調,儘管如此,並填充自定義信息框。
相關問題
- 1. bing地圖ajax v7集羣
- 2. Bing Maps V7上下文菜單
- 3. 中心Bing地圖V7圍繞點陣
- 4. Bing地圖v7不顯示導航欄
- 5. 如何在Bing地圖上創建自定義圖釘v7
- 6. bing地圖v7製作網址
- 7. Bing地圖AJAX API V7地理位置回電
- 8. Google Maps API與Multimap/Bing地圖API
- 9. 從Bing Maps提取地圖信息
- 10. 如何在Bing Maps v7 API中添加路線指引?
- 11. 當在一個AJAX面板內Bing Maps v7問題
- 12. Bing Maps SDK - Silverlight
- 13. Multimarkers在Bing地圖
- 14. Windows Phone 7 - Bing Maps
- 15. Bing地圖streetview
- 16. 如何禁用鼠標滾動Bing Maps v7中的標記
- 17. Bing Maps v8 JS API
- 18. MS MapCruncher - Silverlight Bing Maps
- 19. Silverlight Bing Maps - Pushpin
- 20. Bing Maps和MVVM
- 21. 兵地圖V7到V8遷移
- 22. Bing地圖.v7如何使用地圖之外的鏈接引用圖釘?
- 23. bing地圖從v7升級到v8錯誤與userMapView
- 24. Internet Explorer 6不會顯示Bing Ajax v7地圖
- 25. Bing Maps - Javascript vs Silverlight
- 26. Bing地圖插圖 - 如何使用Bing Maps V8交互式SDK在Bing地圖上添加自定義數據(座標)的集羣圖層?
- 27. WP7上的bing地圖限制視口
- 28. 嵌入bing地圖 - 圖釘
- 29. 在Bing Maps v7中創建多個infowindows並呈現特定於針的數據
- 30. Bing Maps API v8 - 圖釘SVG URI圖像