在第二个渲染中呈现Google地图的问题在对话框中呈现 [英] Issue rendering Google maps on 2nd render In Dialog Box
本文介绍了在第二个渲染中呈现Google地图的问题在对话框中呈现的处理方法，对大家解决问题具有一定的参考价值，需要的朋友们下面随着小编来一起学习吧！
问题描述
我有一个网站，我已经建立了90％的jQuery与ajax，所以我想通过点击按钮来呈现不同的地图，并且不需要页面刷新。
.com / lFtCg.jpgalt =
但是，当我去重新加载或改变到另一个我得到这个:(我认为它仍然使用点来渲染地图，只是canvas不对）
window.initialize_map = function（）{
函数getMiles（i）{
return i * 0.000621371192;
}
函数toHHMMSS（i）{
var sec_num = parseInt（i，10）; //不要忘记第二个参数
var hours = Math.floor（sec_num / 3600）;
var minutes = Math.floor（（sec_num - （hours * 3600））/ 60）;
var seconds = sec_num - （小时* 3600） - （分钟* 60）; （分钟<10）{分钟=0+分钟;}
（小时<10）{小时=0+小时;}
如果（秒<10）{秒=0+秒;}
时间=小时+'小时'+分钟+'分钟';
退货时间;
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）;
返回directionsRenderer.setDirections（result）;
};
var icons1 = {
start：{
名称：'当前位置'，
图标：'/assets/truck.png'
}，
load：{
name：'Load Pickup'，
icon：'/assets/crate.png'
}，
info：{
name：'Destination' ，
图标：'/assets/enduser.png'
}
};
var icons = {
start：new google.maps.MarkerImage（
// URL
'/assets/truck.png'，
//（width， （x，y）
new google.maps.Point（0，0），
//定位点（x，y）
新google.maps.Point（13，32）
），
加载：新google.maps.MarkerImage（
// URL
'/assets/crate.png'，
//（宽度，高度）
新google.maps.Size（32，32），
// （x，y）
new google.maps.Point（0，0），
//锚点（x，y）
new google.maps.Point（13， 32）
），
end：new google.maps.MarkerImage（
// URL
'/assets/enduser.png'，
//（width，高度）
新google.maps .Size（32，32），
//原点（x，y）
new google.maps.Point（0，0），
//锚点（x， y）
new google.maps.Point（13，32）
）
};
函数makeMarker（position，icon，title）{
google.maps.Marker（{
position：position，
map：map，
icon：icon，
title：title
}）;
requestDirections = function（start，end，waypnt）{
returns 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。长度; i ++）{
if（route.legs.length> 1）{
if（i === 0）{
distance.innerHTML + ='< b> Dead首页：< / b>< br>';
makeMarker（route.legs [i] .start_location，icons.start，当前位置）;
}
else {
distance.innerHTML + ='< b>载入路线：< / b> <峰; br>;
distance2.innerHTML = Math.round（getMiles（route.legs [i] .distance.value））+Miles
makeMarker（route.legs [i] .start_location，icons.load，起源）;
makeMarker（route.legs [i] .end_location，icons.end，'Destination'）;
}
}
else {
distance.innerHTML + ='< b>载入路线：< / b> <峰; br>;
distance2.innerHTML = Math.round（getMiles（route.legs [i] .distance.value））+Miles
makeMarker（route.legs [i] .start_location，icons.load，起源）;
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> *根据预估来源&目的地位置< / 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;
地址=原点;
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（ （
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'）;
（图标1中的var键）{
var type = icons1 [key];
var name = type.name;
var icon = type.icon;
var div = document.createElement（'div'）;
div.innerHTML ='< img src =''+图标+'> '+ name;
legend.appendChild（div）;
}
map.controls [google.maps.ControlPosition.RIGHT_BOTTOM] .push（legend）;
if（waypoint）{
waypnt.push（{
location：waypoint，
stopover：true}）;
}
返回requestDirections（origin，dest，waypnt）;
}
};
这里是我的html视图代码：
< div class =span6id =map_canvasstyle =height：400px>< / div>
我通过以下方式启动地图：
initialize_map（）;
顺便说一下，您在这些图片中看到的所有内容都是通过ajax请求生成的，使用这个命令：
$（＃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'）;
它会让我回到地图的其余部分，但它仍然不在边界内设置。
我目前有一个函数的渲染过程中，我加载html时调用。
我一直试图从chrome浏览器的控制台访问地图实例，但由于map变量在函数中，我无法访问它。
这个地图在JQUERY对话框中显示，如果有任何影响的话
从这个工作起，它就像谷歌地图画布从对话框的点0,0进行渲染，因为每次我使用重新调整大小的代码时，我必须将画布向下拖动到右侧才能看到点...
我已经解决了这个问题...由于地图是在一个对话框中，所以在完成加载HTML之前渲染地图，所以我不得不把在加载html后触发它的对话框上的打开功能
$（＃map_form）。dialog（{
open：function（event，ui）{
initialize_map（）;
}，
autoOpen：false，
width：1000，
buttons：
关闭：功能ion（）{
$（this）.dialog（close）;
}
}
}）;
希望这有助于其他人
I have a website that i have built that is 90% jQuery with ajax so i would like to render different maps with directions with the click of a button without page refreshing.
I have everything working right for the first rendering as you can see in the following picture.
But when i go to reload or change to a different one i Get this: (I think it is still rendering the map with the points. just canvas is not right)
here is my code for the mapping:
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);
}
};
here is my code for the html view:
<div class="span6" id="map_canvas" style="height:400px"></div>
and i initiate the maps by this:
initialize_map();
By the way everything you see in those pictures are generated thru an ajax request that is replacing everything in that div with this command:
$("#map_info_div").replaceWith(
"<%= escape_javascript(render :partial => 'classic_dialogs/load_search/load_details', :locals => {:load_info => @load_info, :current1 => @current}) %>"
);
so every time that whole section is completely redrawn and calls a new:
initialize_map();
UPDATE:
i have tried to use this:
google.maps.event.trigger(map_canvas,'resize');
It will give me back the rest of the map but it is still not in the Bounds that should be set.
I currently have the rendering process in a function that i call when the html is loaded.
I have been trying to access the map instance from the console of chrome browser but since the map variable is in the function i am unable to access it
This map is being displayed in a JQUERY DIALOG Box if that has any effect
From working with this it is like the google map canvas is rendering from point 0,0 of the dialog box because every time i use the re-size code i have to drag the canvas down and to the right to see the points...
解决方案
I have SOLVED this issue... Since the map was in a dialog box it was tring to render the map before it was finished loading the HTML so i had to put an open fuction on the dialog box to trigger it after the html was loaded
$("#map_form").dialog({
open: function( event, ui ) {
initialize_map();
},
autoOpen: false,
width: 1000,
buttons: {
"Close": function () {
$(this).dialog("close");
}
}
});
Hope this helps others
这篇关于在第二个渲染中呈现Google地图的问题在对话框中呈现的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
查看全文
