场景

我正在尝试使用Google Maps v3在n个点(纬度,经度)之间绘制路线。 为此,我使用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,因此源代码主要是复制和粘贴来自在线示例的结果,尤其是这一示例也遇到了同样的问题。

这意味着我可能正在使用过时的Google地图版本,对其进行了不正确的初始化或任何其他基本问题或有缺陷的设置。 或者从另一方面讲,这可能是客户端的问题,例如Mac Chrome最新版本,因为显然这不是我手机上的Android版Chrome浏览器(Nexus 5,最新库存)

在此处输入图片说明

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

场景

我正在尝试使用Google Maps v3在n个点(纬度,经度)之间绘制路线。 为此,我使用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,因此源代码主要是复制和粘贴来自在线示例的结果,尤其是这一示例也遇到了同样的问题。

这意味着我可能正在使用过时的Google地图版本,对其进行了不正确的初始化或任何其他基本问题或有缺陷的设置。 或者从另一方面讲,这可能是客户端的问题,例如Mac Chrome最新版本,因为显然这不是我手机上的Android版Chrome浏览器(Nexus 5,最新库存)

在此处输入图片说明

  ask by Juan Cortés translate from so

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

2回复

fromDivPixelToLatLng的Google Maps API V3不一致

我需要在地图的div内的固定像素位置放置一个标记。 要实例化标记,您需要一个LatLng。 我知道fromDivPixelToLatLng()是从像素坐标转换为LatLng的方法,但我无法使其表现一致。 我在http://www.pinksy.co.uk/newsquare/overl
1回复

Google Maps API v3:为什么Google Maps API V3和Google Maps的搜索结果不一致?

我正在使用使用Google Maps API v3的自定义地图应用程序。 我遇到了一些问题。 我正在使用地方信息库在我的地图中心附近进行搜索,并且带有关键字的半径很大。 问题1:在不带引号的情况下搜索“家得宝”时,会得到“家”或“得宝”的结果,因此房地产经纪人会回来,返回名为“牙科
1回复

Google Maps v3 API地理编码和视口不一致

我正在做一个Google Maps项目,我们希望客户输入自动完成地址,然后带到地图上的那个地方。 与在maps.google.com上搜索相同地点时获得的视口相比,我的经理希望获得一致的“视口”结果。 我发现某个位置的结果不一致,尤其是在澳大利亚的悉尼市。 我从Places A
1回复

Google Maps Marker DROP动画不一致

我在角度10中使用了Google Maps API,但发现与切换DROP动画不一致。 关于官方文档的JSFiddle演示了切换弹跳动画的演示。 但是,我的用例是在一个地图上有多个标记,每次单击一个标记时,它将拖放(而不是反弹)。 我已经尝试过通过更改JSFiddle的方式来实现此目的,方法是在地
1回复

Google Maps最大范围与最大纬度不一致吗?

只需阅读本SO的主题 ,就会发现最大范围与纬度的最大可能值不对应(根据Google Maps API的[+90,-90] 2 )。 因此,可以显示将NorthEast点纬度设置为90的地图吗? (在我的应用程序中就是这种情况,但似乎无法正常工作...不能100%确定这是问题所在,但是当
2回复

在Google Maps v3中绘制可拖动形状

var drawingManager; var lastShape; var map; function initialize() { map = new google.maps.Map(document.getElementById('gmap'), { zoom: 3, cente
1回复

继续在Google Maps v3中绘制折线

是否可以使用Google的DrawingManager为现有折线打开绘图模式? 转到自定义地图编辑器(菜单中的“我的地图”->创建地图->绘制)时,可以在Google Maps网络应用中使用。 然后创建一条折线,右键单击最后一点,然后选择延伸线(请参见下图)。 但是我找
1回复

Google Maps / TypeScript-不一致地识别google.maps.Place

我正在尝试在我的应用程序中使用Google的Map API。 但是,我收到以下编译器错误: 现在,通常可以假设我缺少键入或依赖项或其他内容。 但是奇怪的是,仅在上面几行就正确地识别了“ Place”属性。 首次使用google.maps.Place(place:google.
1回复

在Google地理图表中的两点之间绘制曲线

我的意图是制作一张包含不同国家/地区的多个标记的地图。 标记相互连接。 根据与每个国家/地区有关的数字数据,国家/地区将具有不同的颜色。 然后,我使用Gmaps完成了一个简单的地图,并设法绘制了标记,然后使用自定义的曲线将每个标记连接到其他标记。 我正在使用这个库 。 但是现在我又
2回复

如何在Google Maps API中的两个标记之间绘制路线?

我有一个要求,当我选择时,我必须在两个标记之间画一条路线。 我已在Google MAPS API上成功上传了KML文件,因此标记在Google MAPS API上清晰可见。 当我选择两个标记点击时,应该在所选标记之间绘制一条路线。 我能够在两点之间绘制一条静态路线,但是被绘制的线路并没