0

嗨，我创建了一个 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>

对于动画，我使用以下代码： <%@ Page Language="C#" AutoEventWireup="true" CodeFile="Drop.aspx.cs" Inherits="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>

提前致谢

4

1 回答 1

4

要在移动标记时更改开始或目的地城市的名称，您需要找到路线的开始和结束坐标，并使用谷歌地理编码器来查找位置的名称。

您需要监听“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 函数与标记位置一起使用。

这是一个工作演示。

应该足以让你更接近你想要的。

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

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

我在这里整理了一个工作演示：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;
    }
}
于 2013-01-03T15:04:04.253 回答