我目前在谷歌地圖API3的這個問題上敲我的頭。地圖部分加載在右上角,但是當我刷新頁面時,地圖會完全顯示。 下面是一個例子:谷歌地圖部分顯示
https://sites.google.com/site/dferrai/home/Sentieri%20ischitani%202014-02-28%2010-06-15.png
所有父div的具有高度設置爲100%。我相信這個問題與使用Jquery mobile時遇到的問題非常相似。正如你所看到的,我沒有使用Jquery mobile,但是我以相同的方式管理頁面。每個頁面都是一個部分,它們都包含在一個頁面中,並根據需要使用Javascript進行顯示。很明顯,在該部分變得可見之前加載地圖,並且在那裏出現毛刺。任何想法如何解決它? 這裏是我的簡化代碼:http://jsfiddle.net/elektray/V9LxT/1/
/*Script for maps*/
var lat, lon;
function onBodyLoad()
{
console.log("subscribing to the deviceready event");
document.addEventListener("deviceready", onDeviceReady, false);
}
function onDeviceReady() {
navigator.geolocation.getCurrentPosition(onGeoSuccess, onGeoError);
}
function onGeoSuccess(position) {
lat = position.coords.latitude;
lon = position.coords.longitude;
var currentposition = new google.maps.LatLng(lat,lon);
console.log("currentposition " + currentposition);
var mapoptions = {
zoom: 8,
center: currentposition,
mapTypeId: google.maps.MapTypeId.TERRAIN
};
var map = new google.maps.Map(document.getElementById("map_canvas"), mapoptions);
var iconBase = 'images/';
/*Create marker for user current position*/
var marker = new google.maps.Marker({
position: currentposition,
map: map,
icon: iconBase + 'my-location.svg'
});
console.log("creating map1");
/*Create marker for walks starting points with info dialog*/
var walk1Start = new google.maps.LatLng (59.32522, 18.07002);
var contentString = '<div id="content">'+
'<div class="siteNotice">'+
'</div>'+
'<h2 id="firstHeading" class="firstHeading">Walk1</h2>'+
'<div id="bodyContent">'+
'<p>Prima linea di decrizione ' +
'Senconda linea di decrizione '+
'Heritage Site.</p>'+
'</div>'+
'</div>';
var infowindow = new google.maps.InfoWindow({
content: contentString
});
var walk1Marker = new google.maps.Marker ({
position: walk1Start,
map: map,
icon: iconBase + 'map-icon-hover.svg',
title: "Walk 1"
});
google.maps.event.addListener(walk1Marker, 'click', function() {
infowindow.open(map,walk1Marker);
});
/*Script to adjust map view to all markers*/
// Make an array of the LatLng's of the markers you want to show
var LatLngList = new Array (currentposition, walk1Start);
// Create a new viewpoint bound
var bounds = new google.maps.LatLngBounds();
// Go through each...
for (var i = 0, LtLgLen = LatLngList.length; i < LtLgLen; i++) {
// And increase the bounds to take this point
bounds.extend (LatLngList[i]);
}
// Fit these bounds to the map
map.fitBounds (bounds);
}
function onGeoError(error) {
if(error == 1) {
alert('Turn on Geolocation services.');
}
}
我感謝你的幫助
感謝
我沒有看到一個地圖都在你的小提琴? – putvande
小提琴不包含CSS - 但是,嘗試固定寬度和500px乘500px的高度以使地圖工作並從中取出。 –
查看[google.maps.Map resize事件](https://developers.google.com/maps/documentation/javascript/reference#Map):'當div更改大小時,開發人員應在地圖上觸發此事件: google.maps.event.trigger(地圖,'調整大小')。(如果你真的有地圖大小完全指定) – geocodezip