9

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

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

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

这样，您就不必为了到达停车场的另一端而绕着停车场进行循环。

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

我需要的一个例子可以在这里找到：http ://www.uottawa.ca/maps/

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

需要帮助，非常感谢！

4

2 回答 2

6

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

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

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

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

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

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

有趣的说明：我注意到您提供的Ottawa 演示在请求方向时没有进行任何 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>

截屏：

谷歌地图校园

于 2010-04-30T05:32:19.767 回答
1

为什么不能只添加一条折线来显示“乌鸦飞”？

于 2010-04-30T03:11:20.570 回答