我有一个网站，90% 是 jQuery 和 ajax，所以我想通过单击按钮而不刷新页面来呈现不同的 map 和方向。

如您在下图中所见，第一次渲染时一切正常。

但是当我重新加载或更改为另一个时，我得到了这个:(我认为它仍在使用点渲染 map 。只是 Canvas 是不对的)

这是我的映射代码:

window.initialize_map = function() {
    function getMiles(i) {
        return i*0.000621371192;
    }
    function toHHMMSS(i) {
        var sec_num = parseInt(i, 10); // don't forget the second param
        var hours   = Math.floor(sec_num / 3600);
        var minutes = Math.floor((sec_num - (hours * 3600)) / 60);
        var seconds = sec_num - (hours * 3600) - (minutes * 60);

        if (hours   < 10) {hours   = "0"+hours;}
        if (minutes < 10) {minutes = "0"+minutes;}
        if (seconds < 10) {seconds = "0"+seconds;}
        time = hours+' hours '+minutes+' minutes ';
        return time;
    }

    var address, bounds, center, dest, dest_lat, dest_lng, directionsService, estimate_dest, estimate_origin, geocoder, map, mapOptions, none_location, one_location, origin, origin_lat, origin_lng, renderDirections, requestDirections, table, zoom, route, distance, distance1, duration, current, current_lng, current_lat, waypnt, estimate_current, directionsRenderer;
    table = $("#gmap");
    waypnt = [];
    dest_lng = table.attr("dest_lat");
    dest_lat = table.attr("dest_lng");
    origin_lng = table.attr("origin_lat");
    origin_lat = table.attr("origin_lng");
    dest = table.attr("dest");
    current_lng = table.attr("current_lng");
    current_lat = table.attr("current_lat");

    var current1 = table.attr("current");
    var origin1 = table.attr("origin");

    if (current1 === ''){
        origin = origin1;

    }
    else{
        origin = current1;
        var waypoint = origin1;
        estimate_current = new google.maps.LatLng(parseInt(current_lat), parseInt(current_lng));
    }
    estimate_origin = new google.maps.LatLng(parseInt(origin_lat), parseInt(origin_lng));
    estimate_dest = new google.maps.LatLng(parseInt(dest_lat), parseInt(dest_lng));
    geocoder = new google.maps.Geocoder();

    directionsService = new google.maps.DirectionsService;
    directionsRenderer = new google.maps.DirectionsRenderer({suppressMarkers: true});


    renderDirections = function(result) {
        directionsRenderer.setMap(map);
        return directionsRenderer.setDirections(result);
    };
    var icons1 = {
        start: {
            name: 'Current Location',
            icon: '/assets/truck.png'
        },
        load: {
            name: 'Load Pickup',
            icon: '/assets/crate.png'
        },
        info: {
            name: 'Destination',
            icon: '/assets/enduser.png'
        }
    };
    var icons = {
        start: new google.maps.MarkerImage(
            // URL
            '/assets/truck.png',
            // (width,height)
            new google.maps.Size( 32, 32 ),
            // The origin point (x,y)
            new google.maps.Point( 0, 0 ),
            // The anchor point (x,y)
            new google.maps.Point( 13, 32 )
        ),
        load: new google.maps.MarkerImage(
            // URL
            '/assets/crate.png',
            // (width,height)
            new google.maps.Size( 32, 32 ),
            // The origin point (x,y)
            new google.maps.Point( 0, 0 ),
            // The anchor point (x,y)
            new google.maps.Point( 13, 32 )
        ),
        end: new google.maps.MarkerImage(
            // URL
            '/assets/enduser.png',
            // (width,height)
            new google.maps.Size( 32, 32 ),
            // The origin point (x,y)
            new google.maps.Point( 0, 0 ),
            // The anchor point (x,y)
            new google.maps.Point( 13, 32 )
        )
    };
    function makeMarker( position, icon, title ) {
        new google.maps.Marker({
            position: position,
            map: map,
            icon: icon,
            title: title
        });
    }
    requestDirections = function(start, end, waypnt) {
        return directionsService.route({
            origin: start,
            destination: end,
            waypoints: waypnt,
            travelMode: google.maps.DirectionsTravelMode.DRIVING
        }, function(result) {
            myObj = result;
            route = result.routes[0];
            distance = document.getElementById('distance');
            distance1 = document.getElementById('distance1');
            var distance2 = document.getElementById('distance2');
            duration = document.getElementById('duration');
            var total_distance = 0;
            var total_duration = 0;

            for (var i = 0; i < route.legs.length; i++) {
                if (route.legs.length > 1){
                    if (i === 0 ){
                        distance.innerHTML += ' <b>Dead Head:</b> <br>';
                        makeMarker( route.legs[i].start_location, icons.start, "Current Location" );
                    }
                    else{
                        distance.innerHTML += ' <b>Load Route:</b> <br>';
                        distance2.innerHTML = Math.round(getMiles(route.legs[i].distance.value)) + " Miles"
                        makeMarker( route.legs[i].start_location, icons.load, "Origin" );
                        makeMarker( route.legs[i].end_location, icons.end, 'Destination' );
                    }
                }
                else{
                    distance.innerHTML += ' <b>Load Route:</b> <br>';
                    distance2.innerHTML = Math.round(getMiles(route.legs[i].distance.value)) + " Miles"
                    makeMarker( route.legs[i].start_location, icons.load, "Origin" );
                    makeMarker( route.legs[i].end_location, icons.end, 'Destination' );
                }


                distance.innerHTML += route.legs[i].start_address + '* to ';
                distance.innerHTML += route.legs[i].end_address + '*<br>';
                distance.innerHTML += route.legs[i].duration.text + '<br>';
                distance.innerHTML += route.legs[i].distance.text + '<br><br>';
                total_duration += route.legs[i].duration.value;
                total_distance += route.legs[i].distance.value;
            }
            distance.innerHTML += '<small>*Based On Estimated Origin & Destination Locations</small>';
            distance1.innerHTML = Math.round(getMiles(total_distance)) + " Miles";
            duration.innerHTML = toHHMMSS(total_duration);

            return renderDirections(result);
        });
    };



    one_location = false;
    none_location = false;
    if (dest.toLowerCase() === "anywhere" && origin.toLowerCase() === "anywhere") {
        center = new google.maps.LatLng(37.2153, -93.2981);
        one_location = true;
        none_location = true;
        zoom = 4;
    } else if (dest.toLowerCase() === "anywhere") {
        center = estimate_origin;
        address = origin;
        zoom = 6;
        one_location = true;
    } else if (origin.toLowerCase() === "anywhere") {
        center = estimate_dest;
        address = dest;
        zoom = 6;
        one_location = true;
    } else {
        center = new google.maps.LatLng(34, 34);
        zoom = 6;
    }
    mapOptions = {
        center: center,
        zoom: zoom,
        mapTypeId: google.maps.MapTypeId.ROADMAP,
        disableDefaultUI: true
    };
    map = new google.maps.Map(document.getElementById("map_canvas"), mapOptions);

    if (one_location) {
        if (!none_location) {
            return geocoder.geocode({
                'address': address
            }, function(results, status) {
                var marker;
                return marker = new google.maps.Marker({
                    position: results[0].geometry.location,
                    map: map,
                    title: 'Loadmax'
                });
            });
        }
    } else {
        bounds = new google.maps.LatLngBounds();
        if (estimate_current){
            bounds.extend(estimate_current);
        }
        bounds.extend(estimate_origin);
        bounds.extend(estimate_dest);
        map.fitBounds(bounds);
        var legend = document.getElementById('legend');
        for (var key in icons1) {
            var type = icons1[key];
            var name = type.name;
            var icon = type.icon;
            var div = document.createElement('div');
            div.innerHTML = '<img src="' + icon + '"> ' + name;
            legend.appendChild(div);
        }
        map.controls[google.maps.ControlPosition.RIGHT_BOTTOM].push(legend);
        if (waypoint){
            waypnt.push({
                location:waypoint,
                stopover:true});
        }
        return requestDirections(origin, dest, waypnt);

    }

};

这是我的 html View 代码:

<div class="span6" id="map_canvas" style="height:400px"></div>

然后我通过这个启动 map :

initialize_map();

顺便说一下，您在这些图片中看到的所有内容都是通过 ajax 请求生成的，该请求使用以下命令替换该 div 中的所有内容:

$("#map_info_div").replaceWith(
        "<%= escape_javascript(render :partial => 'classic_dialogs/load_search/load_details', :locals => {:load_info => @load_info, :current1 => @current}) %>"
);

所以每次整个部分被完全重绘并调用一个新的:

initialize_map();

更新:

我试过用这个:

google.maps.event.trigger(map_canvas,'resize');

它会把 map 的其余部分还给我，但它仍然不在应设置的边界内。

我目前在加载 html 时调用的函数中有渲染过程。

我一直在尝试从 chrome 浏览器的控制台访问 map 实例，但由于 map 变量在函数中，我无法访问它

如果有任何影响，此 map 将显示在 JQUERY DIALOG Box 中

从使用这个开始，就像谷歌地图 Canvas 从对话框的点 0,0 开始渲染，因为每次我使用重新调整大小的代码时，我都必须将 Canvas 向下和向右拖动才能看到这些点...

最佳答案

我已经解决了这个问题...因为 map 在一个对话框中，它试图在完成加载 HTML 之前渲染 map ，所以我不得不在对话框上放置一个打开的功能以在html 已加载

$("#map_form").dialog({
    open: function( event, ui ) {
        initialize_map();
    },
    autoOpen: false,
    width: 1000,
    buttons: {
        "Close": function () {
            $(this).dialog("close");
        }
    }
});

希望这对其他人有帮助

关于javascript - 在对话框中的第二次渲染中发布渲染谷歌地图，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/30218224/