Question

我设法创建了一个简单的地图，其中包含两个目的地之间的标记路线。另外，我需要拉距离值然后用它做一些基本的数学运算（乘以2）。一切正常，但不是页面加载。更精确的是，地图显示在页面加载和距离上，但是距离值不会被拉动而且它不会乘以2.我已经设法让它在鼠标移动时工作，但它不是完美的替代品。

以下是代码：

<head>
    <meta name="viewport" content="initial-scale=1.0, user-scalable=no">
    <meta charset="utf-8">
    <title>Directions</title>
    <link href="/maps/documentation/javascript/examples/default.css" rel="stylesheet">
    <script src="https://maps.googleapis.com/maps/api/js?v=3.exp&sensor=false&region=US"></script>
    <script src="http://code.jquery.com/jquery-1.7.1.js" type="text/javascript"></script>
    <script src="//ajax.googleapis.com/ajax/libs/jqueryui/1.8.18/jquery-ui.min.js"></script>
    <script src="http://www.pengoworks.com/workshop/jquery/calculation/jquery.calculation.min.js" type="text/javascript"></script>
    <script>
        $(document).ready(function() {

            var rendererOptions = {
                draggable: false
            };
            var directionsDisplay = new google.maps.DirectionsRenderer(rendererOptions);;
            var directionsService = new google.maps.DirectionsService();
            var map;

            function initialize() {

                var mapOptions = {
                    zoom: 7,
                    mapTypeId: google.maps.MapTypeId.ROADMAP,
                };
                map = new google.maps.Map(document.getElementById('map-canvas'), mapOptions);
                directionsDisplay.setMap(map);
                directionsDisplay.setPanel(document.getElementById('directionsPanel'));

                google.maps.event.addListener(directionsDisplay, 'directions_changed', function() {
                    computeTotalDistance(directionsDisplay.directions);
                });

                calcRoute();
            }

            function calcRoute() {

                var request = {
                    origin: 'Houston',
                    destination: 'Dallas',
                    travelMode: google.maps.DirectionsTravelMode.DRIVING
                };
                directionsService.route(request, function(response, status) {
                    if (status == google.maps.DirectionsStatus.OK) {
                        directionsDisplay.setDirections(response);
                    }
                });
            }

            function computeTotalDistance(result) {
                var total = 0;
                var myroute = result.routes[0];
                for (var i = 0; i < myroute.legs.length; i++) {
                    total += myroute.legs[i].distance.value;
                }
                total = total / 1000.
                document.getElementById('total').innerHTML = total + ' km';
            }

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


            function stripint() {
                var val = $('[jsdisplay=distance]').text(); // get text content of <span jstcache="7">

                // Replace using regex instead of strings, to catch more than the first match
                val = val.replace(/\./g, "");
                val = val.replace(/,/g, ".");
                val = val.replace(/_/g, ",");

                $('#dist').val(val);
            }

            function recalc() {

                $("[id^='total_price_ht']").calc(
                // the equation to use for the calculation
                "di * 10", {
                    bind: "keyup",
                    di: $("[id^='dist']")
                }, function(s) {
                    // return the number as a dollar amount
                    return "$" + s.toFixed(2);
                });
            }

            $('#content').mousemove(function() {
                stripint();
                recalc();
            });

            stripint();
            recalc();
        });
    </script>
</head>

<body>
    <div id="content">
        <p>Distance: <span id="total"></span>

        </p>
        <input type="text" value="0" name="dist" id="dist" />
        <div id="total_price_ht_0" class="price">$0.00</div>
        <div id="map-canvas" style="width:100%; height:500px"></div>
        <div id="directionsPanel" style="width:100%; height:auto"></div>
    </div>
</body>

Answer 1

首先，您不需要使用$(document).ready()，因为您已经将initialize函数绑定到窗口onLoad事件google.maps.event.addDomListener(window, 'load', initialize);

你想要的是等到计算方向和距离，你真的不需要从directionsPanel读取它，你可以直接从API响应中读取你需要的任何内容。

使用calcRoute中的回调，如下所示：

directionsService.route(request, function(response, status) {
  if (status == google.maps.DirectionsStatus.OK) {
    directionsDisplay.setDirections(response);
    dist = response.routes[0].legs[0].distance.text;
    stripint(dist);
    recalc();
  }
});

您还需要向您添加dist参数strprint：

function stripint(val) {

  // Replace using regex instead of strings, to catch more than the first match
  val = val.replace(/\./g, "");
  val = val.replace(/,/g, ".");
  val = val.replace(/_/g, ",");

  $('#dist').val(val);
}

所以你的新代码不使用document.ready并在API响应时立即计算价格。

新的<script>代码：

var rendererOptions = {
    draggable: false
};
var directionsDisplay = new google.maps.DirectionsRenderer(rendererOptions);
var directionsService = new google.maps.DirectionsService();
var map;

function initialize() {

    var mapOptions = {
        zoom: 7,
        mapTypeId: google.maps.MapTypeId.ROADMAP,
    };
    map = new google.maps.Map(document.getElementById('map-canvas'), mapOptions);
    directionsDisplay.setMap(map);
    directionsDisplay.setPanel(document.getElementById('directionsPanel'));

    google.maps.event.addListener(directionsDisplay, 'directions_changed', function () {
        computeTotalDistance(directionsDisplay.directions);
    });

    calcRoute();
}

function calcRoute() {

    var request = {
        origin: 'Houston',
        destination: 'Dallas',
        travelMode: google.maps.DirectionsTravelMode.DRIVING
    };
    directionsService.route(request, function (response, status) {
        if (status == google.maps.DirectionsStatus.OK) {
            directionsDisplay.setDirections(response);
            dist = response.routes[0].legs[0].distance.text;
            stripint(dist);
            recalc();
        }
    });
}

function computeTotalDistance(result) {
    var total = 0;
    var myroute = result.routes[0];
    for (var i = 0; i < myroute.legs.length; i++) {
        total += myroute.legs[i].distance.value;
    }
    total = total / 1000.
    document.getElementById('total').innerHTML = total + ' km';
}

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


function stripint(val) {

    // Replace using regex instead of strings, to catch more than the first match
    val = val.replace(/\./g, "");
    val = val.replace(/,/g, ".");
    val = val.replace(/_/g, ",");

    $('#dist').val(val);
}

function recalc() {

    $("[id^='total_price_ht']").calc(
        // the equation to use for the calculation
        "di * 10", {
            bind: "keyup",
            di: $("[id^='dist']")
        }, function (s) {
            // return the number as a dollar amount
            return "$" + s.toFixed(2);
        });
}

Answer 2

这里不需要有两个标签;你可以将一切都放在一个。你的一些函数使用jQuery选择器，尝试将它们全部放在$（document）.ready（）中，这将保证所有选中的元素在被调用时都可用：

$(document).ready(function(){

  //Insert your functions with selectors here

});

以下是重新排列的代码，其中包含document.ready：http://jsbin.com/iqejiy/1/edit

中的所有内容

希望它有所帮助。

Answer 3

我认为你在这里缺少document.ready()。

在页面加载时触发多个javascript函数

3 个答案: