0

我在生成 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”，但输出什么也没显示...

4

1 回答 1

1

当所有资源都被加载时触发load-event ，但是当你点击按钮时会调用该函数。这时候通常-event 已经被触发（并且不会再次触发，回调也不会像 jQuery 的就绪监听器那样立即执行）。windowShowGooglemapsload

这一行：

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

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

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

于 2013-08-24T22:49:14.063 回答