Question

我使用以下代码通过RouteAlternatives查看谷歌地图。当我在.html页面中保存它并打开它时。它的工作原理，但在asp.net mvc 4视图中，谷歌地图不可见，但路线替代品是左侧的视图。在布局页面我使用的是jquery-1.7.1.min.js和query-ui-1.8.20.min.js等如何在asp.net mvc视图中看到这个。在此先感谢。

<script src="http://maps.google.com/maps/api/js?sensor=false"></script>
<script src="/Scripts/jquery-1.11.0.min.js"></script>

<script>
    var directionDisplay;
    var directionsRenderer;
    var directionsService = new google.maps.DirectionsService();
    var map;

    function drawMap(midpoint) {
        var mid = midpoint.split(",");
        var start = new google.maps.LatLng(mid[0], mid[1]);
        var myOptions = {
            zoom:7,
            mapTypeId: google.maps.MapTypeId.ROADMAP,
            center: start,
            mapTypeControl: false
            }
        map = new google.maps.Map(document.getElementById("map_canvas"), myOptions);
    }

    function getRendererOptions(main_route)
    {
        if(main_route)
        {
            var _colour = '#00458E';
            var _strokeWeight = 4;
            var _strokeOpacity = 1.0;
            var _suppressMarkers = false;
        }
        else
        {
            var _colour = '#ED1C24';
            var _strokeWeight = 2;
            var _strokeOpacity = 0.7;
            var _suppressMarkers = false; 
        }

        var polylineOptions = {strokeColor: _colour, strokeWeight: _strokeWeight, strokeOpacity: _strokeOpacity };
        var rendererOptions = {draggable: true, suppressMarkers: _suppressMarkers, polylineOptions: polylineOptions};
        return rendererOptions;
    } 

    function renderDirections(result, rendererOptions, routeToDisplay)
    {
        if(routeToDisplay==0)
        {
            var _colour = '#00458E';
            var _strokeWeight = 4;
            var _strokeOpacity = 1.0;
            var _suppressMarkers = false;

            var directionsRenderer = new google.maps.DirectionsRenderer({
                draggable: true, 
                suppressMarkers: _suppressMarkers, 
                polylineOptions: { 
                    strokeColor: _colour, 
                    strokeWeight: _strokeWeight, 
                    strokeOpacity: _strokeOpacity  
                }
            });
            directionsRenderer.setMap(map);
            directionsRenderer.setPanel(document.getElementById('directions_panel'));
            directionsRenderer.setDirections(result);
            directionsRenderer.setRouteIndex(routeToDisplay);
        }
        else
        {
            var _colour = '#ed1c24'; 
            var _strokeWeight = 4;
            var _strokeOpacity = 0.7;
            var _suppressMarkers = false;

            var directionsRenderer = new google.maps.DirectionsRenderer({
                draggable: true, 
                suppressMarkers: _suppressMarkers, 
                polylineOptions: { 
                    strokeColor: _colour, 
                    strokeWeight: _strokeWeight, 
                    strokeOpacity: _strokeOpacity  
                }
            });
            directionsRenderer.setMap(map);
            directionsRenderer.setDirections(result);
            directionsRenderer.setRouteIndex(routeToDisplay);
        }

        // if (routeToDisplay == 0) _colour = "#FF0000";
            // create new renderer object
    } 

    function requestDirections(start, end, routeToDisplay, main_route) { 
        var request = {
                origin: start,
                destination: end,
                travelMode: google.maps.DirectionsTravelMode.DRIVING,
                provideRouteAlternatives: main_route
        };

        directionsService.route(request, function(result, status) {
            if (status == google.maps.DirectionsStatus.OK)
            {
                if(main_route)
                {
                    var rendererOptions = getRendererOptions(true);
                    for (var i = 0; i < result.routes.length; i++)
                    {
                        renderDirections(result, rendererOptions, i);
                    }
                }
                else
                {
                    rendererOptions = getRendererOptions(false);
                    renderDirections(result, rendererOptions, routeToDisplay); 
                }
            }
        }); 
    }
</script>
<div id="map_canvas" style="float:left;width:67.5%;height:100%; border:solid black "></div>
<div id="control_panel" style="float:right;width:30%;text-align:left;padding-top:20px; border:solid black">
    <div id="directions_panel" style="margin:20px;background-color:#FFEE77;"></div>
</div>
<script>
    requestDirections('(9.8167, 80.2333)', '(9.6667, 80.0000)', 0, true);
    drawMap("51.3879120942,-0.15028294518");
</script>

Answer 1

这是工作小提琴

<强> http://jsfiddle.net/jLLukrux/5/

<强> CSS

#map_canvas{
float:left;
width:67.5%;
height:100%; 
border:solid black;
position:fixed!important;
}

谷歌地图不可见：谷歌地图DirectionsService在asp.net mvc中

1 个答案: