添加路径到 Google 地图 (API v3)
Adding paths to a Google Maps (API v3)
我正在尝试使用 Google 地图 API v3 在我的网站上显示地图。我想让它显示我所在城市的一些公交线路。它应该看起来像一条彩色路径(例如 1 号线的红色路径),其中显示了公交车的行程。
这是我目前所拥有的:http://dejoridavid.pe.hu/sasabus/map.php。在地图上,标记显示了公交车的位置,只缺少线路路径。如何使用 Google Maps API v3 向我的地图添加路径?它应该是一条从A到B到C等等,然后再到达A的路径。
摘自 Google Maps API docs(我添加了注释以阐明发生了什么)
// initialize a mapOptions object
var mapOptions = {
zoom: 3,
center: new google.maps.LatLng(0, -180),
mapTypeId: google.maps.MapTypeId.TERRAIN
};
// initialize a map object
var map = new google.maps.Map(document.getElementById('map-canvas'), mapOptions);
// initialize an array of LatLng objects. These are your markers in your city
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)];
// initialize a Polyline object. You can set the color, width, opacity, etc.
var flightPath = new google.maps.Polyline({
path: flightPlanCoordinates,
geodesic: true,
strokeColor: '#FF0000',
strokeOpacity: 1.0,
strokeWeight: 2
});
// set the polyline's map with your map object from above.
flightPath.setMap(map);
我正在尝试使用 Google 地图 API v3 在我的网站上显示地图。我想让它显示我所在城市的一些公交线路。它应该看起来像一条彩色路径(例如 1 号线的红色路径),其中显示了公交车的行程。
这是我目前所拥有的:http://dejoridavid.pe.hu/sasabus/map.php。在地图上,标记显示了公交车的位置,只缺少线路路径。如何使用 Google Maps API v3 向我的地图添加路径?它应该是一条从A到B到C等等,然后再到达A的路径。
摘自 Google Maps API docs(我添加了注释以阐明发生了什么)
// initialize a mapOptions object
var mapOptions = {
zoom: 3,
center: new google.maps.LatLng(0, -180),
mapTypeId: google.maps.MapTypeId.TERRAIN
};
// initialize a map object
var map = new google.maps.Map(document.getElementById('map-canvas'), mapOptions);
// initialize an array of LatLng objects. These are your markers in your city
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)];
// initialize a Polyline object. You can set the color, width, opacity, etc.
var flightPath = new google.maps.Polyline({
path: flightPlanCoordinates,
geodesic: true,
strokeColor: '#FF0000',
strokeOpacity: 1.0,
strokeWeight: 2
});
// set the polyline's map with your map object from above.
flightPath.setMap(map);