Question

我正在使用谷歌地图API开发MVC应用程序。我的程序中有4个或更多坐标。据我所知，我需要画出道路。到目前为止，这是我的代码。

<div id="dvMap" style="width: 500px; height: 500px">
</div>

@section scripts
{
<script type="text/javascript" src="http://maps.googleapis.com/maps/api/js?key=AIzaSyBZxYACsC1qz9gticRd4mbki9Tes9qexdw&sensor=false"></script>
<script type="text/javascript">
    var markers = [
            {
                "title": 'Canberra',
                "lat": '-35.2809',
                "lng": '149.1300',
                "description": ''

            },
             {
                 "title": 'Sydny',
                 "lat": '-33.8688',
                 "lng": '151.2093',
                 "description": ''

             },
              {
                  "title": 'Tamworth',
                  "lat": '-31.0927',
                  "lng": '150.9320',
                  "description": ''

              }
              ,
              {
                  "title": 'Brisbane',
                  "lat": '-27.465895',
                  "lng": '153.019519',
                  "description": ''

              }


    ];
    window.onload = function () {
        var mapOptions = {
            center: new google.maps.LatLng(markers[0].lat, markers[0].lng),
            zoom: 10,
            mapTypeId: google.maps.MapTypeId.ROADMAP
        };
        var map = new google.maps.Map(document.getElementById("dvMap"), mapOptions);
        var infoWindow = new google.maps.InfoWindow();
        var lat_lng = new Array();
        var latlngbounds = new google.maps.LatLngBounds();
        for (i = 0; i < markers.length; i++) {
            var data = markers[i]
            var myLatlng = new google.maps.LatLng(data.lat, data.lng);
            lat_lng.push(myLatlng);
            var marker = new google.maps.Marker({
                position: myLatlng,
                map: map,
                title: data.title
            });
            latlngbounds.extend(marker.position);
            (function (marker, data) {
                google.maps.event.addListener(marker, "click", function (e) {
                    infoWindow.setContent(data.description);
                    infoWindow.open(map, marker);
                });
            })(marker, data);
        }
        map.setCenter(latlngbounds.getCenter());
        map.fitBounds(latlngbounds);

        //***********ROUTING****************//

        //Initialize the Path Array
        var path = new google.maps.MVCArray();

        //Initialize the Direction Service
        var service = new google.maps.DirectionsService();

        //Set the Path Stroke Color
        var poly = new google.maps.Polyline({ map: map, strokeColor: '#4986E7' });

        //Loop and Draw Path Route between the Points on MAP
        for (var i = 0; i < lat_lng.length; i++) {
            if ((i + 1) < lat_lng.length) {
                var src = lat_lng[i];
                var des = lat_lng[i + 1];
                path.push(src);
                poly.setPath(path);
                service.route({
                    origin: src,
                    destination: des,
                    travelMode: google.maps.DirectionsTravelMode.DRIVING
                }, function (result, status) {
                    if (status == google.maps.DirectionsStatus.OK) {
                        console.log('len ' + result.routes[0].overview_path.length)
                        for (var i = 0, len = result.routes[0].overview_path.length; i < len; i++) {
                            path.push(result.routes[0].overview_path[i]);
                        }
                    }
                });
            }
        }
    }
</script>


    }

问题是地图也显示为直线。

我需要从地图中删除直线（应该在道路上保留线条）以及我的代码中出了什么问题？此外，标记应仅显示起点和终点。但所有点都显示为标记。那怎么办......？请给我一个指导......

Answer 1

在脚本的开头，您将在地图上绘制标记。要避免在map: map,

行注释掉

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

要从地图中删除直线：

注释掉

行

//poly.setPath(path);

DirectionsRenderer返回路线后，您需要使用directionsService在地图上显示路线。

定义一个函数来渲染计算出的路径

function renderDirections(result) {
  var directionsRenderer = new google.maps.DirectionsRenderer;
  directionsRenderer.setMap(map);
  directionsRenderer.setDirections(result);
};

将渲染添加到directionsService的回调函数

directionsService.route({
        origin: src,
        destination: des,
        travelMode: google.maps.DirectionsTravelMode.DRIVING
      }, function(result, status) {
        // if route is computed successfully, render it on map
        if (status == google.maps.DirectionsStatus.OK) {
          console.log('len ' + result.routes[0].overview_path.length);
          renderDirections(result);
        } else {
          console.log("Error: ", status);
        }
      });

此处的问题是您尝试在地图上显示多条路线，请查看this question了解详情。

希望这有帮助。

谷歌地图api删除直线

1 个答案: