1

这个演示链接

带有单个符号的演示

如上所述，我在谷歌地图上显示点。

我想计算沿路径行进的距离。

不是按起点和终点计算，而是按行进路径计算。

如何使用谷歌计算距离来做到这一点。

我使用了计算距离示例

<meta name="viewport" content="initial-scale=1.0, user-scalable=no"/>
<style type="text/css">
    html {
        height: 100%
    }

    body {
        height: 100%;
        margin: 0px;
        padding: 0px
    }

    #map_canvas {
        height: 100%;
    }
</style>
<script type="text/javascript"
        src="http://maps.google.com/maps/api/js?libraries=geometry&sensor=false&v=3.3">
</script>
<script type="text/javascript">




    var g = google.maps;
    function initialize() {
        var latlng = new g.LatLng(62.397, 12.644);
        var myOptions = {
            zoom: 4,
            center: latlng,
            mapTypeId: g.MapTypeId.ROADMAP
        };
        var map = new g.Map(document.getElementById("map_canvas"), myOptions);
        registerMapDragHandler(map);
    }

    function registerMapDragHandler(aMap) {

        var map = aMap;

        g.event.addListener(map, 'click', function(event) {
            createLineBeingDragged(map, event.latLng);
        });

        function createLineBeingDragged(map, pos) {
            var line = new g.Polyline({map: map, path: [pos, pos]});
            g.event.addListener(map, 'mousemove', function(event) {
                line.getPath().setAt(1, event.latLng);
            });
            g.event.addListener(line, 'click', function(event) {
                g.event.clearListeners(map, 'mousemove');
                g.event.clearListeners(line, 'click');
                createMarkersForLine(map, line);
            });

            function createMarkersForLine(map, line) {
                var startMarker = createMarker(line, 0);
                var endMarker = createMarker(line, 1);
                startMarker.nextMarker = endMarker;
                endMarker.previousMarker = startMarker;
            }

            function createMarker(line, pathPos) {
                var position = line.getPath().getAt(pathPos);
                var marker = new g.Marker({map: map, position: position, visible: true, flat: true, draggable: true, raiseOnDrag: false});

                // Marker functions
                marker.getPathIndex = function() {
                    if (this.previousMarker != null) {
                        return this.previousMarker.getPathIndex() + 1;
                    } else {
                        return 0;
                    }
                }

                marker.startDrag = function(pos) {
                    if (!marker.previousMarker || !marker.nextMarker) {
                        line.getPath().insertAt(marker.getPathIndex(), pos);
                        var newMarker = createMarker(line, marker.getPathIndex());
                        if (marker.nextMarker) {
                            newMarker.previousMarker = marker;
                            newMarker.nextMarker = marker.nextMarker;
                            newMarker.nextMarker.previousMarker = newMarker;
                            marker.nextMarker = newMarker;
                        } else {
                            newMarker.nextMarker = marker;
                            newMarker.previousMarker = marker.previousMarker;
                            newMarker.previousMarker.nextMarker = newMarker;
                            marker.previousMarker = newMarker;
                        }
                    }
                }

                marker.beingDragged = function() {
                    line.getPath().setAt(marker.getPathIndex(), marker.getPosition());
                }

                // Listeners
                g.event.addListener(marker, 'dragstart', function(event) {
                    marker.startDrag(event.latLng);
                });

                g.event.addListener(marker, 'drag', function(event) {
                    marker.beingDragged();
                });

                g.event.addListener(marker, 'click', function(event) {
                    var length = g.geometry.spherical.computeLength(line.getPath()) / 1000;
                    var infoWindow = new g.InfoWindow(
                    {
                        content: "<ul><li>Line length: " + length.toFixed(2) + " km</li>"+
                                "<li>Latitude: " + marker.getPosition().lat().toFixed(6) + "</li>"+
                                "<li>Longitude: " + marker.getPosition().lng().toFixed(6) + "</ul>"
                    });
                    infoWindow.open(map, marker);
                });

                return marker;
            }
        }
    }
</script>

如果我为此示例添加 google 库 js，则会出现加载多个 google 库的错误。

如果我没有包含这个库，它会给出未定义计算长度的错误。

我想集成计算到我提供的演示链接的距离的功能..

谢谢

4

1 回答 1

2

这是你修改的

演示链接

您必须将以下内容添加到 html

<script type="text/javascript" src="http://maps.google.com/maps/api/js?libraries=geometry&sensor=false&v=3.3">

并遵循 javascript

polyline = new google.maps.Polyline(polylineoptns);
var length = google.maps.geometry.spherical.computeLength(polyline.getPath());
alert(length);

愿这对你有用..

于 2013-01-09T10:31:34.003 回答