Question

我的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的规则，向addEventListener添加click并在点击按钮时创建地图：

...

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

...

当点击标识为div的按钮时，我尝试使用地图填充带有map标识的location。

Answer 1

用于调用google maps 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; }

Answer 2

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

在css文件中添加这些行

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

还会在打开地图的点击方法的末尾添加此行

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

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

按钮单击，phonegap打开Google Maps Map

2 个答案:

按钮单击，phonegap打开Goog​​le Maps Map

2 个答案:

按钮单击，phonegap打开Google Maps Map