计算距离并从Google Map中的原点位置移动标记

嗨，我已经创建了一个Web应用程序，我可以使用Google V3 API和其他Web应用程序在地图上显示两个位置之间的距离地图我如何结合这两个。这是我的代码：

<%@ Page Language="C#" AutoEventWireup="true" CodeFile="Direction2.aspx.cs" Inherits="Direction2" %>  
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">  
<html xmlns="http://www.w3.org/1999/xhtml">  
<head runat="server">  
     <title></title>  
    <script type="text/javascript" src="http://maps.google.com/maps/api/js?sensor=false"></script>
     <script type="text/javascript">
        var directionDisplay;
        var directionsService = new google.maps.DirectionsService();
        function initialize() {
             var latlng = new google.maps.LatLng(51.764696, 5.526042);
             directionsDisplay = new google.maps.DirectionsRenderer();
             var myOptions = {
                 zoom: 14,
                 center: latlng,
                 mapTypeId: google.maps.MapTypeId.ROADMAP,
                 mapTypeControl: false
            };
             var map = new google.maps.Map(document.getElementById("map_canvas"), myOptions);
            directionsDisplay.setMap(map);
            directionsDisplay.setPanel(document.getElementById("directionsPanel"));
            var marker = new google.maps.Marker({
                position: latlng,
                map: map,
                title: "My location"
             });
        }
        function calcRoute() {
            var start = document.getElementById("routeStart").value;
            var end = "51.764696,5.526042";
            var request = {
                origin: start,
                destination: end,
                travelMode: google.maps.DirectionsTravelMode.DRIVING
            };
             directionsService.route(request, function (response, status) {
                if (status == google.maps.DirectionsStatus.OK) {
                    directionsDisplay.setDirections(response);
                }
            });
        }
</script>
</head>
<body onload="initialize()">
    <div id="map_canvas" style="width:710px; height:300px"></div>  
    <form action="" onsubmit="calcRoute();return false;" id="routeForm">
        <input type="text" id="routeStart" value=""/>
        <input type="submit" value="Route plannen"/>
<div id="directionsPanel"></div>
    </form>
 </body>
</html>

和动画我使用此代码：＆lt;％@ page Lakenage =" C＃" autoEventWireUp =" true" codefile =" drop.aspx.cs"继承=" drop"％>

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
<title>Drop</title>
<script type="text/javascript" src="http://maps.google.com/maps/api/js?sensor=false"></script>
        <script type="text/javascript">
            var stockholm = new google.maps.LatLng(59.32522, 18.07002);
            var parliament = new google.maps.LatLng(59.327383, 18.06747);
            var marker;
            var map;
             function initialize() {
                var mapOptions = {
                    zoom: 13,
                    mapTypeId: google.maps.MapTypeId.ROADMAP,
                    center: stockholm
                };
                 map = new google.maps.Map(document.getElementById("map_canvas"),
      mapOptions);
                marker = new google.maps.Marker({
                    map: map,
                    draggable: true,
                    animation: google.maps.Animation.DROP,
                    position: parliament
                });
                 google.maps.event.addListener(marker, 'click', toggleBounce);
        }
             function toggleBounce() {
                 if (marker.getAnimation() != null) {
                     marker.setAnimation(null);
                 } else {
                     marker.setAnimation(google.maps.Animation.BOUNCE);
                }
            }
</script>
</head>
<body onload="initialize()" onunload="Gunload()">
    <form id="form1" runat="server">
     <div id="map_canvas" style="width:525px; height:237px;">
   </div>
 </form>

预先感谢

在移动标记时更改开始或目标城市的名称，您需要找到方向的开始和结束坐标，并使用Google Google googles geocoder找到位置的名称。

您需要收听'Directions_changed'事件并找到开始和结尾。

google.maps.event.addListener(directionsDisplay, 'directions_changed', function() {
    var directions = this.getDirections();
    var overview_path = directions.routes[0].overview_path;
    var startingPoint = overview_path[0];
    var destination = overview_path[overview_path.length - 1];
    if (typeof startLatlng === 'undefined' || !startingPoint.equals(startLatlng)) {
        startLatlng = startingPoint;
        getLocationName(startingPoint, function(name) {
            routeStart.value = name;
        });
    }
    if (typeof endLatlng === 'undefined' || !destination.equals(endLatlng)) {
        endLatlng = destination;
        getLocationName(destination, function(name) {
            routeEnd.value = name;
        });
    }
});

要获取标记位置的名称，请使用以下功能（我快速将其放在一起，需要更多测试）

function getLocationName(latlng, callback) {
    geocoder.geocode({location: latlng}, function(result, status) {
        if (status === google.maps.GeocoderStatus.OK) {
            var i = -1;
            // find the array index of the last object with the locality type
            for (var c = 0; c < result.length; c++) {
                for (var t = 0; t < result[c].types.length; t++) {
                    if (result[c].types[t].search('locality') > -1) {
                        i = c;
                    }
                }
            }
            var locationName = result[i].address_components[0].long_name;
            callback(locationName);
        }
    });
}

通过这种方式进行操作，您无法将单击事件设置为应用于地图的地图标记，这意味着您无法拥有标记弹跳动画。如果需要标记动画，则必须在方向服务中抑制标记并显示自己的标记。拖动标记时，您必须重新计算说明，然后将getLocationName函数与标记位置使用。

这是一个工作的演示。

应该足以使您更接近想要的东西。

edit 我已经更新了代码以更改拖动时的开始或结束输入框的值。

当只拖动较小距离时，标记拖动事件将发射数百次，因此我们需要设置一个计时器，以免向许多地理编码要求。

我在这里进行了一个工作的演示：http：//jsfiddle.net/smead/6/

我们需要使用自己的标记，因此在初始化DirectionsRenderer时，我们需要传递抑制标记选项

directionsDisplay = new google.maps.DirectionsRenderer({
    suppressMarkers: true
});

我们只需要聆听指示一次并设置标记。

google.maps.event.addListenerOnce(directionsDisplay, 'directions_changed', function() {
    var directions = this.getDirections();
    var overview_path = directions.routes[0].overview_path;
    var startingPoint = overview_path[0];
    var destination = overview_path[overview_path.length - 1];
    addMarker(startingPoint, 'start');
    addMarker(destination, 'end');
});

工作马功能是AddMarker。这设置了我们需要更新输入框并重新计算说明的事件。

function addMarker(position, type) {
    var marker = new google.maps.Marker({
        position: position,
        draggable: true,
        animation: google.maps.Animation.DROP,
        map: map
    });
    marker.type = type; // probably not a good idea to do this.
    google.maps.event.addListener(marker, 'drag', function() {
        var marker = this;
        clearTimeout(dragTimer);
        dragTimer = setTimeout(function() {
            getLocationName(marker.getPosition(), function(name) {
                if (marker.type === 'start') {
                    routeStart.value = name;
                } else {
                    endStart.value = name;
                }
            });
        }, 250);
    });
    google.maps.event.addListener(marker, 'dragend', function() {
        calcRoute(startMarker.getPosition(), endMarker.getPosition());
    });
    if (type === 'start') {
        startMarker = marker;
    } else {
        endMarker = marker;
    }
}

相关内容

最新更新

热门标签：