2014-06-27 40 views
0

正常工作,我创建使用Bing地图一个简单的Web应用程序。当我在BlackBerry Z30中加载应用程序时,开始和结束目的地之间的路线变得扭曲。请查找附件截图。 但是,这在所有三星设备上都可以很好地工作。是否有任何解决方法可以使其适用于BlackBerry? 下面是我用来绘制开始和结束目的地之间的界线的示例代码。Bing地图不是在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示例应用程序,您可以在黑莓浏览器中轻松地重现问题。

<!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,你可以很容易地重现该问题在黑莓浏览器 }

+0

请有助于理解这个问题? – user2733130

+0

作为起点试一试,看是否可以重现这个与样本之一:http://www.bingmapsportal.com/ISDK/AjaxV7#Shapes1如果你能与样品重现它那么问题很可能与浏览器在黑莓Z30浏览器中。如果它确实有效,那么在代码中发布更完整的代码示例,以便我们可以查看是否具有适当的元数据,地图的doctype和CSS样式。 – rbrundritt

+0

只有当有很多拉长点彼此靠近时,问题才可重现。我附加了我的示例项目的index.html。这个问题可以在代码中用相同的硬编码经纬度重现。是否有任何配置要添加以避免这种情况? – user2733130

回答

0

大量测试后(12级不同的浏览器),我发现,这在我正确测试的每个浏览器上呈现。我没有访问黑莓Z30,但因为所有的浏览器我测试工作(新老)针对此问题的唯一合乎逻辑的理由是在黑莓Z30浏览器渲染问题。 Bing地图中的折线只不过是一张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> 
+0

是的..上面的HTML呈现在我的黑莓浏览器罚款。只有当我在黑莓中缩放地图时才会遇到真正的问题。那么有什么办法可以解决这个缩放时发生的问题吗?我甚至减少笔画粗细太...但没有luck..even使用strokeDashArray ... – user2733130

+0

很奇怪,因为我拉这个SVG右出Bing地图的生成的HTML。所以它只发生在你缩放的时候,而不是当地图完成缩放的时候? – rbrundritt

+0

即使在地图完成缩放之后,它也会发生。我在缩放地图后拍摄了截图。任何解决方案?甚至在其他黑莓设备上也会出现这种情况,所以不仅仅是Z30。 – user2733130