Google maps 如何在谷歌地图上动态加载标记并在它们之间绘制路线？_Google Maps

Google maps 如何在谷歌地图上动态加载标记并在它们之间绘制路线？

google-maps

Google maps 如何在谷歌地图上动态加载标记并在它们之间绘制路线？,google-maps,Google Maps,我需要做一个有谷歌地图的网页。它将在（公司办公室）内部有一个固定点在地图之外，我会有一个下拉列表。当用户从列表中选择一个选项时，我需要在地图上显示所选选项，并绘制一条线（路线）来连接两点到目前为止，我能够在地图上有一个带有自定义图标的固定点，但我找不到一种方法来动态添加第二个点，并在这两个点之间绘制路线这可能吗？我还没有找到任何关于这方面的教程，我想知道是否有人能给我指出正确的方向。经过一些修改，这个例子应该可以帮助您开始： <!DOCTYPE html> <html&

我需要做一个有谷歌地图的网页。它将在（公司办公室）内部有一个固定点

在地图之外，我会有一个下拉列表。当用户从列表中选择一个选项时，我需要在地图上显示所选选项，并绘制一条线（路线）来连接两点

到目前为止，我能够在地图上有一个带有自定义图标的固定点，但我找不到一种方法来动态添加第二个点，并在这两个点之间绘制路线

这可能吗？我还没有找到任何关于这方面的教程，我想知道是否有人能给我指出正确的方向。

经过一些修改，这个例子应该可以帮助您开始：

<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="initial-scale=1.0, user-scalable=no"/>
<meta http-equiv="content-type" content="text/html; charset=UTF-8"/>
<title>Google Maps JavaScript API v3 Example: Directions Simple</title>
<link href="http://code.google.com/apis/maps/documentation/javascript/examples/default.css" rel="stylesheet" type="text/css" />
<script type="text/javascript" src="http://maps.googleapis.com/maps/api/js?sensor=false"></script>
<script type="text/javascript">
  var directionDisplay;
  var directionsService = new google.maps.DirectionsService();
  var map;

  function initialize() {
    directionsDisplay = new google.maps.DirectionsRenderer();
    var chicago = new google.maps.LatLng(41.850033, -87.6500523);
    var myOptions = {
      zoom:7,
      mapTypeId: google.maps.MapTypeId.ROADMAP,
      center: chicago
    }
    map = new google.maps.Map(document.getElementById("map_canvas"), myOptions);
    directionsDisplay.setMap(map);
  }

  function calcRoute() {
    var start = document.getElementById("start").value;
    var end = document.getElementById("end").value;
    var request = {
        origin:start, 
        destination:end,
        travelMode: google.maps.DirectionsTravelMode.DRIVING
    };
    directionsService.route(request, function(response, status) {
      if (status == google.maps.DirectionsStatus.OK) {
        directionsDisplay.setDirections(response);
      }
    });
  }
</script>
</head>
<body onload="initialize()">
<div>
<b>Start: </b>
<select id="start" onchange="calcRoute();">
  <option value="chicago, il">Chicago</option>
  <option value="st louis, mo">St Louis</option>
  <option value="joplin, mo">Joplin, MO</option>
  <option value="oklahoma city, ok">Oklahoma City</option>
  <option value="amarillo, tx">Amarillo</option>
  <option value="gallup, nm">Gallup, NM</option>
  <option value="flagstaff, az">Flagstaff, AZ</option>
  <option value="winona, az">Winona</option>
  <option value="kingman, az">Kingman</option>
  <option value="barstow, ca">Barstow</option>
  <option value="san bernardino, ca">San Bernardino</option>
  <option value="los angeles, ca">Los Angeles</option>
</select>
<b>End: </b>
<select id="end" onchange="calcRoute();">
  <option value="chicago, il">Chicago</option>
  <option value="st louis, mo">St Louis</option>
  <option value="joplin, mo">Joplin, MO</option>
  <option value="oklahoma city, ok">Oklahoma City</option>
  <option value="amarillo, tx">Amarillo</option>
  <option value="gallup, nm">Gallup, NM</option>
  <option value="flagstaff, az">Flagstaff, AZ</option>
  <option value="winona, az">Winona</option>
  <option value="kingman, az">Kingman</option>
  <option value="barstow, ca">Barstow</option>
  <option value="san bernardino, ca">San Bernardino</option>
  <option value="los angeles, ca">Los Angeles</option>
</select>
</div>
<div id="map_canvas" style="top:30px;"></div>
</body>
</html>


GoogleMapsJavaScriptAPI v3示例：方向简单
方向显示；
var directionsService=new google.maps.directionsService（）；
var映射；
函数初始化（）{
directionsDisplay=new google.maps.DirectionsRenderer（）；
var chicago=new google.maps.LatLng（41.850033，-87.6500523）；
变量myOptions={
缩放：7，
mapTypeId:google.maps.mapTypeId.ROADMAP，
中心：芝加哥
}
map=new google.maps.map（document.getElementById（“map_canvas”），myOptions）；
方向显示.setMap（地图）；
}
函数calcRoute（）{
var start=document.getElementById（“start”）.value；
var end=document.getElementById（“end”）.value；
var请求={
来源：start，
目的地:完，
travelMode:google.maps.Directions travelMode.DRIVING
};
路由（请求、功能（响应、状态）{
if（status==google.maps.directionstatus.OK）{
方向显示。设置方向（响应）；
}
});
}
开始：
芝加哥
圣路易斯
密苏里州乔普林
俄克拉荷马城
阿马里洛
盖洛普
亚利桑那州弗拉格斯塔夫
维诺娜
金门
巴斯托
圣贝纳迪诺
洛杉矶
完:
芝加哥
圣路易斯
密苏里州乔普林
俄克拉荷马城
阿马里洛
盖洛普
亚利桑那州弗拉格斯塔夫
维诺娜
金门
巴斯托
圣贝纳迪诺
洛杉矶

代码来源：

如果您希望阅读

MapOptions

和

MapTypeId

，请参阅。例如，如果您希望对地图执行其他自定义操作。

经过一些修改，此示例应该可以帮助您开始：

<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="initial-scale=1.0, user-scalable=no"/>
<meta http-equiv="content-type" content="text/html; charset=UTF-8"/>
<title>Google Maps JavaScript API v3 Example: Directions Simple</title>
<link href="http://code.google.com/apis/maps/documentation/javascript/examples/default.css" rel="stylesheet" type="text/css" />
<script type="text/javascript" src="http://maps.googleapis.com/maps/api/js?sensor=false"></script>
<script type="text/javascript">
  var directionDisplay;
  var directionsService = new google.maps.DirectionsService();
  var map;

  function initialize() {
    directionsDisplay = new google.maps.DirectionsRenderer();
    var chicago = new google.maps.LatLng(41.850033, -87.6500523);
    var myOptions = {
      zoom:7,
      mapTypeId: google.maps.MapTypeId.ROADMAP,
      center: chicago
    }
    map = new google.maps.Map(document.getElementById("map_canvas"), myOptions);
    directionsDisplay.setMap(map);
  }

  function calcRoute() {
    var start = document.getElementById("start").value;
    var end = document.getElementById("end").value;
    var request = {
        origin:start, 
        destination:end,
        travelMode: google.maps.DirectionsTravelMode.DRIVING
    };
    directionsService.route(request, function(response, status) {
      if (status == google.maps.DirectionsStatus.OK) {
        directionsDisplay.setDirections(response);
      }
    });
  }
</script>
</head>
<body onload="initialize()">
<div>
<b>Start: </b>
<select id="start" onchange="calcRoute();">
  <option value="chicago, il">Chicago</option>
  <option value="st louis, mo">St Louis</option>
  <option value="joplin, mo">Joplin, MO</option>
  <option value="oklahoma city, ok">Oklahoma City</option>
  <option value="amarillo, tx">Amarillo</option>
  <option value="gallup, nm">Gallup, NM</option>
  <option value="flagstaff, az">Flagstaff, AZ</option>
  <option value="winona, az">Winona</option>
  <option value="kingman, az">Kingman</option>
  <option value="barstow, ca">Barstow</option>
  <option value="san bernardino, ca">San Bernardino</option>
  <option value="los angeles, ca">Los Angeles</option>
</select>
<b>End: </b>
<select id="end" onchange="calcRoute();">
  <option value="chicago, il">Chicago</option>
  <option value="st louis, mo">St Louis</option>
  <option value="joplin, mo">Joplin, MO</option>
  <option value="oklahoma city, ok">Oklahoma City</option>
  <option value="amarillo, tx">Amarillo</option>
  <option value="gallup, nm">Gallup, NM</option>
  <option value="flagstaff, az">Flagstaff, AZ</option>
  <option value="winona, az">Winona</option>
  <option value="kingman, az">Kingman</option>
  <option value="barstow, ca">Barstow</option>
  <option value="san bernardino, ca">San Bernardino</option>
  <option value="los angeles, ca">Los Angeles</option>
</select>
</div>
<div id="map_canvas" style="top:30px;"></div>
</body>
</html>


GoogleMapsJavaScriptAPI v3示例：方向简单
方向显示；
var directionsService=new google.maps.directionsService（）；
var映射；
函数初始化（）{
directionsDisplay=new google.maps.DirectionsRenderer（）；
var chicago=new google.maps.LatLng（41.850033，-87.6500523）；
变量myOptions={
缩放：7，
mapTypeId:google.maps.mapTypeId.ROADMAP，
中心：芝加哥
}
map=new google.maps.map（document.getElementById（“map_canvas”），myOptions）；
方向显示.setMap（地图）；
}
函数calcRoute（）{
var start=document.getElementById（“start”）.value；
var end=document.getElementById（“end”）.value；
var请求={
来源：start，
目的地:完，
travelMode:google.maps.Directions travelMode.DRIVING
};
路由（请求、功能（响应、状态）{
if（status==google.maps.directionstatus.OK）{
方向显示。设置方向（响应）；
}
});
}
开始：
芝加哥
圣路易斯
密苏里州乔普林
俄克拉荷马城
阿马里洛
盖洛普
亚利桑那州弗拉格斯塔夫
维诺娜
金门
巴斯托
圣贝纳迪诺
洛杉矶
完:
芝加哥
圣路易斯
密苏里州乔普林
俄克拉荷马城
阿马里洛
盖洛普
亚利桑那州弗拉格斯塔夫
维诺娜
金门
巴斯托
圣贝纳迪诺
洛杉矶

代码来源：

例如，如果您希望阅读

MapOptions

和

MapTypeId

，请参阅。如果您希望对地图进行其他自定义，也可以使用Stealthynija的代码，在calcRoute函数中，在相应的端点处向地图添加标记。此外，您还可以使用lat/lng坐标代替地名（如果落客点必须更加精确，这可能会给您带来更好的结果）。

您还可以使用stealthyninja的代码，在calcRoute函数中，在地图的适当端点处添加一个标记。此外，您还可以使用lat/lng坐标代替地名（如果落客点必须更精确，这可能会给您带来更好的结果）。

哇。。。完美的非常感谢这段代码。这将使我走上我想要实现的正确轨道。再次感谢你。。。完美的非常感谢这段代码。这将使我走上我想要实现的正确轨道。再次，非常感谢