在具有指定半徑值的推針上圍繞賓果地圖繪製圓形

網絡應用程序，我在其中檢索該位置可用的緯度，經度和數量值。我能夠根據位置在地圖上顯示推針，並能夠在推針周圍繪製圓圈。如果圓圈很大，則表示在該位置或圖釘位置有大量可用。我能夠顯示那些但圈子重疊，這是很好的位置非常接近，但我的問題是有什麼辦法來顯示與深色的圓圈交集，因爲它顯示白色或透明的顏色。請看看代碼，幫助將不勝感激。我在後面的代碼中檢索數據，並使用字符串生成器將它傳遞給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>

來源

2014-07-17 user2897967

最後，我能夠顯示我想要在賓果地圖上顯示的方式的圓圈。這只是很少的修改。我附上了代碼來幫助正在尋找這樣的例子的其他人。

我附加了我修改的塊。

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 = [];

來源

2014-07-18 13:31:02 user2897967

在具有指定半徑值的推針上圍繞賓果地圖繪製圓形

回答

相關問題