在具有指定半径值的图钉周围在宾果地图上绘制圆圈答案

【问题标题】：Draw circles on bingo map around push pins with the specified radius value在具有指定半径值的图钉周围在宾果地图上绘制圆圈
【发布时间】：2015-03-19 08:44:47
【问题描述】：

我在其中检索该位置可用的纬度、经度和数量值的网络应用程序。我能够根据位置在地图上显示图钉，并能够在图钉周围画圈。如果圆圈很大，则表明在该位置或图钉位置有大量可用。我能够显示这些，但圆圈重叠，这很好，因为位置非常接近，但我的问题是有什么方法可以显示深色圆圈的交叉点，因为它显示白色或透明色。请看一下代码，帮助将不胜感激。我已经在后面的代码中检索到数据，并使用字符串生成器将其传递给 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>

【问题讨论】：

标签： asp.net dictionary geometry html5-canvas markers

【解决方案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 = [];

【讨论】：