phonegap jquery mobile google maps api 显示灰色答案

【问题标题】：phonegap jquery mobile google maps api display grayphonegap jquery mobile google maps api 显示灰色
【发布时间】：2016-10-22 05:59:41
【问题描述】：

我找了很久很久，还是没有找到解决办法。

我尝试了这些解决方案，但它们都不起作用。

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>

【问题讨论】：

标签： javascript html css jquery-mobile google-maps-api-3

【解决方案1】：

我找到了一个解决方案，当包含 google map div 标签的页面显示时，google map trigger resize。

前提条件：在ondeviceready函数中初始化你的谷歌地图

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);
});

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

capture2

另外，解决多标记问题。

capture3

【讨论】：