问题在第二个渲染中呈现Google地图在对话框中
我有一个网站，我用ajax构建了90％的jQuery，所以我想通过单击按钮来渲染不同的地图，而不需要刷新页面。
我可以在第一次渲染时正常工作，如下图所示。
但是当我重新加载或更改为另一个时，我得到这个:(我认为它仍然使用点渲染地图。只是画布不正确）
这是我的映射代码：
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视图代码：
<div class="span6" id="map_canvas" style="height:400px"></div>
我按照这个开始制作地图：
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();
UPDATE：
我试图用这个：
google.maps.event.trigger(map_canvas,'resize');
它会让我回到地图的其余部分，但它仍然不在应该设置的界限中。
我目前在加载html时调用的函数中有渲染过程。
我一直在尝试从Chrome浏览器的控制台访问地图实例，但由于地图变量在函数中，我无法访问它
如果有任何影响
，此地图将显示在JQUERY DIALOG Box中从使用它开始就像谷歌地图画布从对话框的点0,0渲染，因为每次我使用重新调整大小的代码我必须向下拖动画布并向右拖动以查看点......
2 个答案:
答案 0 :(得分：4)
我已经解决了这个问题...由于地图是在一个对话框中，所以在它完成加载HTML之前渲染地图所以我必须在对话框上放置一个打开的功能以在之后触发它html已加载
$("#map_form").dialog({
open: function( event, ui ) {
initialize_map();
},
autoOpen: false,
width: 1000,
buttons: {
"Close": function () {
$(this).dialog("close");
}
}
});
希望这有助于其他人
答案 1 :(得分：0)
尝试在更新后强制重绘地图。
google.maps.event.trigger(yourMapInstance,'resize');
相关问题
最新问题
- 我写了这段代码，但我无法理解我的错误
- 我无法从一个代码实例的列表中删除 None 值，但我可以在另一个实例中。为什么它适用于一个细分市场而不适用于另一个细分市场？
- 是否有可能使 loadstring 不可能等于打印？卢阿
- java中的random.expovariate()
- Appscript 通过会议在 Google 日历中发送电子邮件和创建活动
- 为什么我的 Onclick 箭头功能在 React 中不起作用？
- 在此代码中是否有使用“this”的替代方法？
- 在 SQL Server 和 PostgreSQL 上查询，我如何从第一个表获得第二个表的可视化
- 每千个数字得到
- 更新了城市边界 KML 文件的来源？