Javascript 如何在谷歌地图API中绘制两个标记之间的路线？_Javascript_Html_Google Maps_Google Maps Api 3_Kml

Javascript 如何在谷歌地图API中绘制两个标记之间的路线？

javascript html google-maps google-maps-api-3

Javascript 如何在谷歌地图API中绘制两个标记之间的路线？,javascript,html,google-maps,google-maps-api-3,kml,Javascript,Html,Google Maps,Google Maps Api 3,Kml,我有一个要求，一旦点击，当我选择时，我必须在两个标记之间画一条路线。我已经在谷歌地图API上成功上传了一个KML文件，所以标记在谷歌地图API上清晰可见当我在单击时选择两个标记时，应该在所选标记之间绘制一条路线。我能够在两点之间画出一条静态路线，但是画的线没有沿着路线走。请导游。另外，请找到我尝试过的代码。提前谢谢 <!DOCTYPE html> <html> <head> <meta name="viewport" content="initial

我有一个要求，一旦点击，当我选择时，我必须在两个标记之间画一条路线。我已经在谷歌地图API上成功上传了一个KML文件，所以标记在谷歌地图API上清晰可见

当我在单击时选择两个标记时，应该在所选标记之间绘制一条路线。我能够在两点之间画出一条静态路线，但是画的线没有沿着路线走。请导游。另外，请找到我尝试过的代码。提前谢谢

<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="initial-scale=1.0, user-scalable=no">
<meta charset="utf-8">
<title>Transit layer</title>
<style>
html,body,#map-canvas {
    height: 100%;
    margin: 0px;
    padding: 0px
}
</style>
<link href="/maps/documentation/javascript/examples/default.css" rel="stylesheet"      type="text/css" />
<script type="text/javascript" src="http://maps.google.com/maps/api/js?sensor=false"></script>
<script type="text/javascript"   src="http://geoxml3.googlecode.com/svn/branches/polys/geoxml3.js"></script>
<script> function initialize() 
{   
    var myLatlng = new google.maps.LatLng(0, -180);   
    var mapOptions = 
        {     
            zoom: 13,     
            center: myLatlng,     
            mapTypeId: google.maps.MapTypeId.ROADMAP  
        }    

     var map = new google.maps.Map(document.getElementById('map-canvas'), mapOptions);    
     var transitLayer = new google.maps.TransitLayer();   
     transitLayer.setMap(map); 


    var geoXml = new geoXML3.parser({map: map, singleInfoWindow: true});
     geoXml.parse('kmload.kml'); 
     var geoXml1 = new geoXML3.parser({map: map, singleInfoWindow: true});
     geoXml1.parse('lines.kml'); 


     var coordinates = [     
                           new google.maps.LatLng(18.9800, 73.1000),     
                           new google.maps.LatLng(19.0361, 73.0617)];  

     google.maps.event.addListener(map, "click", function (e) 
      {  
                 var trainpath = new google.maps.Polyline({     
                 path: coordinates,    
                 geodesic: true,     
                 strokeColor: '#FF0000',     
                 strokeOpacity: 1.0,     
                 strokeWeight: 2   
                 });    
                trainpath.setMap(map);
      });



     }  
google.maps.event.addDomListener(window, 'load', initialize); 
    </script>
</head>
<body>
<div id="map-canvas"></div>
</body>
</html>


过渡层
html，正文，#地图画布{
身高：100%；
边际：0px；
填充：0px
}
函数初始化（）
{   
var mylatng=new google.maps.LatLng（0，-180）；
变量映射选项=
{     
缩放：13，
中心：myLatlng，
mapTypeId:google.maps.mapTypeId.ROADMAP
}    
var map=new google.maps.map（document.getElementById（'map-canvas'），mapOptions）；
var transitLayer=new google.maps.transitLayer（）；
transitLayer.setMap（map）；
var geoXml=new geoXML3.parser（{map:map，singleInfoWindow:true}）；
parse（'kmload.kml'）；
var geomml1=new geomml3.parser（{map:map，singleInfoWindow:true}）；
geoXml1.parse（'lines.kml'）；
变量坐标=[
新的google.maps.LatLng（18.9800,73.1000），
新的google.maps.LatLng（19.0361,73.0617）]；
google.maps.event.addListener（映射，“单击”，函数（e）
{  
var trainpath=new google.maps.Polyline（{
路径：坐标，
测地线：正确，
strokeColor:“#FF0000”，
笔划不透明度：1.0，
冲程重量：2
});    
列车路径设置图（map）；
});
}  
google.maps.event.addDomListener（窗口“加载”，初始化）；

我认为在拖动事件时必须获取并设置新的坐标。因此，您在click事件中的代码中缺少此事件处理程序，例如以下示例：

google.maps.event.addListener(trainpath, 'drag',function(event) {
  // set new coordinates for event, event.latLng.lat() and event.latLng.lng()
});

