지도에 drawCircle을 결합하여 동시에 여러 마커를 표시하고 원 아래에 표시되는 마커를 표시합니다.

Question

애셋을 추적하는 웹 애플리케이션을 만들고 데이터베이스를 사용하여 애셋의 위치를 ​​표시해야합니다. 나는 그것에 대한 코드를 작성하고 잘 작동합니다. 이제 저는 200 ~ 2000m의 가변 반경 내에있는 자산을 보여줄 필요가 있습니다. 나는 변수 서클에 대한 코드를지도의 아무 위치에서 클릭 할 때 작성했으며, 어디에서든지 (코드는 두 개의 다른 페이지에 별도로 작성 됨) 끌 수 있습니다. 나는이 두 가지를 결합하는 데 도움이 필요하다. 나는 그렇게했으나 실패하고 혼란스러워했다. 도와주세요. 백엔드는 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

또는 탭 /, 레이더 아이콘 (오른쪽 하단)을 클릭 원을 매우 만들 크게 축소하고 서부 호주의 퍼스 (Perth)에있는 UWA로 원을 드래그하십시오. 그런 다음 다시 확대하십시오.

UWA 캠퍼스의 데이터 만 있기 때문에 위의 작업을 수행해야합니다.

캠퍼스 주변을 원을 드래그하면 녹색 원이 원에 나타나고 원이 떠날 때 사라지는 것을 볼 수 있습니다.

원을 제거하려면 누릅니다. 이동 가능한 원에서 고정 된 사각형으로 전환하려면 두 번 탭합니다. 검색 필터 옵션을 보려면 길게 탭하십시오.

웹 작업자가 검색하면 메인 스레드가 UI를 즉시 처리 할 수 ​​있습니다.