1

我设法创建了一个简单的地图，其中有两个目的地之间的标记路线。此外，我需要拉出距离值，然后用它做一些基本的数学运算（将它乘以 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>

4

3 回答 3

2

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

您想要的是等到计算出方向和距离，您实际上不需要从方向面板中读取它，您可以直接从 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);
        });
}
于 2013-07-11T23:06:32.547 回答
0

这里不需要有两个标签；你可以把所有东西都放在一个里面。您的一些函数使用 jQuery 选择器，尝试将它们全部放在 $(document).ready() 中，这将保证所有选定的元素在调用时都可用：

$(document).ready(function(){

  //Insert your functions with selectors here

});

这是重新排列的代码，其中包含 document.ready 中的所有内容：http: //jsbin.com/iqejiy/1/edit

希望能帮助到你。

于 2013-07-09T13:34:16.517 回答
-1

我想你在document.ready()这里失踪了。

于 2013-07-09T11:40:16.617 回答