场景

我正在尝试使用 Google Maps v3 在n个点(lat,lan)之间绘制一条路线。 为此,我使用DirectionsService为我提供路线,然后将该坐标推入MVCArray ,然后使用Polyline绘制该路径。

编码

这是一个 jsfiddle,演示了此处的那部分代码

HTML:

<div id='map'></div>

CSS:

#map{
    width:400px;
    height:400px;
}

JavaScript:

$(function () {
    //The list of points to be connected
    var markers = [
        {
            "title": 'Duero',
            "lat": '40.480243',
            "lng": '-3.866172',
            "description": '1'
        },
        {
            "title": 'Reyes Catolicos',
            "lat": '40.477997',
            "lng": '-3.870865',
            "description": '2'
        },
        {
            "title": 'Guadarrama',
            "lat": '40.478998',
            "lng": '-3.878755',
            "description": '3'
        }
    ];

    var map;

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

    var infoWindow = new google.maps.InfoWindow();
    var map = new google.maps.Map(document.getElementById("map"), mapOptions);
    var poly = new google.maps.Polyline({
        map: map,
        strokeColor: '#F3443C'
    });
    var lat_lng = new Array();

    path.push(new google.maps.LatLng(markers[0].lat, markers[0].lng));
    for (var i = 0; i < markers.length; i++) {
        if ((i + 1) < markers.length) {
            var src = new google.maps.LatLng(markers[i].lat, markers[i].lng);
            var des = new google.maps.LatLng(markers[i+1].lat, markers[i+1].lng);

            poly.setPath(path);
            service.route({
                origin: src,
                destination: des,
                travelMode: google.maps.DirectionsTravelMode.DRIVING
            }, function (result, status) {
                if (status == google.maps.DirectionsStatus.OK) {
                    for (var i = 0, len = result.routes[0].overview_path.length; i < len; i++) {
                        path.push(result.routes[0].overview_path[i]);
                    }
                }
            });
        }
    }
});

预期行为

我应该绘制一组直线,将变量markers指定的点 (lat,lan) 与指定的宽度和颜色连接起来。 更具体地说, Point 1连接Point 2Point 2又连接Point 3

使用小提琴中的代码,我想看看,这个:在此处输入图片说明

实际行为

我得到了以前的图像,但并非总是如此。 如果你刷新,几次你最终会得到这个,我相信这是在乌鸦飞行时添加一条连接点的额外线的结果,但是,这是一种不一致的行为,我正在努力寻找它的来源,我简化了这个例子,你有一个尽可能小的顶点数组,据我所知,绘制的路径应该是相同的,因为数据是相同的。 诚然,我从未深入研究过 google maps api,因此源代码主要是从在线示例中复制和粘贴的结果,尤其是这个也遇到相同问题的示例。

这意味着我可能使用的是过时版本的谷歌地图,初始化不正确或任何其他基本问题或有缺陷的设置。 或者另一方面,这可能是客户端的问题,比如 Mac Chrome 最新版本,因为显然我手机上的 Chrome for Android 没有发生这种情况(Nexus 5,最新,股票)

在此处输入图片说明

===============>>#1 票数:5

场景

我正在尝试使用 Google Maps v3 在n个点(lat,lan)之间绘制一条路线。 为此,我使用DirectionsService为我提供路线,然后将该坐标推入MVCArray ,然后使用Polyline绘制该路径。

编码

这是一个 jsfiddle,演示了此处的那部分代码

HTML:

<div id='map'></div>

CSS:

#map{
    width:400px;
    height:400px;
}

JavaScript:

$(function () {
    //The list of points to be connected
    var markers = [
        {
            "title": 'Duero',
            "lat": '40.480243',
            "lng": '-3.866172',
            "description": '1'
        },
        {
            "title": 'Reyes Catolicos',
            "lat": '40.477997',
            "lng": '-3.870865',
            "description": '2'
        },
        {
            "title": 'Guadarrama',
            "lat": '40.478998',
            "lng": '-3.878755',
            "description": '3'
        }
    ];

    var map;

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

    var infoWindow = new google.maps.InfoWindow();
    var map = new google.maps.Map(document.getElementById("map"), mapOptions);
    var poly = new google.maps.Polyline({
        map: map,
        strokeColor: '#F3443C'
    });
    var lat_lng = new Array();

    path.push(new google.maps.LatLng(markers[0].lat, markers[0].lng));
    for (var i = 0; i < markers.length; i++) {
        if ((i + 1) < markers.length) {
            var src = new google.maps.LatLng(markers[i].lat, markers[i].lng);
            var des = new google.maps.LatLng(markers[i+1].lat, markers[i+1].lng);

            poly.setPath(path);
            service.route({
                origin: src,
                destination: des,
                travelMode: google.maps.DirectionsTravelMode.DRIVING
            }, function (result, status) {
                if (status == google.maps.DirectionsStatus.OK) {
                    for (var i = 0, len = result.routes[0].overview_path.length; i < len; i++) {
                        path.push(result.routes[0].overview_path[i]);
                    }
                }
            });
        }
    }
});

预期行为

我应该绘制一组直线,将变量markers指定的点 (lat,lan) 与指定的宽度和颜色连接起来。 更具体地说, Point 1连接Point 2Point 2又连接Point 3

使用小提琴中的代码,我想看看,这个:在此处输入图片说明

实际行为

我得到了以前的图像,但并非总是如此。 如果你刷新,几次你最终会得到这个,我相信这是在乌鸦飞行时添加一条连接点的额外线的结果,但是,这是一种不一致的行为,我正在努力寻找它的来源,我简化了这个例子,你有一个尽可能小的顶点数组,据我所知,绘制的路径应该是相同的,因为数据是相同的。 诚然,我从未深入研究过 google maps api,因此源代码主要是从在线示例中复制和粘贴的结果,尤其是这个也遇到相同问题的示例。

这意味着我可能使用的是过时版本的谷歌地图,初始化不正确或任何其他基本问题或有缺陷的设置。 或者另一方面,这可能是客户端的问题,比如 Mac Chrome 最新版本,因为显然我手机上的 Chrome for Android 没有发生这种情况(Nexus 5,最新,股票)

在此处输入图片说明

  ask by Juan Cortés translate from so

未解决问题?本站智能推荐: