Google Maps API,从标记到标记的方向

时间:2015-07-22 13:46:43

标签: jquery google-maps google-maps-api-3

所以我有一张地图上有很多标记。我希望能够右键单击标记并选择"开始点",然后右键单击另一个标记并选择"目标点"。

然后我会删除所有标记,只显示已点击地图上绘制的方向的两个标记。

我不知道从哪里开始,我是jquery的新手。到目前为止,这是我的代码 我删除了非重要的代码,使其尽可能小:

    window.onload = function () {

        var markerarray = new Array();

        var mapOptions = {
            center: new google.maps.LatLng(markers[0].lat, markers[0].lng),
            zoom: 6,
            mapTypeId: google.maps.MapTypeId.ROADMAP
        };



        var infoWindow = new google.maps.InfoWindow();
        var map = new google.maps.Map(document.getElementById("map-canvas"),      mapOptions);
        var image = 'marker.png';

        for (i = 0; i < markers.length; i++) {

            var data = markers[i]
            var myLatlng = new google.maps.LatLng(data.lat, data.lng);
            var isCheckedD4 = $('#<%= D4.ClientID %>').is(':checked');
            var icon = "";
            var fred;

            if (isCheckedcat == true) {
                switch (data.category) {
                    case 'A1':
                        if (isCheckedA1 == true) {
                            icon = "http://www.googlemapsmarkers.com/v1/A1/0066FF/FFFFFF/FF5050";
                            fred = true;
                        }
                        else {
                            icon = "";
                            fred = false;
                        }
                        break;                  
                          }
                         }


            var marker = new google.maps.Marker({
                position: myLatlng,
                map: map,
                title: data.title,

                icon: new google.maps.MarkerImage(icon),
                visible: fred,
                draggable: false,
                animation: google.maps.Animation.DROP
            });

            markerarray.push(marker);

            (function (marker, data) {
                var markernameprev;
                google.maps.event.addListener(marker, "click", function (e) {

                    infoWindow.setContent(data.name);
                    infoWindow.open(map, marker);

                    for (var i = 0; i < markerarray.length; i++) {
                        markerarray[i].setAnimation(null);
                    }

                    marker.setAnimation(google.maps.Animation.BOUNCE);

                });

            })(marker, data);
        }
    }

非常感谢任何帮助。谢谢。

1 个答案:

答案 0 :(得分:0)

嗯,您需要的是directions apimarker docs。仔细阅读后,您可以

  1. clickListener添加到您的标记
  2. 使用两个选定的标记&#39; lat/lng信息以生成方向(您需要在上面给出的链接中学习所有内容)。
  3. 希望这能为你提供一个起点。