phonegap jquery 手机 google 地图 api 显示灰色

Question

找了好久好久没有找到解决方法

我尝试了这些解决方案，但其中 none 有效。

Google 地图触发调整大小。
更改环绕div高度、宽度100%。（溢出、显示、位置所有选项）
使用 Google 映射 API 回调。

捕获图像：

我的CSS文件

.content_location{
    padding: 0;
    padding-bottom: 50px;
    margin: auto;
    position: absolute !important;
    right: 0 !important;
    left: 0 !important;
    width: 95%;
    height: 35vh;
    overflow: visible;
}
#content_location{
    width: 100%;
    height: 100%;
    overflow: visible;
}

我的JavaScript文件

function showContent(index){
    ...
    var lat= goodslist[index]['latitude'];
    var lng= goodslist[index]['longitude'];
    var currentmapposition= new google.maps.LatLng(lat, lng);
    var mapoptions= {
        center: currentmapposition,
        zoom: 16,
        mapTypeId: google.maps.MapTypeId.ROADMAP
    };
    var infowindow= new google.maps.InfoWindow();
    var latlngbounds= new google.maps.LatLngBounds();

    if(!map){
        map= new google.maps.Map(document.getElementById('content_location'), mapoptions);
    }
    else{
        map.setOptions(mapoptions);
    }

    if(marker) marker.setMap(null);
    var tmpmarker = new google.maps.Marker({
        position: currentmapposition,
        map: map
    });
    marker= tmpmarker;

    google.maps.event.addListener(marker, 'click', (function(marker){
        return function(){
            infowindow.setContent(goodslist[index]['goodsname'] + ' : ' + goodslist[index]['address']);
            infowindow.open(map, marker);   
        }
    })(marker));
    google.maps.event.trigger(map,'resize');
    $('#content_location').trigger('create');
}

我的HTML文件

<div class="content_location">
   <div id="content_location"></div>
</div>

Answer 1

我找到了一个解决方案，当显示包含 google 地图 div 标签的页面时，google 地图触发调整大小。

前提条件：在 ondeviceready 函数中初始化您的 google 地图

function onDeviceReady(){
    ...
    map= new google.maps.Map(document.getElementById('content_location'),{
        center: new google.maps.LatLng(37.552898, 126.981002),
        zoom: 15,
        mapTypeId: google.maps.MapTypeId.ROADMAP
    });
}

在我的 js 文件中，关于我的问题，而不是 showContent()

$('#content_page').on('pageshow', function(){
    var lat= goodslist[goodsindex]['latitude'];
    var lng= goodslist[goodsindex]['longitude'];
    var latlng= new google.maps.LatLng(lat,lng);
    google.maps.event.trigger(map, 'resize');
    map.setCenter(latlng);
});

触发 google 调整地图大小并设置中心。效果很好。

capture2

另外，对多个marker的解决问题。

capture3

phonegap jquery 手机 google 地图 api 显示灰色

phonegap jquery mobile google maps api display gray

html

javascript

css

google-maps-api-3

jquery-mobile