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

Posted 2023-03-15

【中文标题】点击按钮打开谷歌地图地图，电话间隙

【英文标题】：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 这是问题

【参考方案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);

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