从其他 html 文件导航时不显示 jQuery-ui-map
•浏览 1
jQuery-ui-map not displayed when navigating from other html file
这是我关于stackoverflow的第一个问题，所以要温柔:)
我正在使用 jQuery、jQuery mobile 和 jQuery-ui-map 插件制作一个移动 Web 应用程序。当我刷新应该显示它的文件(map.html)时，地图工作得很好，但是从 index.html 导航时它根本不会出现。控制台显示没有错误。我试过做一个 $(\\'#map_canvas\\').gmap(\\'refresh\\');在 pageinit 上，但这也不起作用。当我直接刷新文件时，这也会打乱平移...
我也尝试过不使用页脚菜单中的预取和使用 data-rel="external"(这会弄乱 jquery 移动样式)
这里是 index.html 的页脚导航：
<ul>
<li>
Home
</li>
<li>
Offers
</li>
<li>
Store
</li>
<li>
Map
</li>
<li>
...
</li>
</ul>$('#map_canvas').gmap({'maxZoom':17,'center': new google.maps.LatLng(center_latitude,center_longitude),'callback': function() {
var self = this;
// Get the current position
self.getCurrentPosition(function(position, status) {
// If we got the current position, add the marker
if ( status === 'OK' ) {
// Stor current position in a var
var clientPosition = new google.maps.LatLng(position.coords.latitude, position.coords.longitude);
// Add the current position marker
self.addMarker({ id:'mark_pos','position': clientPosition, 'bounds': true})
.click(function() {
$('#map_canvas').gmap('openInfoWindow', { 'content': Lang.mapHtml.txt_marker_my_position_content }, this);
});
// Paint a blue cirecle where your position is
self.addShape('Circle', {
'strokeWeight': 0,
'fillColor':"#008595",
'fillOpacity': 0.25,
'center': clientPosition,
'radius': 15,
'clickable': false
});
// Bind direction marker button and show it
$("#divBtnDirection").show();
var that = this;
$("#btn_directions").click(function() {
that.displayDirections({ 'origin': clientPosition, 'destination':center_latitude+','+center_longitude , 'travelMode': google.maps.DirectionsTravelMode.DRIVING }, { 'panel': document.getElementById('directions') }, function(result, status) {
if ( status === 'OK' ) {
$('#map_canvas').gmap('clear', 'markers');
$("#divBtnDirection").hide();
$("#directions").fadeIn(1000);
}
});
});
}
// Add the shopping centers marker
self.addMarker( { id:'mark_center', 'position': center_latitude+','+center_longitude, 'bounds': true }).click(function() {
$('#map_canvas').gmap('openInfoWindow', { 'content': Lang.mapHtml.txt_marker_center_content }, this);
});
});
}});$(function(){
//your function call
});这是地图的代码：
<ul>
<li>
Home
</li>
<li>
Offers
</li>
<li>
Store
</li>
<li>
Map
</li>
<li>
...
</li>
</ul>$('#map_canvas').gmap({'maxZoom':17,'center': new google.maps.LatLng(center_latitude,center_longitude),'callback': function() {
var self = this;
// Get the current position
self.getCurrentPosition(function(position, status) {
// If we got the current position, add the marker
if ( status === 'OK' ) {
// Stor current position in a var
var clientPosition = new google.maps.LatLng(position.coords.latitude, position.coords.longitude);
// Add the current position marker
self.addMarker({ id:'mark_pos','position': clientPosition, 'bounds': true})
.click(function() {
$('#map_canvas').gmap('openInfoWindow', { 'content': Lang.mapHtml.txt_marker_my_position_content }, this);
});
// Paint a blue cirecle where your position is
self.addShape('Circle', {
'strokeWeight': 0,
'fillColor':"#008595",
'fillOpacity': 0.25,
'center': clientPosition,
'radius': 15,
'clickable': false
});
// Bind direction marker button and show it
$("#divBtnDirection").show();
var that = this;
$("#btn_directions").click(function() {
that.displayDirections({ 'origin': clientPosition, 'destination':center_latitude+','+center_longitude , 'travelMode': google.maps.DirectionsTravelMode.DRIVING }, { 'panel': document.getElementById('directions') }, function(result, status) {
if ( status === 'OK' ) {
$('#map_canvas').gmap('clear', 'markers');
$("#divBtnDirection").hide();
$("#directions").fadeIn(1000);
}
});
});
}
// Add the shopping centers marker
self.addMarker( { id:'mark_center', 'position': center_latitude+','+center_longitude, 'bounds': true }).click(function() {
$('#map_canvas').gmap('openInfoWindow', { 'content': Lang.mapHtml.txt_marker_center_content }, this);
});
});
}});$(function(){
//your function call
});该网站目前正在此处显示(其为挪威语)
谢谢！
首先欢迎使用 Stackoverflow..:)
确保在导航时调用您的函数。尝试在函数中放置一个消息框并检查。
还可以尝试在
的 head 部分调用 map 函数
<ul>
<li>
Home
</li>
<li>
Offers
</li>
<li>
Store
</li>
<li>
Map
</li>
<li>
...
</li>
</ul>$('#map_canvas').gmap({'maxZoom':17,'center': new google.maps.LatLng(center_latitude,center_longitude),'callback': function() {
var self = this;
// Get the current position
self.getCurrentPosition(function(position, status) {
// If we got the current position, add the marker
if ( status === 'OK' ) {
// Stor current position in a var
var clientPosition = new google.maps.LatLng(position.coords.latitude, position.coords.longitude);
// Add the current position marker
self.addMarker({ id:'mark_pos','position': clientPosition, 'bounds': true})
.click(function() {
$('#map_canvas').gmap('openInfoWindow', { 'content': Lang.mapHtml.txt_marker_my_position_content }, this);
});
// Paint a blue cirecle where your position is
self.addShape('Circle', {
'strokeWeight': 0,
'fillColor':"#008595",
'fillOpacity': 0.25,
'center': clientPosition,
'radius': 15,
'clickable': false
});
// Bind direction marker button and show it
$("#divBtnDirection").show();
var that = this;
$("#btn_directions").click(function() {
that.displayDirections({ 'origin': clientPosition, 'destination':center_latitude+','+center_longitude , 'travelMode': google.maps.DirectionsTravelMode.DRIVING }, { 'panel': document.getElementById('directions') }, function(result, status) {
if ( status === 'OK' ) {
$('#map_canvas').gmap('clear', 'markers');
$("#divBtnDirection").hide();
$("#directions").fadeIn(1000);
}
});
});
}
// Add the shopping centers marker
self.addMarker( { id:'mark_center', 'position': center_latitude+','+center_longitude, 'bounds': true }).click(function() {
$('#map_canvas').gmap('openInfoWindow', { 'content': Lang.mapHtml.txt_marker_center_content }, this);
});
});
}});$(function(){
//your function call
});希望这有帮助..