Question

我正在检索该位置可用的纬度，经度和数量值的网络应用程序。我能够根据位置在地图上显示推针，并能够在推针周围绘制圆圈。如果圆圈很大，则表示该位置或图钉位置处有大量可用。我可以显示那些但是圆圈是重叠的，这是很好的，因为位置非常接近但我的问题是有任何方式显示深色的圆形交叉，因为它显示白色或透明的颜色。请看看代码，帮助将受到高度赞赏。我在后面的代码中检索数据并使用字符串生成器将其传递给java脚本。 lats []，longs []和value []是纬度，经度和数量值。

<%@ Page Language="C#" AutoEventWireup="true" CodeFile="Default3.aspx.cs" Inherits="Default3_aspx"%>

<!DOCTYPE html>

<html xmlns="http://www.w3.org/1999/xhtml">
   <head id="Head1" runat="server">
      <title>Display on Map</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() {

              var map = new Microsoft.Maps.Map(document.getElementById("mapMap"),
                                {
                                    credentials: "Bingo map key",
                                    center: new Microsoft.Maps.Location(42.274260, -83.365717),
                                    mapTypeId: Microsoft.Maps.MapTypeId.road,
                                    zoom: 8
                                });

              // var backgroundColor = new Microsoft.Maps.Color(10, 100, 0, 0);
              var backgroundColor = new Microsoft.Maps.Color(10, 0, 0, 0)
              var borderColor = new Microsoft.Maps.Color(150, 200, 0, 0);
              //Earth's mean radius in KM is 6371km.
              var R = 6371, lat1, long1, d, circlePoints = new Array();

              // var location = new Microsoft.Maps.Location(43.3504, -84.5603);
              var location = new Microsoft.Maps.Location(42.274260, -83.365717);

              for (var i = 0; i < lats.length; i++) {
                  var loc = new Microsoft.Maps.Location(lats[i], longs[i]);
                  var pin = new Microsoft.Maps.Pushpin(loc, { text: FcN[i], typeName: 'PinColor', textOffset: new Microsoft.Maps.Point(-45, 0) });
                  //Display circle
                  lat1 = (lats[i] * Math.PI) / 180;
                  long1 = (longs[i] * Math.PI) / 180;
                  var d = parseFloat(Value[i]) / R;
                  for (x = 0; x <= 360; x += 5) {
                      var p2 = new Microsoft.Maps.Location(0, 0);
                      brng = x * Math.PI / 180;
                      p2.latitude = Math.asin(Math.sin(lat1) * Math.cos(d) + Math.cos(lat1) * Math.sin(d) * Math.cos(brng));
                      p2.longitude = ((long1 + Math.atan2(Math.sin(brng) * Math.sin(d) * Math.cos(lat1), Math.cos(d) - Math.sin(lat1) * Math.sin(p2.latitude))) * 180) / Math.PI;
                      p2.latitude = (p2.latitude * 180) / Math.PI;
                      circlePoints.push(p2);
                  }
                  var polygon = new Microsoft.Maps.Polygon(circlePoints, { fillColor: backgroundColor, strokeColor: borderColor, strokeThickness: 0 });
                  map.entities.push(polygon);
                  map.entities.push(pin);

              }

              map.setView({ center: location, zoom: 10 });

          }
      </script>

   </head>
   <body id="body" runat="server">
       <form id="form1" runat="server">
      <div id="mapMap" style="position:relative;width:600px; height:600px">  
       <script type="text/javascript">GetMap();
       </script>    
          </div> 
           </form>
   </body>
</html>

Answer 1

最后，我能够以我想要在宾果游戏地图上显示的方式显示圆圈。这只是一些修改。我附上代码来帮助那些正在寻找这样例子的人。

我正在附加我修改过的块。

for (x = 0; x <= 360; x += 5)
                  {
                      var p2 = new Microsoft.Maps.Location(0, 0);
                      brng = x * Math.PI / 180;
                      p2.latitude = Math.asin(Math.sin(lat1) * Math.cos(d) + Math.cos(lat1) * Math.sin(d) * Math.cos(brng));
                      p2.longitude = ((long1 + Math.atan2(Math.sin(brng) * Math.sin(d) * Math.cos(lat1), Math.cos(d) - Math.sin(lat1) * Math.sin(p2.latitude))) * 180) / Math.PI;
                      p2.latitude = (p2.latitude * 180) / Math.PI;
                      circlePoints.push(p2);
                      var polygon = new Microsoft.Maps.Polygon(circlePoints, {fillColor:backgroundColor,strokeColor:borderColor,strokeThickness: 1 });
                       map.entities.push(polygon);

                  }
                  circlePoints = [];

在具有指定半径值的推针周围的宾果图上绘制圆圈

1 个答案: