Question

我正在创建一个Web应用程序来跟踪资产，我需要使用数据库显示资产的位置。我为此编写了一个代码，它工作正常。现在我需要显示在200到2000米的可变半径范围内的资产。当我点击地图上的任何位置时，我已经编写了变量圆的代码，并且可以将其拖动到任何位置（代码分别写在两个不同的页面上）。我需要帮助来结合两者。我试过这样做但失败了并且感到困惑。请帮忙。后端是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

或点击/点击雷达图标（右下角），使圆圈变大，缩小很多，然后将圆圈拖到珀斯西澳大利亚的西澳大利亚州。然后放大。

您需要执行以上操作＆＃39;因为只有西澳大学校园的数据。

当您在校园周围拖动圆圈时，您会看到绿色宝石出现在圆圈中，并在圆圈离开时消失。

点击以删除圆圈。双击以从可移动圆圈切换到静态四边形。点按并按住以获取搜索过滤器选项。

搜索在Web Worker中完成，以允许主线程立即为UI提供服务。

在地图上组合drawCircle并同时显示多个标记，并显示落在圆圈下方的标记

1 个答案: