点击按钮打开谷歌地图地图，电话间隙答案

【问题标题】：Opening Google Maps Map on button click, phonegap点击按钮打开谷歌地图地图，电话间隙
【发布时间】：2015-11-21 15:02:06
【问题描述】：

我的 HTML（单击按钮后我试图在 div 中插入地图）：

...

<div id="map"></div>

...

<button id="location">log your location</button>

<script async defer
    src="https://maps.googleapis.com/maps/api/js?key=xxxmyapikeyxxx&callback=">
</script>

...

我的 javascript 代码（我试图遵守 phonegap 规则，通过在 click 中添加 addEventListener 并在单击按钮时创建地图：

...

onDeviceReady: function() {
    app.receivedEvent('deviceready');
    document.getElementById("camera").addEventListener("click", function() {
        navigator.camera.getPicture(function(imagePath){
            document.getElementById("photoImg").setAttribute("src", imagePath);
        }, function(){
            alert("Photo cancelled");
        }, {
            destinationType: navigator.camera.DestinationType.FILE_URI
        });
    }, false);

    document.getElementById("location").addEventListener("click", function() {
        var map;
        map = new google.maps.Map(document.getElementById('map'), {
            center: {lat: -34.397, lng: 150.644},
            zoom: 8
        });
    });
},

...

当单击 ID 为 location 的按钮时，我正在尝试使用地图填充 ID 为 map 的 div。

【问题讨论】：

@dwij 这是问题

标签： javascript ios cordova google-maps phonegap-build

【解决方案1】：

用于调用谷歌地图 api：

<script async defer src="https://maps.googleapis.com/maps/api/js?key=AIzaSyAffJ2OZVv3lSo-tWqZ-MpVDLoMSLzYLiM&callback="> </script>

我把上面的代码直接放在了按钮下面。

没有对 index.js 进行任何更改。

我认为它起作用的原因可能是因为我将此 CSS 添加到了 ID 为 map 的 div 的 index.css 文件中：

#map { width: 100%; height: 80%; position: absolute; }

【讨论】：

【解决方案2】：

将您的 div 宽度和高度设置为其所在容器的 100%。

在 css 文件中添加这些行

#div_id{
     width: 100%,
     height: 100%
}

还要在打开地图的点击方法的末尾添加这一行

setTimeout(function(){
       google.maps.event.trigger(map1, 'resize');
},0);

这将有助于删除地图加载后您可能会看到的灰色地图

【讨论】：