google.maps.event.addListener(trainpath, 'dragend',function(event) {
    // set new coordinates for event, event.latLng.lat() and event.latLng.lng()
});

请在此线程中查看：

如果这没什么帮助，很抱歉。

向geoxml3添加一个自定义的“createMarker”函数，该函数向标记的单击侦听器添加一个函数，以触发方向服务

// global variables
var directions = {};
var directionsDisplay = new google.maps.DirectionsRenderer();
var directionsService = new google.maps.DirectionsService();

// geoxml3 configuration
var geoXml = new geoXML3.parser({
    map: map,
    createMarker: createMarker,
    singleInfoWindow: true
});

// handle the directions service
function processMarkerClick(latLng) {
    if (!directions.start) {
        directions.start = latLng;
    }
    else if (!directions.end) {
        directions.end = latLng;
        directionsService.route({
            origin:directions.start,
            destination: directions.end,
            travelMode: google.maps.TravelMode.DRIVING
        },
        function(result, status) {
            if (status == google.maps.DirectionsStatus.OK) {
                directionsDisplay.setDirections(result);
                directionsDisplay.setMap(map);

            }
            else {
                alert("Directions Request failed:" +status);
            }
            directions.start = null;
            directions.end = null;
        });
    }
}

// custom createMarker function to add hook for the directions service 
// (modified from the version in the geoxml3 source)
var createMarker = function (placemark, doc) {
    // create a Marker to the map from a placemark KML object

    // Load basic marker properties
    var markerOptions = geoXML3.combineOptions(geoXml.options.markerOptions, {
        map:      geoXml.options.map,
        position: new google.maps.LatLng(placemark.Point.coordinates[0].lat, placemark.Point.coordinates[0].lng),
        title:    placemark.name,
        zIndex:   Math.round(placemark.Point.coordinates[0].lat * -100000)<<5,
        icon:     placemark.style.icon,
        shadow:   placemark.style.shadow 
    });

    // Create the marker on the map
    var marker = new google.maps.Marker(markerOptions);
    if (!!doc) {
        doc.markers.push(marker);
    }

    // Set up and create the infowindow if it is not suppressed
    if (!geoXml.options.suppressInfoWindows) {
        var infoWindowOptions = geoXML3.combineOptions(geoXml.options.infoWindowOptions, {
            content: '<div class="geoxml3_infowindow"><h3>' +
                     placemark.name + 
                     '</h3><div>' + 
                     placemark.description + 
                     '</div></div>',
            pixelOffset: new google.maps.Size(0, 2)
        });

        if (geoXml.options.infoWindow) {
            marker.infoWindow = geoXml.options.infoWindow;
        }
        else {
            marker.infoWindow = new google.maps.InfoWindow(infoWindowOptions);
        }
        marker.infoWindowOptions = infoWindowOptions;

        // Infowindow-opening event handler
        google.maps.event.addListener(marker, 'click', function() {
            processMarkerClick(marker.getPosition());
            this.infoWindow.close();
            marker.infoWindow.setOptions(this.infoWindowOptions);
            this.infoWindow.open(this.map, this);
        });
    }
    placemark.marker = marker;
    return marker;
};

//全局变量
var方向={}；
var directionsDisplay=new google.maps.DirectionsRenderer（）；
var directionsService=new google.maps.directionsService（）；
//geoxml3配置
var geoXml=new geoXML3.parser({
地图：地图，
createMarker:createMarker，
singleInfoWindow:true
});
//处理方向服务
函数处理器标记单击（latLng）{
如果（！directions.start）{
方向。开始=车床；
}
否则，如果（！directions.end）{
方向。结束=板条；
方向服务.路线({
来源：directions.start，
目的地：方向。结束，
travelMode:google.maps.travelMode.DRIVING
},
功能（结果、状态）{
if（status==google.maps.directionstatus.OK）{
方向显示。设置方向（结果）；
方向显示.setMap（地图）；
}
否则{
警报（“指示请求失败：+状态”）；
}
directions.start=null；
directions.end=null；
});
}
}
//自定义createMarker函数为directions服务添加钩子
//（从geoxml3源代码中的版本修改）
var createMarker=函数（placemark，doc）{
//从placemark KML对象创建地图的标记
//加载基本标记属性
var markerOptions=geoXML3.combineptions（geoXml.options.markerOptions{
map:geoXml.options.map，
位置：新建google.maps.LatLng（placemark.Point.coordinates[0].lat，placemark.Point.coordinates[0].lng），
标题：placemark.name，
zIndex:Math.round（placemark.Point.座标[0].lat*-100000）你可能正在寻找类似的东西。代码破坏者：谢谢你的参考，但问题是点之间绘制的路径不遵循任何路线，它直接连接两个点，我希望多段线遵循路线。什么是kmlload.kml和lines.kml？你能提供它们的内容，或测试的样本吗？你需要吗d如果您希望位置之间的路线沿道路行驶，请使用。