Question

我非常擅长使用jquerymobile和Google地图。我将在网上开始简单的示例。我有一个jquery移动网站，其上有其他功能，但我需要加载谷歌地图。我决定最好的方法是在用户点击jquery按钮后从单独的页面打开地图。到目前为止，非常好。

好的，自从我上一篇关于此事的帖子以来，我已经取得了一些进展，但我发现了一些真正的问题，而且我不知道是什么引起了它。这是我的问题。 http://jsfiddle.net/Nemesiss/J82UJ/

将页面加载到移动设备时，它会像桌面版一样呈现。
点击时返回按钮不会转到已编码的网址，它会缩放到已加载地图上的奇怪区域。

我希望看到的事情：

更改代码，以便用户可以使用其当前位置或输入起始目的地
有开始和结束目的地字段，这样如果他们输入地址，他们就不需要进入城市。城市位置是默认设置，我不希望他们在其他城市或地点进行搜索。

以下是我的代码：

     <!DOCTYPE html>
<html>
<head>
    <title>jQuery mobile with Google maps geo directions example</title>
    <meta content="minimum-scale=1.0, width=device-width, maximum-scale=0.6667, user-scalable=no" name="viewport" />
    <meta name="apple-mobile-web-app-capable" content="yes">
    <link rel="stylesheet" href="jQuerythemes/jquery.mobile.theme-1.4.0.min.css" />
    <link rel="stylesheet" href="jQuerythemes/jquery.mobile.structure-1.4.0.min.css" />
    <link rel="stylesheet" href="jQuerythemes/jquery.mobile.icons-1.4.0.min.css" />

    <script src="jQuerythemes/jquery-1.10.2.min.js"></script>
    <script src="jQuerythemes/jquery.mobile-1.4.0.min.js"></script>

    <script type="text/javascript" src="http://maps.google.com/maps/api/js?v=3&sensor=false&language=en"></script>
    <script type="text/javascript">
        $(document).on("pageinit", "#map_page", function () {
            initialize();
        });

        $(document).on('click', '#submit', function (e) {
            e.preventDefault();
            calculateRoute();
        });

        var directionDisplay,
            directionsService = new google.maps.DirectionsService(),
            map;

        function initialize() {
            directionsDisplay = new google.maps.DirectionsRenderer();
            var mapCenter = new google.maps.LatLng(-34.397, 150.644);

            var myOptions = {
                mapTypeControl: false,
                zoom: 12,
                mapTypeId: google.maps.MapTypeId.ROADMAP,
                center: mapCenter
            }

            map = new google.maps.Map(document.getElementById("map_canvas"), myOptions);
            directionsDisplay.setMap(map);
            directionsDisplay.setPanel(document.getElementById("directions"));
        }

        function calculateRoute() {
            var selectedMode = $("#mode").val(),
                start = $("#from").val(),
                end = $("#to").val();

            if (start == '' || end == '') {
                // cannot calculate route
                $("#results").hide();
                return;
            }
            else {
                var request = {
                    origin: start,
                    destination: end,
                    travelMode: google.maps.DirectionsTravelMode[selectedMode]
                };

                directionsService.route(request, function (response, status) {
                    if (status == google.maps.DirectionsStatus.OK) {
                        directionsDisplay.setDirections(response);
                        $("#results").show();
                        /*
                            var myRoute = response.routes[0].legs[0];
                            for (var i = 0; i < myRoute.steps.length; i++) {
                                alert(myRoute.steps[i].instructions);
                            }
                        */
                    }
                    else {
                        $("#results").hide();
                    }
                });

            }
        }
    </script>
</head>
<body>
    <div data-role="page" id="map_page">
        <div data-role="header">
            <h1><a href="#"></a>Google Directions Map</h1>
            <a href="http://goto this site onclick/" data-role="button" id="submit">Return</a>
        </div>
        <div data-role="content">
            <div >
                <div id="map_canvas" style="width: 100%; height: 300px"></div>
                <div data-role="fieldcontain">
                    <label for="mode" class="select">Transportation method:</label>
                    <select name="select-choice-0" id="mode">
                        <option value="TRANSIT">Public Transit</option>
                        <option value="DRIVING">Driving</option>
                        <option value="WALKING">Walking</option>
                        <option value="BICYCLING">Bicycling</option>
                    </select>
                </div>
                <div data-role="fieldcontain">
                    <label for="from">From</label>
                    <input type="text" id="from" value="My City" />
                </div>
                <div data-role="fieldcontain">
                    <label for="to">To</label>
                    <input type="text" id="to" value="My City" />
                </div>            
                <a data-icon="search" data-role="button" href="#" id="submit">Get directions</a>
            </div>
            <div id="results" style="display:none;">
                <div id="directions"></div>
            </div>
        </div>
    </div>
</body>
</html>

谢谢！

在JqueryMobile中嵌入Google地图

0 个答案: