用Google Maps绘制公交路线

Question

我在一家物业租赁网站工作。在该网站上，我想有一个谷歌地图，与所有的财产标记，并绘制了当地的巴士路线，以便租户可以看到的财产接近路线。

我已经完成了问题的第一部分；我已经使用标记绘制了属性。现在我需要添加公交车路线。

我对此进行了研究，但我无法找到实现它的最佳方法。我研究了折线和使用this tool，但路线很复杂，需要数百个坐标。

有一些路由应用程序接口，就像在this post中一样，但显然它只能接受8个路点。是那么回事吗？

理想情况下，我希望通过选择起点和终点来绘制地图，并将路线拖到适当的位置；然后以某种方式将该路线导入到我所拥有的地图中。

下面是我想要导入的确切路由：http://www2.warwick.ac.uk/services/accommodation/landlords/12busroutes/。

我绘制属性的代码是：

var siteRoot = "<?php bloginfo('stylesheet_directory');?>/";

var markers = [
  <?php 
  $my_query = new WP_Query( 'post_type=properties' );
    while ($my_query->have_posts()) : $my_query->the_post();
      kdev_maps('list');
    endwhile; // end of the loop. 
    ?>
]; 

function googlemap() {

jQuery('#map_canvas').css({'height': '400px'});

// Create the map 
// No need to specify zoom and center as we fit the map further down.
var map = new google.maps.Map(document.getElementById("map_canvas"), {
  mapTypeId: google.maps.MapTypeId.ROADMAP,
  streetViewControl: false
});

// Create the shared infowindow with two DIV placeholders
// One for a text string, the other for the StreetView panorama.
var content = document.createElement("div");
var title = document.createElement("div");
var boxText = document.createElement("div");

var myOptions = {
         content: boxText
        ,disableAutoPan: false
        ,maxWidth: 0
        ,pixelOffset: new google.maps.Size(-117,-200)
        ,zIndex: null
        ,boxStyle: { 
          background: "url('"+siteRoot+"images/house-icon-flat.png') no-repeat"
          ,opacity: 1
          ,width: "240px"
          ,height: "190px"
         }
        ,closeBoxMargin: "10px 0px 2px 2px"
        ,closeBoxURL: "http://kdev.langley.com/wp-content/themes/langley/images/close.png"
        ,infoBoxClearance: new google.maps.Size(1, 1)
        ,isHidden: false
        ,pane: "floatPane"
        ,enableEventPropagation: false
};


var infoWindow = new InfoBox(myOptions);
var MarkerImage = siteRoot+'images/house-web-marker.png';

// Create the markers
for (index in markers) addMarker(markers[index]);
function addMarker(data) {
    var marker = new google.maps.Marker({
        position: new google.maps.LatLng(data.lat, data.lng),
        map: map,
        title: data.title,
        content: data.html,
        icon: MarkerImage
    });
    google.maps.event.addListener(marker, "click", function() {
        infoWindow.open(map, this);         
        title.innerHTML = marker.getTitle();
        infoWindow.setContent(marker.content);
        infoWindow.open(map, marker);
        jQuery(".innerinfo").parent().css({'overflow':'hidden', 'margin-right':'10px'});            
    });
}

// Zoom and center the map to fit the markers
// This logic could be conbined with the marker creation.
// Just keeping it separate for code clarity.
var bounds = new google.maps.LatLngBounds();
for (index in markers) {
    var data = markers[index];
    bounds.extend(new google.maps.LatLng(data.lat, data.lng));
}
map.fitBounds(bounds);
var origcent = new google.maps.LatLng(map.getCenter());
// Handle the DOM ready event to create the StreetView panorama
// as it can only be created once the DIV inside the infowindow is loaded in the DOM.

closeInfoWindow = function() {
    infoWindow.close();
};

google.maps.event.addListener(map, 'click', closeInfoWindow);

google.maps.event.addListener(infoWindow, 'closeclick', function()
{
    centermap();
});

function centermap()
{
    map.setCenter(map.fitBounds(bounds));
}

}

jQuery(window).resize(function() {
googlemap();
});

任何帮助都是非常感谢的。

Answer 1

有两件事值得一看：

1) GTFS格式(https://developers.google.com/transit/gtfs/reference)这是一种基于csv的格式，允许用户交叉参考运输时间和路线，如果你够幸运，那么数据将为你的运输机构收集:)

2)如果你可以拉入坐标，那么你就可以制作一个你想要的线要素(在浏览器的能力范围内)。这与引入标记的方式大致相同，只是需要将所需的要素拉入多段线中:如下图所示(来自gmaps文档)：

var flightPlanCoordinates = [
    new google.maps.LatLng(37.772323, -122.214897),
    new google.maps.LatLng(21.291982, -157.821856),
    new google.maps.LatLng(-18.142599, 178.431),
    new google.maps.LatLng(-27.46758, 153.027892)
  ];
  var flightPath = new google.maps.Polyline({
    path: flightPlanCoordinates,
    strokeColor: "#FF0000",
    strokeOpacity: 1.0,
    strokeWeight: 2
  });

当然，您将从php构建数组:)

希望这能有所帮助。

Answer 2

如果你使用免费的谷歌地图，你可以使用起点，终点和8路点。在google maps api premiere中，您可以使用23个路点来确定车辆路线