无法在jQuery Mobile上完全载入Google Maps API v3 [英] Unable to get Google Maps API v3 to completely load on jQuery Mobile
本文介绍了无法在jQuery Mobile上完全载入Google Maps API v3的处理方法，对大家解决问题具有一定的参考价值，需要的朋友们下面随着小编来一起学习吧！
问题描述
无法在jquery mobile上加载google地图。它加载，但只有当您在浏览器上点击刷新。我目前使用jquery.mobile 1.3.1和jquery 1.9.1。我不知道该怎么做，因为我正在学习所有这些。
function initialize（）{
//添加地图，地图类型
var map = new google.maps.Map（document.getElementById（'outage_map'），{
zoom：9，
center：new google.maps.LatLng（37.7749295，-122.4194155），
disableDefaultUI：true，
mapTypeId：google.maps.MapTypeId.TERRAIN
}）;
var $ map = $（'＃outage_map'）;
$ map.height（$（window）.height（200） - $ map.offset（）。top）;
//声明标记调用它'i'
var marker，i;
//声明信息窗口
var infowindow = new google.maps.InfoWindow（{
maxWidth：250，
}）;
//添加位置
var locations = [
['San Francisco：Power Outage< br>已举报：9:00 am< br>估计恢复时间：12:00 pm'，37.789241，-122.41073，'images / electric.png']，
['San Francisco：停电< br>已举报：9:00 am< br>估计恢复时间：12:00 pm'，37.806992，-122.41051，'images / electric.png']，
['San Francisco：Gas Interruption< br>已举报：9:30 am< br>估计恢复时间：12:00 am'，37.789241，-122.41073，'images / gas.png']，
['旧金山：计划维护< br>时间：9:00 am to 2:30 pm'，37.784748，-122.468982，'images / maintenance.png']，
['Shingletown：Power Outage< br&已举报：9:00 am< br>估计恢复时间：12:00 pm'，40.4923784，-121.8891586，'images / electric.png']，
['San Mateo：Maintenance< br&时间：10:00 am to 12:00 pm'，37.5629917，-122.3255254，'images / maintenance.png']，
['Concord：Power Outage< br&举报为：11:10 pm< br>估计恢复时间：4:00 am'，37.9779776，-122.0310733，'images / electric.png']，
['Hayward：Power Outage< br&举报为：11:10 pm< br>估计恢复时间：4:00 am'，37.6688205，-122.0807964，'images / electric.png']，
['Alameda：Maintenance< br&时间：9:00 am to 3:30 pm'，37.7652065，-122.2416355，'images / maintenance.png']，
];
//为每个位置添加标记
for（i = 0; i< locations.length; i ++）{
marker = new google.maps.Marker（{
position：new google.maps.LatLng（locations [i] [1]，locations [i] [2]），
map：map，
icon：locations [i]
}）;
//点击function to marker，弹出infowindow
google.maps.event.addListener（marker，'click'，（function（marker，i）{
return function （）{
infowindow.setContent（locations [i] [0]）;
infowindow.open（map，marker）;
}
} ;
}
}
google.maps.event.addDomListener（window，'load'，initialize）;
地图位于另一个名为page的容器中
< div class =pagedata-role =pageid =map_main>
<！ - navagation - >
< div data-theme =adata-role =headerdata-position =fixed>
< a data-role =buttondata-direction =reversedata-transition =slide
href =index copy.htmldata-icon =arrow-ldata -iconpos =leftclass =ui-btn-left>
Main
< / a>
< h3>
停电地图
< / h3>
< / div>
<！ - navagation - >
<！ - 地图 - >
< div class =map_imageid =outage_map>< / div>
<！ - 地图 - >
解决方案>
简介
为了能够在jQM页面上显示地图，您必须在pageshow事件期间显示地图。这是因为正确的页面高度只能在该点计算。但即使内容div不会覆盖整个可用的表面，所以我们需要手动修复。这不是一个错误，它只是如何jQuery Mobile工作。
工作示例
工作示例： http://jsfiddle.net/Gajotres/7kGdE/
代码
也可以使用 getRealContentHeight 设置正确的内容高度。
$（document）.on（'pageshow'，'＃index'，function（e，data）{
$（'＃map_canvas'）。css '，getRealContentHeight（））;
//这是我们允许的最小缩放级别
var minZoomLevel = 12;
var map = new google .maps.Map（document.getElementById（'map_canvas'），{
zoom：minZoomLevel，
center：new google.maps.LatLng（38.50，-90.50），
mapTypeId：google。 maps.MapTypeId.ROADMAP
}）;
//北美洲的界限
var strictBounds = new google.maps.LatLngBounds（
new google.maps.LatLng （28.70，-127.50），
new google.maps.LatLng（48.85，-55.90）
）;
//监听dragend事件
google.maps.event.addListener（map，'dragend'，function（）{
if（strictBounds.contains（map.getCenter （））return;
//我们超出范围 - 将映射移动到范围内
var c = map.getCenter（），
x = c.lng（），
y = c.lat（），
maxX = strictBounds.getNorthEast（）。lng（），
maxY = strictBounds.getNorthEast ，
minX = strictBounds.getSouthWest（）。lng（），
minY = strictBounds.getSouthWest（）。lat（）;
if（x
if（y
map.setCenter（new google.maps.LatLng（y，x））;
}）;
//限制缩放级别
google.maps.event.addListener（map，'zoom_changed'，function（）{
if（map.getZoom（）< minZoomLevel ）map.setZoom（minZoomLevel）;
}）;
}）;
function getRealContentHeight（）{
var header = $ .mobile.activePage.find（div [data-role ='header']：visible
var footer = $ .mobile.activePage.find（div [data-role ='footer']：visible）;
var content = $ .mobile.activePage.find（div [data-role ='content']：visible：visible）;
var viewport_height = $（window）.height（）;
var content_height = viewport_height - header.outerHeight（） - footer.outerHeight（）;
if（（content.outerHeight（） - header.outerHeight（） - footer.outerHeight（））< = viewport_height）{
content_height - =（content.outerHeight（） - content.height ）;
}
return content_height;
}
编辑
还有另一个解决方案，不需要javascript，它只能使用CSS。如果您想了解更多信息，请查看 此处 。你想看看最后一个解决方案和例子。
Couldn't load google maps on jquery mobile. It does load, but only when you hit refresh on browser. I am currently using jquery.mobile 1.3.1 and jquery 1.9.1. I am not sure how to do this because I am learning all this.
function initialize() {
//add map, the type of map
var map = new google.maps.Map(document.getElementById('outage_map'), {
zoom: 9,
center: new google.maps.LatLng(37.7749295, -122.4194155),
disableDefaultUI: true,
mapTypeId: google.maps.MapTypeId.TERRAIN
});
var $map = $('#outage_map');
$map.height( $(window).height(200) - $map.offset().top );
//declare marker call it 'i'
var marker, i;
//declare infowindow
var infowindow = new google.maps.InfoWindow({
maxWidth: 250,
});
//add locations
var locations = [
['San Francisco: Power Outage <br> Reported: 9:00am <br> Estimated Restore Time: 12:00pm', 37.789241, -122.41073, 'images/electric.png'],
['San Francisco: Power Outage <br> Reported: 9:00am <br> Estimated Restore Time: 12:00pm', 37.806992, -122.41051, 'images/electric.png'],
['San Francisco: Gas Interruption <br> Reported: 9:30am <br> Estimated Restore Time: 12:00am', 37.789241, -122.41073, 'images/gas.png'],
['San Francisco: Planned Maintenance <br> Time: 9:00am to 2:30pm ', 37.784748, -122.468982, 'images/maintenance.png'],
['Shingletown: Power Outage <br> Reported: 9:00am <br> Estimated Restore Time: 12:00pm', 40.4923784, -121.8891586, 'images/electric.png'],
['San Mateo: Maintenance <br> Time: 10:00am to 12:00pm', 37.5629917, -122.3255254, 'images/maintenance.png'],
['Concord: Power Outage <br> Reported: 11:10pm <br> Estimated Restore Time: 4:00am', 37.9779776, -122.0310733, 'images/electric.png'],
['Hayward: Power Outage <br> Reported: 11:10pm <br> Estimated Restore Time: 4:00am', 37.6688205, -122.0807964, 'images/electric.png'],
['Alameda: Maintenance <br> Time: 9:00am to 3:30pm', 37.7652065, -122.2416355, 'images/maintenance.png'],
];
//add marker to each locations
for (i = 0; i < locations.length; i++) {
marker = new google.maps.Marker({
position: new google.maps.LatLng(locations[i][1], locations[i][2]),
map: map,
icon: locations[i][3]
});
//click function to marker, pops up infowindow
google.maps.event.addListener(marker, 'click', (function(marker, i) {
return function() {
infowindow.setContent(locations[i][0]);
infowindow.open(map, marker);
}
})(marker, i));
}
}
google.maps.event.addDomListener(window, 'load', initialize);
The map is within another container called "page"
<div class="page" data-role="page" id="map_main">
<!-- navagation -->
<div data-theme="a" data-role="header" data-position="fixed">
<a data-role="button" data-direction="reverse" data-transition="slide"
href="index copy.html" data-icon="arrow-l" data-iconpos="left" class="ui-btn-left">
Main
</a>
<h3>
Outage Map
</h3>
</div>
<!-- navagation -->
<!-- Map -->
<div class="map_image" id="outage_map"></div>
<!-- Map -->
解决方案
Intro
To be able to show map on jQM page you MUST show it during the pageshow event. This is because correct page height can be calculated only at that point. But even then content div will not cover whole available surface so we need to fix this manually. This is not an error it is simply how jQuery Mobile works.
Working example
Working example: http://jsfiddle.net/Gajotres/7kGdE/
Code
Also function getRealContentHeight is used to set correct content height.
$(document).on('pageshow', '#index',function(e,data){
$('#map_canvas').css('height',getRealContentHeight());
// This is the minimum zoom level that we'll allow
var minZoomLevel = 12;
var map = new google.maps.Map(document.getElementById('map_canvas'), {
zoom: minZoomLevel,
center: new google.maps.LatLng(38.50, -90.50),
mapTypeId: google.maps.MapTypeId.ROADMAP
});
// Bounds for North America
var strictBounds = new google.maps.LatLngBounds(
new google.maps.LatLng(28.70, -127.50),
new google.maps.LatLng(48.85, -55.90)
);
// Listen for the dragend event
google.maps.event.addListener(map, 'dragend', function() {
if (strictBounds.contains(map.getCenter())) return;
// We're out of bounds - Move the map back within the bounds
var c = map.getCenter(),
x = c.lng(),
y = c.lat(),
maxX = strictBounds.getNorthEast().lng(),
maxY = strictBounds.getNorthEast().lat(),
minX = strictBounds.getSouthWest().lng(),
minY = strictBounds.getSouthWest().lat();
if (x < minX) x = minX;
if (x > maxX) x = maxX;
if (y < minY) y = minY;
if (y > maxY) y = maxY;
map.setCenter(new google.maps.LatLng(y, x));
});
// Limit the zoom level
google.maps.event.addListener(map, 'zoom_changed', function() {
if (map.getZoom() < minZoomLevel) map.setZoom(minZoomLevel);
});
});
function getRealContentHeight() {
var header = $.mobile.activePage.find("div[data-role='header']:visible");
var footer = $.mobile.activePage.find("div[data-role='footer']:visible");
var content = $.mobile.activePage.find("div[data-role='content']:visible:visible");
var viewport_height = $(window).height();
var content_height = viewport_height - header.outerHeight() - footer.outerHeight();
if((content.outerHeight() - header.outerHeight() - footer.outerHeight()) <= viewport_height) {
content_height -= (content.outerHeight() - content.height());
}
return content_height;
}
Edit
There's also another solution that don't requires javascript and it can be done only with a CSS. If you want to find out more take a look HERE. You would want to look at a last solution and example.
这篇关于无法在jQuery Mobile上完全载入Google Maps API v3的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
查看全文
