点击按钮打开谷歌地图，phonegap

Opening Google Maps Map on button click, phonegap

本文关键字：谷歌地图 phonegap 按钮      更新时间：2023-09-26

我的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。

用于调用谷歌地图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; }

相关文章：