Question

您好我已经创建了一个网络应用程序，我可以使用谷歌V3 api在地图上显示两个地方之间的距离，在其他网络应用程序中，我创建了动画拖放标记，我可以在地图上移动我如何将这两个结合起来。这是我的代码：

<%@ 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 Language =＆＃34; C＃＆＃34; AutoEventWireup =＆＃34;真＆＃34;的CodeFile =＆＃34; Drop.aspx.cs＆＃34;继承=＆＃34;删除＆＃34; ％GT;

<!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>

提前谢谢

Answer 1

要在移动标记时更改起始城市或目标城市的名称，您需要找到路线的起点和终点坐标，并使用googles地理编码器查找位置名称。

您需要侦听'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);
        }
    });
}

通过这种方式，您无法将click事件设置为应用于地图的地图标记，这意味着您无法使用标记弹跳动画。如果您需要标记动画，则必须在方向服务中禁止标记并显示您自己的标记。拖动标记时，您必须重新计算方向，然后将getLocationName函数与标记位置一起使用。

Here is a working demo.

足以让你更接近你想要的东西。

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

标记拖动事件仅在拖动一小段距离时会触发数百次，因此我们需要将计时器设置为不请求许多地理编码。

我在这里汇总了一个有效的演示：http://jsfiddle.net/SMEAD/6/

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

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;
    }
}

在谷歌地图中计算距离并从原点移动标记

1 个答案: