Question

我看到了这个脚本here，它完全符合我的需要，我正在构建一个Jquery移动网站，我想要的是只在点击按钮时显示地图

我发现很难开始工作。

 var map,
            currentPosition,
            directionsDisplay, 
            directionsService,
            destinationLatitude = latt,
            destinationLongitude = lonn;

        function initializeMapAndCalculateRoute(lat, lon)
        {
            directionsDisplay = new google.maps.DirectionsRenderer(); 
            directionsService = new google.maps.DirectionsService();

            currentPosition = new google.maps.LatLng(lat, lon);

            map = new google.maps.Map(document.getElementById('map_canvas'), {
               zoom: 25,
               center: currentPosition,
               mapTypeId: google.maps.MapTypeId.ROADMAP
             });

            directionsDisplay.setMap(map);

             var currentPositionMarker = new google.maps.Marker({
                position: currentPosition,
                map: map,
                title: "Current position"
            });



            // calculate Route
            calculateRoute();
        }

        function locError(error) {
           // the current position could not be located
        }

        function locSuccess(position) {
            // initialize map with current position and calculate the route
            initializeMapAndCalculateRoute(position.coords.latitude, position.coords.longitude);
        }

        function calculateRoute() {

            var targetDestination =  new google.maps.LatLng(destinationLatitude, destinationLongitude);
            if (currentPosition != '' && targetDestination != '') {

                var request = {
                    origin: currentPosition, 
                    destination: targetDestination,
                    travelMode: google.maps.DirectionsTravelMode["DRIVING"]
                };

                directionsService.route(request, function(response, status) {
                    if (status == google.maps.DirectionsStatus.OK) {
                        directionsDisplay.setPanel(document.getElementById("directions"));
                        directionsDisplay.setDirections(response); 

                        /*
                            var myRoute = response.routes[0].legs[0];
                            for (var i = 0; i < myRoute.steps.length; i++) {
                                alert(myRoute.steps[i].instructions);
                            }
                        */
                        $("#results").show();
                    }
                    else {
                        $("#results").hide();
                    }
                });
            }
            else {
                $("#results").hide();
            }
        }

      $(document).live("pagebeforeshow", "#detailPage", function() {
            // find current position and on success initialize map and calculate the route
            navigator.geolocation.getCurrentPosition(locSuccess, locError);
        });

我在点击事件中包装它，当我点击没有任何反应时，浏览器控制台报告 - 未捕获TypeError：对象#map-button没有方法'click'

('#map-button').click(function(){

 // Code for map goes here

 });

HTML

<div data-role="page" id="detailPage">
<div data-role="header">
<h1>Detail Page</h1>
</div>
<div data-role="content">
<div id="itemDetails"></div>
 <button id="map-button">Get Direction</button>
 </div>
  <div id="map_canvas" style="height:300px; width:100%"></div>

   <div id="results" style="display:none;">
     <div id="directions"></div>
   </div>

   <div data-role="footer">
    <h4>Footer</h4>
    </div>
  </div>

我只希望在点击按钮后显示地图。任何帮助将不胜感激。

Answer 1

您错过了“$”

$('#map-button').click(function(){

// Code for map goes here

});

这应该有助于点击事件。

正如Omar上面提到的当前版本的Jquery .on被用来代替.live

$(document).on("pagebeforeshow", "#detailPage", function() {
  // find current position and on success initialize map and calculate the route
  navigator.geolocation.getCurrentPosition(locSuccess, locError);
});

如何让Jquery Mobile - Google地图仅在单击按钮时显示

1 个答案: