谷歌地图(在.net中) - 在现有的基础上绘制另一张地图?

时间:2014-02-07 09:50:51

标签: javascript vb.net google-maps-api-3

我在VB.net软件中有一个3窗格谷歌地图集成。在大多数情况下,它的工作非常出色。今天我试图让这3个单独的对象绘制不同的多边形,具体取决于它们每天发送的纬度/亮度。

第一个地图控件始终有效。然而,第二和第三是麻烦的。我试图截图发生了什么。

enter image description here

正如你所看到的,正在绘制多边形,但由于某种原因,我的原始地图上会绘制一个全新的地图。显然这是不对的。我也到处都有代码:

这是在DocumentComplete触发时调用的JS初始化:

    function Initialize(zoomLevel,lat,lng,type, bCanEdit, bCanDrag){  
        //Get the type of map to start.
        //Need to convert the GoogleMapType enum
        //to an actual Google Map Type          
        var MapType;
        switch (type)
        {
            case 1:
                MapType = google.maps.MapTypeId.ROADMAP;
                break;
            case 2:
                MapType = google.maps.MapTypeId.TERRAIN;
                break;
            case 3:
                MapType = google.maps.MapTypeId.HYBRID;
                break;
            case 4:
                MapType = google.maps.MapTypeId.SATELLITE;
                break;
            default:
               MapType = google.maps.MapTypeId.ROADMAP;
        };

        //Create an instance of the map with the lat, lng, zoom, and
        //type passed in
        myLatlng = new google.maps.LatLng(lat,lng);   
        var myOptions = {zoom: zoomLevel,center: myLatlng,mapTypeId: MapType};
        var MarkerSize = new google.maps.Size(48,48);

        map = new google.maps.Map(document.getElementById("map_canvas"), myOptions);     
        google.maps.event.addListener(map, 'click', Map_Click);
        google.maps.event.addListener(map, 'mousemove', Map_MouseMove);
        google.maps.event.addListener(map, 'idle',Map_Idle);

        overlayLayer = new Array();
        overlayCount = 0;

        driverRouteLayers = new Array();
        driverRouteCount = 0;

        canEdit = bCanEdit;
        canDrag = bCanDrag;
    }  

调用脚本绘制叠加区域的VB.net:

Public Sub DrawAreaOverlays(ByVal area As DeliveryArea)
    Dim gc As New GComArray()

    For Each p As DeliveryAreaPoint In area.Points
        Dim ll As New GLatLong(p.Latitude, p.Longitude)
        gc.Add(ll)
    Next

    WebBrowser1.Document.InvokeScript("DrawAreaOverlay", {gc, Utility.Pens.GetHexColor(area.Colour)})
End Sub

vb.net中的初始DocumentComplete挂钩:

Private Sub WebBrowser1_DocumentCompleted(ByVal sender As Object, ByVal e As System.Windows.Forms.WebBrowserDocumentCompletedEventArgs)
    'Initialize the google map with the initial settings.
    'The Initialize script function takes four parameters.
    'zoom, lat, lng, maptype.  Call the script passing the
    'parameters in.
    WebBrowser1.Document.InvokeScript("Initialize", New Object() {InitialZoom, InitialLatitude, InitialLongitude, CInt(InitialMapType),
                                     allowEditing, allowDragging})
    RaiseEvent PopulateInitialRoutes()
End Sub

这些是唯一被调用的方法,其余的只是挂钩到javascript方法来显示各种东西,但在此之前没有任何东西被调用(如此)。在这个特定的表单上,我只是显示,不允许最终用户以任何方式操纵数据。

DrawAreaOverlay方法(JS)负责多边形绘图(请原谅代码的状态,我一直试图解决这个问题!):

    function DrawAreaOverlay(area, col)
    {
        if(area.Count <= 0)
        {
            CreateNewArea(0, 0);
            return;
        }

        var coordsString = "";
        var areaCoords = [];
        overlayLayer[overlayCount] = new Array();

        for(var j=0; j<area.Count; j++)
        {
            areaCoords.push(new google.maps.LatLng(area.Item(j).lat, area.Item(j).lng));
        }

        var poly = new google.maps.Polygon({
            paths: areaCoords,
            strokeColor: '#'+col,
            strokOpacity: 0.35,
            strokeWeight: 2,
            fillColor: '#'+col,
            fillOpacity: 0.25,
            geodesic: false,
            editable: canEdit,
            draggable: canDrag,
            map: map
        });     

        poly.getPaths().forEach(function(path, index){
            google.maps.event.addListener(path, 'set_at', function(){
                var arrayOfPoints = new Array();                
                arrayOfPoints = poly.getPath(); 

                coordsString = "";

                for(var i=0; i<arrayOfPoints.length; i++)
                {                                               
                    coordsString += poly.getPath().getAt(i).lat() + ", " + poly.getPath().getAt(i).lng() + "|";
                }

                window.external.AreaPointMoved(coordsString.substring(0, coordsString.length -1));
            });                             
        });

        // INSERTION OF NEW VERTICES ALONG THE POLYGON EDGES //
        poly.getPaths().forEach(function(path, index){
            google.maps.event.addListener(path, 'insert_at', function(){
                var arrayOfPoints = new Array();                
                arrayOfPoints = poly.getPath(); 

                coordsString = "";

                for(var i=0; i<arrayOfPoints.length; i++)
                {                                               
                    coordsString += poly.getPath().getAt(i).lat() + ", " + poly.getPath().getAt(i).lng() + "|";
                }

                window.external.AreaPointMoved(coordsString.substring(0, coordsString.length -1));
            });
        });         

        debugger;
        //if(map == null)
        //{
        //  makeMeANotNullMap(zoomLevel, latitude, longitude);
        //  overlayLayer[overlayCount] = new Array();
        //}
        poly.setMap(map);
        overlayLayer[overlayCount].push(poly);
        overlayCount++;
        //alert("I'll work now, but why?");
        //window.external.DoNothing();
    }

现在非常奇怪的部分。如果我取消注释JS中的警告框(:我现在会工作,但为什么?警报),每个地图都会呈现出奇妙的效果。因此,一旦警报框被解除,地图就会明显地发生。这是我追求的这个缺失的环节。但我无法理解它。

如果没有警告框,有趣的是,地图控件的第2和第3个初始化,地图有时 null。我知道这一点,因为我已经设置VS来调试脚本。所以你可以拖动每一个(大力)并将附加的图像放在结果上方,聚合物已经绘制,但你看不到它。

非常感谢任何帮助。我不知道为什么会发生这种情况。

0 个答案:

没有答案