Question

嘿伙计们。我需要知道我需要的是否可以实现。

我需要能够使用V2或V3（最好是3）创建在某种意义上忽略建筑物的路径。

我试图创建一个kml文件来自己绘制所有路径，然后找到一些方法根据需要打开/关闭它们。

例如。用户想要从A点到B点。在这些点之间是许多建筑物。用户在物理上可以穿过这些建筑物（这是一个校园）。我想在地图上向他们展示。

通过这种方式，你不必在停车场周围进行循环 - 循环，只是为了到达另一端。

如果有任何方法可以做到这一点，我很想知道。

我可以在此处找到我需要的示例：http://www.uottawa.ca/maps/

这是基于用户输入下拉菜单的两个输入的所有预定路径。我可以清楚地看到这一点。但我不知道a）这是否可以在v3中完成，b）他们自己如何做到这一点。

需要协助，非常感谢！

Answer 1

如果您的校园不是很大，您可能需要考虑为每个排列手动定义所有折线路线，这样如果您有4个建筑物A，B，C和D，则需要定义6条路线：

A:B, A:C, A:D, B:C, B:D, C:D

然后简单地构建一些基本的JavaScript逻辑，当您选择将A构建为起点并将C构建为目标时，您将隐藏所有折线并仅显示A：C行。如果需要，您还可以使用Google polyline methods获取每条路线的长度（以米为单位）。

这是一张简短的表格，根据您拥有的建筑物数量，您需要定义多少条路线：

+-------------+--------+
|  Buildings  | Routes |
|-------------+--------+
|         5   |    10  |
|        10   |    45  |
|        15   |   105  |
|        20   |   190  |
|        25   |   300  |
+-------------+--------+

正如你所看到的，随着建筑物数量的增加，它真的失控了，所以我想说这个选项只适用于某一点。至少你很幸运，因为排列的顺序并不重要，假设人们可以在两个方向上走每条路线。

有趣的注意：我注意到您提供的Ottawa demo在请求路线时没有进行任何AJAX调用。因此，他们很有可能按照上面的建议做同样的事情。

<强>更新

以下是使用v3 Maps API的工作演示，我希望可以帮助您入门：

<!DOCTYPE html>
<html> 
<head> 
  <meta http-equiv="content-type" content="text/html; charset=UTF-8"/> 
  <title>Google Maps Campus</title> 
  <script src="http://maps.google.com/maps/api/js?sensor=false" 
           type="text/javascript"></script> 
</head> 
<body> 
  <div id="map" style="width: 550px; height: 400px"></div> 

  <div>Start: 
    <select id="start">
      <option>Building 1</option>
      <option>Building 2</option>
      <option>Building 3</option>
    </select>
  </div>

  <div>End: 
    <select id="end">
      <option>Building 1</option>
      <option>Building 2</option>
      <option>Building 3</option>
    </select>
  </div>

  <input type="button" onclick="drawDirections();" value="GO" />

  <script type="text/javascript"> 
    var mapOptions = { 
      mapTypeId: google.maps.MapTypeId.TERRAIN,
      center: new google.maps.LatLng(47.690, -122.310),
      zoom: 12
    };

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

    // Predefine all the paths
    var paths = [];                         

    paths['1_to_2'] = new google.maps.Polyline({
      path: [
          new google.maps.LatLng(47.656, -122.360),
          new google.maps.LatLng(47.656, -122.343),
          new google.maps.LatLng(47.690, -122.310)
      ], strokeColor: '#FF0000'
    });

    paths['1_to_3'] = new google.maps.Polyline({
       path: [
          new google.maps.LatLng(47.656, -122.360),
          new google.maps.LatLng(47.656, -122.343),
          new google.maps.LatLng(47.690, -122.270)
       ], strokeColor: '#FF0000'
    });

    paths['2_to_3'] = new google.maps.Polyline({
       path: [
           new google.maps.LatLng(47.690, -122.310),
           new google.maps.LatLng(47.690, -122.270)
       ], strokeColor: '#FF0000'
    });

    function drawDirections() {
      var start = 1 + document.getElementById('start').selectedIndex;
      var end = 1 + document.getElementById('end').selectedIndex;
      var i;

      if (start === end) {
        alert('Please choose different buildings');
      }
      else {
        // Hide all polylines
        for (i in paths) {
          paths[i].setOptions({ map: null });
        }

        // Show the route
        if (typeof paths['' + start + '_to_' + end] !== 'undefined') {
          paths['' + start + '_to_' + end].setOptions({ map: map });
        }
        else if (typeof paths['' + end + '_to_' + start] !== 'undefined') {
          paths['' + end + '_to_' + start].setOptions({ map: map });
        }
      }
    }
  </script> 
</body> 
</html>

截图：

Google Maps Campus

Answer 2

为什么你不能只添加一条折线来显示“像乌鸦一样苍蝇”？

Google地图上的自定义路线/路径/道路

2 个答案: