Fatal编程技术网

Google maps 多个标记之间的路由

google-maps matrix google-api

Google maps 多个标记之间的路由,google-maps,matrix,google-api,Google Maps,Matrix,Google Api,是否可以绘制多个标记并显示这些标记与原点之间的路线？例如：我有一个出发地和四个不同的目的地。我希望显示始发地和目的地之间的路线，因此是A到B、A到C、A到D、A到E。可以这样做吗？我只看到了显示两点之间的路线或计算多个点之间距离的选项。我希望能够计算距离，并在地图上显示路线 到目前为止，我的代码是这样的： $("#submit").click(function() { var values = $("#street").val(); var geocoder = new google

是否可以绘制多个标记并显示这些标记与原点之间的路线？例如：我有一个出发地和四个不同的目的地。我希望显示始发地和目的地之间的路线，因此是A到B、A到C、A到D、A到E。可以这样做吗？我只看到了显示两点之间的路线或计算多个点之间距离的选项。我希望能够计算距离，并在地图上显示路线

到目前为止，我的代码是这样的：

$("#submit").click(function() {

  var values = $("#street").val();

  var geocoder = new google.maps.Geocoder();
  var address = values;

  geocoder.geocode( { 'address': address}, function(results, status) {

    if (status == google.maps.GeocoderStatus.OK) {
      var latitude = results[0].geometry.location.lat();
      var longitude = results[0].geometry.location.lng();
    } 

    service = new google.maps.DistanceMatrixService();

    var origin = new google.maps.LatLng(latitude, longitude);
    var destination = new google.maps.LatLng(48.856614, 2.352222);
    var destinationb = new google.maps.LatLng(41.385064, 2.173403);
    var destinationc = new google.maps.LatLng(44.584910, 5.133122);
    var destinationd = new google.maps.LatLng(45.365187, 0.647394);
    var destinationIcon = 'data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%2278%22%20height%3D%2238%22%20viewBox%3D%220%200%2038%2038%22%3E%3Cpath%20fill%3D%22%23333333%22%20stroke%3D%22%23ccc%22%20stroke-width%3D%22.5%22%20d%3D%22M34.305%2016.234c0%208.83-15.148%2019.158-15.148%2019.158S3.507%2025.065%203.507%2016.1c0-8.505%206.894-14.304%2015.4-14.304%208.504%200%2015.398%205.933%2015.398%2014.438z%22%2F%3E%3Ctext%20transform%3D%22translate(19%2018.5)%22%20fill%3D%22%23fff%22%20style%3D%22font-family%3A%20Arial%2C%20sans-serif%3Bfont-weight%3Abold%3Btext-align%3Acenter%3B%22%20font-size%3D%2212%22%20text-anchor%3D%22middle%22%3E' + "" + '%3C%2Ftext%3E%3C%2Fsvg%3E';
    var originIcon = 'data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%2238%22%20height%3D%2238%22%20viewBox%3D%220%200%2038%2038%22%3E%3Cpath%20fill%3D%22%23808880%22%20stroke%3D%22%23ccc%22%20stroke-width%3D%22.5%22%20d%3D%22M34.305%2016.234c0%208.83-15.148%2019.158-15.148%2019.158S3.507%2025.065%203.507%2016.1c0-8.505%206.894-14.304%2015.4-14.304%208.504%200%2015.398%205.933%2015.398%2014.438z%22%2F%3E%3Ctext%20transform%3D%22translate%2819%2018.5%29%22%20fill%3D%22%23fff%22%20style%3D%22font-family%3A%20Arial%2C%20sans-serif%3Bfont-weight%3Abold%3Btext-align%3Acenter%3B%22%20font-size%3D%2212%22%20text-anchor%3D%22middle%22%3E' + "" + '%3C%2Ftext%3E%3C%2Fsvg%3E';
    var infowindow = new google.maps.InfoWindow();


    service.getDistanceMatrix(
        {
            origins: [origin],
            destinations: [destination, destinationb, destinationc, destinationd],
            travelMode: google.maps.TravelMode.DRIVING,
            avoidHighways: false,
            avoidTolls: false
        }, 
        callback
    );   

    function callback(response, status) {

        if(status=="OK") {
            var originList = response.originAddresses;
            var destinationList = response.destinationAddresses;
            var bounds = new google.maps.LatLngBounds;
            var outputDiv = document.getElementById('output');

           var showGeocodedAddressOnMap = function(distance, asDestination) {
              var icon = asDestination ? destinationIcon : originIcon;
              return function(results, status) {
                if (status === 'OK') {
                  map.fitBounds(bounds.extend(results[0].geometry.location));
                  var markersArray = new google.maps.Marker({
                    map: map,
                    position: results[0].geometry.location,
                    icon: icon
                  });

                  google.maps.event.addListener(markersArray, 'click', function (evt) {
                    infowindow.setContent('<strong>Avstånd:</strong> ' + distance);
                    infowindow.open(map, this);
                  });



                } else {
                  alert('Geocode was not successful due to: ' + status);
                }
              };
            };            

        for (var i = 0; i < originList.length; i++) {
              var results = response.rows[i].elements;
              geocoder.geocode({'address': originList[i]},
                  showGeocodedAddressOnMap(results[i].distance.text, false));
              for (var j = 0; j < results.length; j++) {
                geocoder.geocode({'address': destinationList[j]}, showGeocodedAddressOnMap(results[j].distance.text, true));

                outputDiv.innerHTML += originList[i] + ' to ' + destinationList[j] +
                    ': ' + results[j].distance.text + '<br>';



              }
            }

        } else {
            alert("Error: " + status);
        }
    }

        var map = new google.maps.Map(document.getElementById('map'), {
          showTooltip: true,
          showInfoWindow: true
        });



  }); 

});


</script>
<div id="output"></div>
<p></p>
<div id="map"></div>

$（“#提交”）。单击（函数（）{
var值=$（“#街”）.val（）；
var geocoder=new google.maps.geocoder（）；
var地址=值；
geocoder.geocode（{'address'：address}，函数（结果，状态）{
if（status==google.maps.GeocoderStatus.OK）{
var latitude=results[0]。geometry.location.lat（）；
var longitude=results[0]。geometry.location.lng（）；
} 
service=new google.maps.DistanceMatrixService（）；
var origin=new google.maps.LatLng（纬度、经度）；
var destination=new google.maps.LatLng（48.856614,2.352222）；
var destinationb=new google.maps.LatLng（41.385064,2.173403）；
var destinationc=new google.maps.LatLng（44.584910,5.133122）；
var destinationd=new google.maps.LatLng（45.365187,0.647394）；
var Destinationion='数据：图像/svg+xml，%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2FSSVG%22%20width%3D%2278%22%20height%3D%2238%22%20viewBox%3D%220%200%2038%2038%22%3E%3Cpath%20fill%3D%22%23333333%22%20行程%3D%22%23ccc%22%20行程宽度%3D%22.5%22%20d%22M34.305%2016.234.234%2019-208.148.158.507%S3.2025%%2016.1c0-8.505%206.894-14.304%2015.4-14.304%208.504%200%2015.398%205.933%2015.398%2014.438z%22%2F%3E%3Ctext%20transform%3D%22%20填充%3D%22%23fff%22%20样式%3D%22字体系列%3A%20Arial%2C%20ANS衬线%3B字体重量%3B粗体%3Btext对齐%3B中心%3B%22%20font大小%2212%3D%2212中间文本锚定符%22%3E+'%3C%2Ftext%3E%3C%2Fsvg%3E'；
var originIcon='数据：图像/svg+xml，%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2FSSVG%22%20width%3D%2238%22%20height%3D%2238%22%20viewBox%3D%220%200%2038%2038%22%3E%3Path%20fill%3D%22%23808880%22%20stroke%3D%22%23ccc%22%20stroke-width%3D%22.5%22.5%20%20d%3D%22M34.305%2016.234.234-2019-148.158.2025.208%508S3.807.803%.1c0-8.505%206.894-14.304%2015.4-14.304%208.504%200%2015.398%205.933%2015.398%2014.438z%22%2F%3E%3Ctext%20transform%3D%22translate%2819%2018.5%29%22%20fill%22%23fff%22%20style%3D%22字体系列%3A%20Arial%2C%20ANS衬线%3B字体重量%3Abold%3Btext对齐%3A中心%22%2012%字体大小%2212%3D中间锚文本%223B+'%3C%2Ftext%3E%3C%2Fsvg%3E'；
var infowindow=new google.maps.infowindow（）；
service.getDistanceMatrix(
{
来源：[来源]，
目的地：[目的地，目的地B，目的地C，目的地D]，
travelMode:google.maps.travelMode.DRIVING，
避免：错误，
避免收费：错误
}, 
回拨
);   
函数回调（响应、状态）{
如果（状态=“正常”）{
var originList=response.originAddresses；
var destinationList=response.destinationaddress；
var bounds=new google.maps.LatLngBounds；
var outputDiv=document.getElementById（'output'）；
var showGeocodedAddressOnMap=函数（距离，作为目的地）{
var icon=asDestination？目的地：originIcon；
返回函数（结果、状态）{
如果（状态=='OK'）{
map.fitBounds（bounds.extend（结果[0].geometry.location））；
var markersArray=new google.maps.Marker({
地图：地图，
位置：结果[0]。geometry.location，
图标：图标
});
google.maps.event.addListener（markersArray，'click'，函数（evt）{
infowindow.setContent（'Avstånd:'+距离）；
打开（地图，这个）；
});
}否则{
警报（'由于：'+状态，地理编码未成功）；
}
};
};            
对于（变量i=0；i；
}
}
}否则{
警报（“错误：+状态”）；
}
}
var map=new google.maps.map（document.getElementById（'map'）{
showTooltip:true，
showInfoWindow：真
});
}); 
});
要显示路线，请拨打方向服务。已修改的函数来自：

代码片段：

函数calculateAndDisplayRoute（开始、结束、地图）{
var directionsService=new google.maps.directionsService（）；
var directionsDisplay=新建google.maps.DirectionsRenderer({
地图：地图，
对,，
保存视口：true
});
方向服务.路线({
来源：start，
目的地:完，
travelMode:“驾驶”
}，功能（响应、状态）{
如果（状态=='OK'）{
方向显示。设置方向（响应）；
}否则{
window.alert（'由于'+状态，指示请求失败）；
}
});
}
var map=new google.maps.map（document.getElementById（'map'）{
showTooltip:true，

function calculateAndDisplayRoute(start, end, map) {
  var directionsService = new google.maps.DirectionsService();
  var directionsDisplay = new google.maps.DirectionsRenderer({
    map: map,
    suppressMarkers: true,
    preserveViewport: true
  });
  directionsService.route({
    origin: start,
    destination: end,
    travelMode: 'DRIVING'
  }, function(response, status) {
    if (status === 'OK') {
      directionsDisplay.setDirections(response);
    } else {
      window.alert('Directions request failed due to ' + status);
    }
  });
}

calculateAndDisplayRoute(origin, destination, map);
calculateAndDisplayRoute(origin, destinationb, map);
calculateAndDisplayRoute(origin, destinationc, map);
calculateAndDisplayRoute(origin, destinationd, map);