Virtual Earth V6.3 (Bing) 地图控件中高缩放级别的折线问题
Polyline issue at high zoom level in Virtual Earth V6.3 (Bing) map control
我有一个带有 Virtual Earth V6.3 控件的应用程序,使用纯 javascript 添加折线,如以下嵌入单个 HTML5 网页的示例代码片段所示:
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>VE Map with Polyline</title>
<script type="text/javascript" src="http://ecn.dev.virtualearth.net/mapcontrol/mapcontrol.ashx?v=6.3"></script>
<script type="text/javascript">
function MapLoad() {
// load map
var _map = new VEMap('Map');
_map.LoadMap();
// center point in NY City
var _center = new VELatLong(40.75, -73.99);
// zoom level
_map.SetCenterAndZoom(_center, 14);
// set Map style
_map.SetMapStyle(VEMapStyle.Shaded);
// polyline layer
var _layerPolyline = new VEShapeLayer();
// sample polyline array of coordinates
var _arrPoints = [];
_arrPoints.push(new VELatLong(40.78, -73.984));
_arrPoints.push(new VELatLong(40.76, -73.989));
_arrPoints.push(new VELatLong(40.75, -73.99));
_arrPoints.push(new VELatLong(40.74, -73.991));
_arrPoints.push(new VELatLong(40.73, -73.992));
_arrPoints.push(new VELatLong(40.72, -73.993));
_arrPoints.push(new VELatLong(40.72, -73.994));
_arrPoints.push(new VELatLong(40.73, -73.995));
_arrPoints.push(new VELatLong(40.73, -73.996));
_arrPoints.push(new VELatLong(40.74, -73.997));
// polyline object properties
var _polyLine= new VEShape(VEShapeType.Polyline, _arrPoints);
_polyLine.HideIcon();
_polyLine.SetLineColor(new VEColor(0, 0, 255, 1));
_polyLine.SetFillColor(new VEColor(0, 0, 255, 0));
_polyLine.SetLineWidth(4);
// add polyline to layer
_layerPolyline.AddShape(_polyLine);
// add layer to map
_map.AddShapeLayer(_layerPolyline);
}
</script>
</head>
<body onload="MapLoad();">
<div id="Map" style="position:absolute; height:98%; width:98%;"></div>
</body>
</html>
它在任何缩放级别都工作得很好。然而,本质上相同的代码在使用 ASP.NET 4.5 网络表单时在实际应用程序中会产生奇怪的结果,即:多段线在高缩放级别(大约高于 15)时消失。
问: 关于问题的根本原因以及如何解决它有什么想法吗?谢谢
更新:问题已解决升级到Bing地图AJAX控制,版本7.0(工作: DEMO:公交路线折线在任何缩放级别都可见)。感谢 Ricky Brundritt (@rbrundritt)。
可能的问题与缺少的 UTF-9 元标记或文档类型有关。 V6.3 真的很旧,需要指定以下元标记和文档类型:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
另一个可能的问题是您在加载地图时指定了任何凭据。这违反了 Bing 地图的使用条款。
_map = new VEMap('MapNYC');
_map.SetCredentials("YOUR_BING_MAPS_KEY");
_map.LoadMap();
您可以在此处找到有关如何创建 Bing 地图帐户和密钥的文档:
https://msdn.microsoft.com/en-us/library/gg650598.aspx
https://msdn.microsoft.com/en-us/library/ff428642.aspx
我建议为 "Public Websites" 创建一个 "basic" 密钥。这将使您每年可以进行 125,000 次免费交易。
综上所述,您不应该使用 v6.3。它在 5 年前被 V7 取代,很快就会接近生命周期的尽头。作为结束该版本生命周期的一部分,v6.3 的文档在一年多前已下线。
我有一个带有 Virtual Earth V6.3 控件的应用程序,使用纯 javascript 添加折线,如以下嵌入单个 HTML5 网页的示例代码片段所示:
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>VE Map with Polyline</title>
<script type="text/javascript" src="http://ecn.dev.virtualearth.net/mapcontrol/mapcontrol.ashx?v=6.3"></script>
<script type="text/javascript">
function MapLoad() {
// load map
var _map = new VEMap('Map');
_map.LoadMap();
// center point in NY City
var _center = new VELatLong(40.75, -73.99);
// zoom level
_map.SetCenterAndZoom(_center, 14);
// set Map style
_map.SetMapStyle(VEMapStyle.Shaded);
// polyline layer
var _layerPolyline = new VEShapeLayer();
// sample polyline array of coordinates
var _arrPoints = [];
_arrPoints.push(new VELatLong(40.78, -73.984));
_arrPoints.push(new VELatLong(40.76, -73.989));
_arrPoints.push(new VELatLong(40.75, -73.99));
_arrPoints.push(new VELatLong(40.74, -73.991));
_arrPoints.push(new VELatLong(40.73, -73.992));
_arrPoints.push(new VELatLong(40.72, -73.993));
_arrPoints.push(new VELatLong(40.72, -73.994));
_arrPoints.push(new VELatLong(40.73, -73.995));
_arrPoints.push(new VELatLong(40.73, -73.996));
_arrPoints.push(new VELatLong(40.74, -73.997));
// polyline object properties
var _polyLine= new VEShape(VEShapeType.Polyline, _arrPoints);
_polyLine.HideIcon();
_polyLine.SetLineColor(new VEColor(0, 0, 255, 1));
_polyLine.SetFillColor(new VEColor(0, 0, 255, 0));
_polyLine.SetLineWidth(4);
// add polyline to layer
_layerPolyline.AddShape(_polyLine);
// add layer to map
_map.AddShapeLayer(_layerPolyline);
}
</script>
</head>
<body onload="MapLoad();">
<div id="Map" style="position:absolute; height:98%; width:98%;"></div>
</body>
</html>
它在任何缩放级别都工作得很好。然而,本质上相同的代码在使用 ASP.NET 4.5 网络表单时在实际应用程序中会产生奇怪的结果,即:多段线在高缩放级别(大约高于 15)时消失。
问: 关于问题的根本原因以及如何解决它有什么想法吗?谢谢
更新:问题已解决升级到Bing地图AJAX控制,版本7.0(工作: DEMO:公交路线折线在任何缩放级别都可见)。感谢 Ricky Brundritt (@rbrundritt)。
可能的问题与缺少的 UTF-9 元标记或文档类型有关。 V6.3 真的很旧,需要指定以下元标记和文档类型:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
另一个可能的问题是您在加载地图时指定了任何凭据。这违反了 Bing 地图的使用条款。
_map = new VEMap('MapNYC');
_map.SetCredentials("YOUR_BING_MAPS_KEY");
_map.LoadMap();
您可以在此处找到有关如何创建 Bing 地图帐户和密钥的文档:
https://msdn.microsoft.com/en-us/library/gg650598.aspx
https://msdn.microsoft.com/en-us/library/ff428642.aspx
我建议为 "Public Websites" 创建一个 "basic" 密钥。这将使您每年可以进行 125,000 次免费交易。
综上所述,您不应该使用 v6.3。它在 5 年前被 V7 取代,很快就会接近生命周期的尽头。作为结束该版本生命周期的一部分,v6.3 的文档在一年多前已下线。