Question

我正在使用Bing Maps创建一个简单的Web应用程序。当我在BlackBerry Z30中加载应用程序时，在开始和结束目标之间绘制的路径会变形。请找到附带的屏幕截图。但这适用于所有三星设备。有什么工作可以让它适用于BlackBerry吗？下面是我用来绘制起点和终点目的地之间的线的示例代码。

function drawRouteShape(points, color){             
    var cfg = {    
        strokeColor: new Microsoft.Maps.Color(255,100,0,100), 
        strokeThickness: 5
     };

     this.map.entities.push(new Microsoft.Maps.Polyline(points, cfg));
};

points是lat和long的数组。截图示例：

Sample screenshot

附件是我的index.html中的代码。这是我在此示例应用程序中的整个index.html，您可以在Blackberry浏览器中轻松重现该问题。

    <!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">
      function GetMap()
      {   

         map = new Microsoft.Maps.Map(document.getElementById("mapDiv"), 
                           {credentials: "Ai2jw9BTQAIwRGYifdh",
                            center: new Microsoft.Maps.Location(48.76767, 9.171919),
                            mapTypeId: Microsoft.Maps.MapTypeId.road,
                            mapViewRestriction:Microsoft.Maps.Map.OneWorldOnly,
                            zoom: 7});

             console.log("Microsoft.Maps.Map.OneWorldOnly = " + Microsoft.Maps.Map.OneWorldOnly);               
              var start = {
                 latitude: 49.201809,
                 longitude: 9.50106

               };
               var start2 = {
                 latitude: 49.202451999999994,longitude:9.501092

               };
                var start3 = {
                 latitude: 49.20245799999999,longitude:9.50128
               };
                var start4 = {
                 latitude: 49.20238799999999,longitude:9.504112

               };
                var start5 = {
                 latitude: 49.20225899999999,longitude:9.504631999999999

               };
                var start6 = {
                 latitude: 49.20170099999999,longitude:9.506010999999999

               };
                var start7 = {
                 latitude: 49.201620999999996,longitude:9.505941

               };
                var start8 = {
                 latitude: 49.200258,longitude:9.505641

               };
                var start9 = {
                 latitude: 49.199191,longitude:9.505217

               };
                var start10 = {
                 latitude: 49.198831,longitude:9.505271
               };
                var start11 = {
                latitude: 49.198240999999996,longitude:9.505732

               };
                var start12 = {
                 latitude: 49.197967999999996,longitude:9.505791

               };
                var start13 = {
                 latitude: 49.197641,longitude:9.505700000000001

               };
                var start14 = {
                 latitude: 49.197029,longitude:9.505367000000001

               };
                var start15 = {
                 latitude: 49.196938,longitude:9.505121

               };
                var start16 = {
                latitude: 49.197142,longitude:9.50364

               };
                var start17 = {
                 latitude: 49.197351,longitude:9.502712

               };
                var start18 = {
                 latitude: 49.197818,longitude:9.501328

               };
                var start19 = {
                latitude: 49.197871,longitude:9.500411000000001

               };
                var start20 = {
                latitude: 49.197378,longitude:9.500378000000001
               };
                var start21 = {
                 latitude:49.196192,longitude:9.500389000000002

               };
                var start22 = {
                latitude: 49.195768,longitude:9.500309000000001

               };
                var start23 = {
                 latitude: 49.1927,longitude:9.499011000000001

               };
                var start24 = {
                latitude: 49.192711,longitude:9.498941000000002

               };
                var start25 = {
                 latitude: 49.192609000000004,longitude:9.498742000000002

               };
                var start26 = {
                 latitude: 49.192491000000004,longitude:9.498780000000002

               };
                var start27 = {
                 latitude: 49.19244200000001,longitude:9.498919000000003

               };
                var start28 = {
                 latitude:49.19211000000001,longitude:9.498817000000003

               };
                var start29 = {
                latitude:49.19115000000001,longitude:9.498699000000002

               };
                var start30 = {
                latitude: 49.19030200000001,longitude:9.498828000000001

               };
                var start31 = {
                 latitude: 49.18958900000001,longitude:9.499091000000002

               };
                var start32 = {
                 latitude:49.18869800000001,longitude:9.499660000000002

               };
                var start33 = {
                 latitude: 49.18818800000001,longitude:9.500142000000002

               };
                var start34 = {
                 latitude: 49.18751800000001,longitude:9.500969000000001

               };
                var start35 = {
                 latitude: 49.185699000000014,longitude:9.504010000000001

               };
                var start36 = {
               latitude: 49.185158000000015,longitude:9.504761

               };
                var start37 = {
                 latitude: 49.184272000000014,longitude:9.505668

               };
                var start38 = {
                 latitude: 49.18345200000002,longitude:9.50622

               };
                 var start39 = {
                 latitude: 49.183591000000014,longitude:9.506767

               };
                var start40 = {
                 latitude: 49.18374100000001,longitude:9.508189

               };
                var start41 = {
               latitude: 49.183650000000014,longitude:9.508731

               };
                var start42 = {
                 latitude: 49.183371000000015,longitude:9.509127999999999

               };
                var start43 = {
                 latitude: 49.180748000000015,longitude:9.509738999999998

               };
                var start44 = {
                 latitude: 49.18036200000002,longitude:9.509706999999999

               };
                var start45 = {
                 latitude: 49.18036200000002,longitude:9.510297

               };
               var start46 = {
                 latitude: 49.180458000000016,longitude:9.511858

               };


              updateStartPin(start);
              updateDestPin(start46);
        var points= [start,start2,start3,start4,start5,start6,start7,start8,start9,start10,start11,start12,start13,start14,start15,start16,start17,start18,start19,start20,start21,start22,start23,start24,start25,start26,start27,start28,start29,start30,start31,start32,start33,start34,start35,start36,start37,start38,start39,start40,start41,start42,start43,start44,start45,start46];

        var color = {blue: 6,
                    green: 232,
                    red: 187};
         drawRouteShape(points, color);

      };

       function  updateStartPin(point) {

            var startPinOptions = {
                icon:this.startIconImg,
                width:this.startIconWidth,
                height:this.startIconHeight,
                zIndex: 50
            };
            this.startPin = new Microsoft.Maps.Pushpin(point, startPinOptions);

            console.log("Set start pin");
            this.map.entities.push(this.startPin);
        };

        function updateDestPin(point) {
         console.log("pointdest = " + point);

        var destPinOptions = {
            icon:this.destIconImg,
            width:this.destIconWidth,
            height:this.destIconHeight,
            zIndex: 50
        };


        };
        function drawRouteShape(points, color){

          var cfg = {
            //strokeColor: new Microsoft.Maps.Color(255, color.red, color.green, color.blue),
            strokeColor: new Microsoft.Maps.Color(255,100,0,100), 
            strokeThickness: 5
        };

         this.map.entities.push(new Microsoft.Maps.Polyline(points, cfg));


        };

      </script>
   </head>
   <body onload="GetMap();">
      <div id='mapDiv' style="position:relative; width:1920px; height:1080px;"></div>       
   </body>
