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事件在加载所有资源后触发，但单击按钮时将调用函数ShowGooglemaps。此时通常已经触发了load - 事件（并且不会再次触发，并且回调也不会立即执行，因为例如jQuery的就绪监听器就会执行）。

这一行：

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

..没用，initialize永远不会被调用。

无需将初始化地图的代码包装到initialize - 函数中，只需执行代码而无需等待load - 事件。

Google地图未显示（点击按钮）

1 个答案: