Google地图不显示（单击按钮时）

Question

我在生成Google地图并将其显示在页面上时遇到问题。 这是我的看法。 我该怎么做才能使其正常工作？

<?php 
    $telephones = $this->telephones;
    $telephonesa = array();
    foreach($telephones as $telephone){
        array_push($telephonesa, $telephone);
    }
?>

<div id="googleMap" style="width:500px;height:380px;"></div>

// client-side
<script>
var object = {};
    object.dist = 100000;
    $(document).ready(function() {
        $( "#getclosest" ).click(function() {
            $.mobile.loading( 'show' );
            getLocation();
        });
    });

    function getLocation()
    {
        if (navigator.geolocation)
        {
            navigator.geolocation.getCurrentPosition(showPosition);
        }
        else{
            alert("Geolocation is not supported by this browser.");
        }
    }

    function showPosition(position)
    {
        var currlat = position.coords.latitude;
        var currlon = position.coords.longitude;

        getClosest(currlat, currlon);
    }

    function getClosest(currlat, currlon){

        var telephones = <?php echo json_encode($telephonesa); ?>;

        var length = telephones.length,
            element = null;
        for (var i = 0; i < length; i++) {
            element = telephones[i];
            object.distance = getDistanceBetweenLatLongs(currlat, currlon, element.Location.Longitude, element.Location.Latitude);

            if (object.distance < object.dist){
                object.dist = object.distance;
                object.index = i;
            }
        }

        showToilet(object.index);
    }

    function showToilet(index){
        var telephones = <?php echo json_encode($telephonesa); ?>;
        var telephone = telephones[index];

        showGooglemaps(telephone.Location.Latitude, telephone.Location.Longitude);
    }

    function showGooglemaps(lat,lon){
        google.maps.visualRefresh = true;
        var myCenter=new google.maps.LatLng(lat,lon);
        var marker;

        function initialize()
        {
            var mapProp = {
                center:myCenter,
                zoom:13,
                mapTypeId:google.maps.MapTypeId.ROADMAP
            };
            var map=new google.maps.Map(document.getElementById("googleMap")
                ,mapProp);


            marker=new google.maps.Marker({
                position:myCenter,
                animation:google.maps.Animation.BOUNCE
            });

            marker.setMap(map);

            google.maps.event.trigger(map, 'load');

        }
        $("#getclosest").hide();
        $.mobile.loading( 'hide' );

        google.maps.event.addDomListener(window, 'load', initialize);
    }

如您所见，我调用了一个函数“ ShowGooglemaps”，但输出未显示任何信息……

Answer 1

load所有资源后，将触发window的load event，但是当您单击按钮时，将调用ShowGooglemaps函数。 这时通常已经触发了load event（不会再次触发，并且回调也不会像jQuery的ready-listener那样立即执行）。

这行：

google.maps.event.addDomListener(window, 'load', initialize);

..是没有用的， initialize将永远不会被调用。

无需将初始化映射的代码包装到initialize -function中，只需执行代码即可，而无需等待load -event。