</html>

这是我的示例应用程序的整个index.html，您可以在黑莓浏览器中轻松重现该问题 }

Answer 1

经过大量测试（12种不同的浏览器），我发现这是在我正确测试的每一个浏览器上呈现的。我无法访问黑莓Z30，但由于我测试的所有浏览器都工作（旧的和新的），这个问题的唯一合乎逻辑的原因是Blackberry Z30浏览器中的渲染问题。 Bing Maps中的折线只不过是svg图像。唯一一次我得到的东西看起来与你所展示的相似的是当我缩小了很多并且折线的厚度使它看起来像一个填充的多边形，但是当你放大时，这个被纠正了。作为测试，请尝试在浏览器中运行此HTML。这是您所在行的Bing地图中生成的SVG图像。

<!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"/>
</head>
<body>
    <svg xmlns="http://www.w3.org/2000/svg" width="100%" height="100%"><path style="pointer-events: visiblePainted;" fill="none" fill-opacity="1" fill-rule="evenodd" stroke="#640064" stroke-dasharray="none" stroke-linecap="butt" stroke-opacity="1" stroke-width="5" d="M 573 99 L 573 88 L 575 88 L 608 89 L 614 91 L 630 101 L 630 103 L 626 127 L 621 146 L 622 153 L 627 163 L 628 168 L 627 174 L 623 185 L 620 186 L 603 183 L 592 179 L 576 171 L 565 170 L 565 178 L 565 200 L 564 207 L 549 262 L 548 262 L 546 264 L 546 266 L 548 266 L 547 272 L 545 290 L 547 305 L 550 317 L 556 333 L 562 342 L 572 354 L 607 387 L 616 396 L 626 412 L 633 427 L 639 424 L 656 422 L 662 423 L 667 428 L 674 475 L 674 482 L 680 482 L 699 480" /></svg>
</body>
</html>

Bing地图在BlackBerry上无法正常运行

1 个答案: