Google Maps API v3:首先加载2个位置的地图上的驾驶方向
Google Maps API v3: Driving directions over a map which first loads 2 positions
我有一个地图,它用标记显示了两个位置(并自动在这两个位置之间居中),您可以在这里看到它:http://goo.gl/rRDCE我正在尝试将它与方向服务集成,就像这个演示一样:https://developers.google.com/maps/documentation/javascript/examples/directions-simple
地图应该首先加载两个位置标记,然后如果用户选择一个起点,它应该显示到两个位置之一的方向。
这是我到目前为止所做的(当然不工作,地图没有加载)…: Phttp://jsfiddle.net/multiformeingegno/fhAJA/5/
JAVASCRIPTvar directionsDisplay;
var directionsService = new google.maps.DirectionsService();
var map;
function initialize() {
directionsDisplay = new google.maps.DirectionsRenderer();
var locations = [
['Place 1', 41.897467, 12.470364, 2],
['Place 2', 41.896561, 12.467792, 1]
];
var infowindow = new google.maps.InfoWindow();
var bounds = new google.maps.LatLngBounds();
for (i = 0; i < locations.length; i++) {
marker = new google.maps.Marker({
position: new google.maps.LatLng(locations[i][1], locations[i][2]),
map: map
});
bounds.extend(marker.position);
google.maps.event.addListener(marker, 'click', (function (marker, i) {
return function () {
infowindow.setContent(locations[i][0]);
infowindow.open(map, marker);
}
})(marker, i));
}
map.fitBounds(bounds);
var listener = google.maps.event.addListener(map, "idle", function () {
map.setZoom(17);
google.maps.event.removeListener(listener);
});
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);
}
});
}
google.maps.event.addDomListener(window, 'load', initialize);
HTML: <script src="https://maps.googleapis.com/maps/api/js?v=3.exp&sensor=false"></script>
<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="41.897467, 12.470364">Place 1</option>
<option value="41.896561, 12.467792">Place 2</option>
</select>
<div id="map" style="position:relative;width:500px;height:300px"></div>
我做错了什么?:)
您缺少一个google.maps.Map对象。小提琴没有正确包含API脚本:
var myOptions = {
zoom: 10,
center: new google.maps.LatLng(-33.9, 151.2),
mapTypeControl: true,
mapTypeControlOptions: {style: google.maps.MapTypeControlStyle.DROPDOWN_MENU},
navigationControl: true,
mapTypeId: google.maps.MapTypeId.ROADMAP
}
map = new google.maps.Map(document.getElementById("map"),
myOptions);
working fiddle(已更新,以便方向工作,至少从意大利的位置)
相关文章:
- 谷歌地图固定位置覆盖
- 在谷歌地图上绘制位置数据库
- 使用ASP.NET将谷歌地图添加到项目中,并从数据库中检索位置
- PHP谷歌地图-位置红色气球没有显示
- 谷歌地图laravel上圆圈的错误位置
- 如何获取yandex地图上点击的位置标记的id
- 点击href在谷歌地图中加载位置
- 谷歌位置服务附近搜索结果基于正确的地图中心的位置
- 使用谷歌地图API和phonegap显示当前位置+方向
- 如何在Simile展品地图中显示位置
- 谷歌地图API标记没有标记我的位置
- 在TWebBrowser(谷歌地图)中显示位置,而无需单击按钮
- 如何使用谷歌地图中的纬度和经度搜索附近的位置
- 谷歌地图点击链接/选项卡更改标记位置地图
- 使用下拉框中的选择更改HTML5中的地理位置地图
- 如何显示两列值,当我选择位置地图时
- 将显示更改默认位置地图
- 地理位置地图 JS.
- 如何从谷歌位置/地图获得更多结果
- 默认为地理位置地图