地図上にdrawCircleを組み合わせて同時に複数のマーカーを表示し、円の下にマーカを表示する

Question

私は資産を追跡するためのWebアプリケーションを作成しており、データベースを使用して資産の位置を表示する必要があります。私はそれのためのコードを書いて、それは正常に動作します。今では、200〜2000mの可変半径内にある資産を表示する必要があります。私は変数サークル用のコードを地図上の任意の場所をクリックすると書いています。どこにでもドラッグすることができます（コードは2つの異なるページに別々に書かれています）。私は両方を組み合わせるために助けが必要です。私はそうしようとしましたが失敗し、混乱しました。助けてください。バックエンドはC＃とASP.NETです。他にも何かお尋ねください！ これはこれは、地図上の任意の場所をクリックしたときにドラッグ可能なサークルやマーカーを示しドローサークル機能であるデータベース

<script type="text/javascript"> 
var markers = [ 
    <asp:Repeater ID="rptMarkers" runat="server"> 
     <ItemTemplate> 
      { 
       "Name": '<%# Eval("AID") %>', 
       "lat": '<%# Eval("Current_Location_Y") %>', 
     "lng": '<%# Eval("Current_Location_X") %>', 
      "description": '<%# Eval("Description") %>', 
      "CCId": '<%# Eval("CCID") %>' 

     } 

</ItemTemplate> 
<SeparatorTemplate> 
    , 

</SeparatorTemplate> 
    </asp:Repeater > 


    ]; 

</script> 

<script type="text/javascript"> 
    window.onload = function initMap() {         

    var mapOptions = {       
     center: new google.maps.LatLng(markers[0].lat, markers[0].lng), 
     zoom: 16,              
     mapTypeId: google.maps.MapTypeId.ROADMAP ,     
    navigationControl: true 
    }; 
    var infoWindow = new google.maps.InfoWindow/*()*/;     
    var map = new google.maps.Map(document.getElementById("map"), mapOptions); 
    for (i = 0; i < markers.length; i++) {         
     var data = markers[i]            
     var myLatlng = new google.maps.LatLng(data.lat, data.lng);    
switch (data.CCId) { 
      case "1": 
       icon = "images/red-dot.png"; 
       break; 
      case "3": 
       icon = "images/yellow-dot.png"; 
       break; 
      case "2": 
       icon = "images/green-dot.png"; 
       break; 
      default: 
       icon = "images/Google Maps Markers/red_markerC.png"; 
     } 
     var marker = new google.maps.Marker({     
      position: myLatlng,         
      map: map,           
      draggable: true, 
      title: data.title        
     }); 
     (function (marker, data) {        
      google.maps.event.addListener(marker, "click", function (e) { 
       infoWindow.setContent(data.Name);      
       infoWindow.open(map, marker);      
           }); 
     })(marker, data);   
    } 
} 

</script> 

からマーカーをプロットするためのコードです。

<script> 
    var map; 
    var circle; 
    var marker; 
    var currentlatlng; 
    function setLatLongValue() { 
     jQuery('#txtPointA1').val(currentlatlng.lat()); //#txtPointA1 
     jQuery('#txtPointA2').val(currentlatlng.lng()); 
    } 
    function loadMap() { 

     currentlatlng = new google.maps.LatLng(23.06368, 72.53135); 
     map = new google.maps.Map(document.getElementById('map'), { 
      zoom: 16, 
      center: currentlatlng, 
      mapTypeId: 'terrain', 
      mapTypeControl: true, 
      navigationControl: true 
     }); 
     google.maps.event.addDomListener(map, 'click', function (e) { 

      currentlatlng = e.latLng; 

      if (currentlatlng) { 

       map.panTo(currentlatlng); 
       setLatLongValue(); 
       setMarker(); 
      } 
     }); 
    } 
     function drawCircle() { 

      if (circle != undefined) 
       circle.setMap(null); 

      var radius = 200; 

      if (jQuery('#txtPointB1').val() != '' && !isNaN(jQuery('#txtPointB1').val()) && parseInt(jQuery('#txtPointB1').val()) > 0) { 
       radius = parseInt(jQuery('#txtPointB1').val()); 
      } 
      jQuery('#txtPointB1').val(radius.toString()); 

      var options = { 
       strokeColor: '#800000', 
       strokeOpacity: 1.0, 
       strokeWeight: 1, 
       fillColor: '#C64D45', 
       fillOpacity: 0.5, 
       map: map, 
       center: currentlatlng, 
       radius: radius 
      }; 

      circle = new google.maps.Circle(options); 
     } 
     function setMarker() { 

      if (marker != undefined) 
       marker.setMap(null); 

      marker = new google.maps.Marker({ 
       position: currentlatlng, 
       draggable: true, 
       map: map 
      }); 

      if (marker) { 
       google.maps.event.addDomListener(marker, "dragend", function() { 
        currentlatlng = marker.getPosition(); 
        setLatLongValue(); 
        drawCircle(); 
       }); 
       drawCircle(); 
      } 
     } 

</script> 
    <script type="text/javascript" > 

     $(window).load(function() { 
      loadMap(); 
     }); 

</script> 

Answer 1

Hereが私のやり方の例です。

あなたは座標でブラウザをプリロードする必要がデモを表示するには： - 緯度：-31.98118 経度：115.81991

ORタップ/、レーダーアイコン（右下）をクリックし、円を非常に作ります大きく、ズームアウトしてから、西オーストラリア州パースのUWAにサークルをドラッグします。その後、ズームインしてください。

あなたはUWAキャンパスのデータだけがあるので上記を行う必要があります。

キャンパスの周りに円をドラッグすると、緑の宝石が円に表示され、円が離れると消えます。

タップで円を削除します。ダブルタップすると、移動可能な円から静的な四角形に切り替わります。タップアンドホールドして検索フィルタオプションを取得します。

検索はWebワーカーで実行され、メインスレッドがUIに迅速にサービスを提供できるようにします。