在 Google Maps v3 中绘制两点之间路线的不一致行为

IT技术 javascript google-maps google-maps-api-3
2021-03-20 06:33:10

场景

我正在尝试使用 Google Maps v3在n个点（lat,lan）之间绘制一条路线。为此，我使用DirectionsService它为我提供了一条路线，然后我将该坐标推入 a 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]);
                    }
                }
            });
        }
    }
});

预期行为

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

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

实际行为

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

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

在此处输入图片说明

1个回答

不要将目的地、来源和航点位置添加到折线，只需从路线服务中点：

工作小提琴

屏幕截图或结果地图

var map = null;
var infowindow = new google.maps.InfoWindow();
var bounds = new google.maps.LatLngBounds();

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


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

  var infoWindow = new google.maps.InfoWindow();
  map = new google.maps.Map(document.getElementById("map"), mapOptions);
  var lat_lng = new Array();

  var marker = new google.maps.Marker({
    position: map.getCenter(),
    map: map,
    draggable: true
  });
  bounds.extend(marker.getPosition());
  google.maps.event.addListener(marker, "click", function(evt) {
    infowindow.setContent("coord:" + marker.getPosition().toUrlValue(6));
    infowindow.open(map, marker);
  });
  for (var i = 0; i < markers.length; i++) {
    if ((i + 1) < markers.length) {
      var src = new google.maps.LatLng(parseFloat(markers[i].lat),
        parseFloat(markers[i].lng));
      createMarker(src);

      var des = new google.maps.LatLng(parseFloat(markers[i + 1].lat),
        parseFloat(markers[i + 1].lng));
      createMarker(des);
      //  poly.setPath(path);
      service.route({
        origin: src,
        destination: des,
        travelMode: google.maps.DirectionsTravelMode.DRIVING
      }, function(result, status) {
        if (status == google.maps.DirectionsStatus.OK) {
          var path = new google.maps.MVCArray();
          var poly = new google.maps.Polyline({
            map: map,
            strokeColor: '#F3443C'
          });
          for (var i = 0, len = result.routes[0].overview_path.length; i < len; i++) {
            path.push(result.routes[0].overview_path[i]);
          }
          poly.setPath(path);
          map.fitBounds(bounds);
        }
      });
    }
  }
}

function createMarker(latLng) {
  var marker = new google.maps.Marker({
    position: latLng,
    map: map,
    draggable: true
  });
  bounds.extend(marker.getPosition());
  google.maps.event.addListener(marker, "click", function(evt) {
    infowindow.setContent("coord:" + this.getPosition().toUrlValue(6));
    infowindow.open(map, this);
  });
}
google.maps.event.addDomListener(window, 'load', initialize);
html,
body,
#map {
  width: 100%;
  height: 100%;
}
<script src="https://maps.googleapis.com/maps/api/js?key=AIzaSyCkUOdZ5y7hMm0yrcCQoCvLwzdM6M8s5qk"></script>
<div id='map'></div>

其它你可能感兴趣的问题
上一篇允许用户向您的网站添加自己的 JavaScript 的安全问题？ 下一篇如何使用 jquery/javascript 在 div 中获取选择