[英]Google maps API: Directions result not showing
I'm creating my own styled map using Google Maps JS API. 我正在使用Google Maps JS API创建自己的样式化地图。 I wanted to add directions functionality to map, i followed the official tutorial (Under Displaying the DirectionsResult title), but the final route is not appearing...
我想添加路线功能来进行地图绘制,我遵循了官方教程 (在“ Showing DirectionsResult”标题下),但最终路线并未出现...
I debugged my code and I found, than directionsService.route function returns google.maps.DirectionsStatus.OK and directionsDisplay.setDirections(result) is really called with no JS error... So directions are successfully computed but not showed in my map. 我调试了代码,然后发现, directionsService.route函数实际上返回了google.maps.DirectionsStatus.OK,而directionsDisplay.setDirections(result)却没有出现JS错误,因此实际上被调用了。因此,成功计算了路线,但未在地图上显示路线。 A tried to turn off special map styling but even on default map style it is not appearing.
试图关闭特殊的地图样式,但即使是默认的地图样式也没有出现。 Any ideas where could the problem be?
任何想法可能出在哪里?
OK, some code...: OK,一些代码...:
<script type="text/javascript" src="http://maps.googleapis.com/maps/api/js?key=AIzaSyAB2gbXmG... ...mNs66iPr8&sensor=false&callback=directions_init"></script>
<script type="text/javascript">
var map;
var zoom = 11;
var directionsDisplay;
var directionsService;
function gmap_init(){
var styleArray = [ /*here is style but even if its commented its not working*/];
var alterMapStyle = new google.maps.StyledMapType(styleArray, {name: "ALTER style"});
var latlng = new google.maps.LatLng(/*lat, lng*/);
var myOptions = {
zoom: zoom,
center: latlng,
mapTypeId: google.maps.MapTypeId.ROADMAP,
mapTypeControl: false,
panControl: false,
zoomControl: false,
scaleControl: false,
streetViewControl: false
};
map = new google.maps.Map(document.getElementById("gmap"), myOptions);
map.mapTypes.set('ALTER_style', alterMapStyle);
map.setMapTypeId('ALTER_style');
}
function directions_init(){
directionsService = new google.maps.DirectionsService();
directionsDisplay = new google.maps.DirectionsRenderer();
directionsDisplay.setMap(map);
display_route();
}
function display_route(){
var request = {
origin: 'Place A',
destination:'Place B',
travelMode: google.maps.TravelMode.DRIVING
};
directionsService.route(request, function(result, status) {
if (status == google.maps.DirectionsStatus.OK) {
//program got here without error
directionsDisplay.setDirections(result);
}
});
}
Not sure if it's the source of your problems, but it's sure worth a shot... From your script input 不确定是否是问题的根源,但是肯定值得一试...从脚本输入中
<script type="text/javascript" src="http://maps.googleapis.com/maps/api/js?key=AIzaSyAB2gbXmG... ...mNs66iPr8&sensor=false&callback=directions_init"></script>
I assume the directions_init function is called after api script has been downloaded, which probably is before page's onload event, thus your map object has not been initiated and is null. 我假设在下载了api脚本之后(可能是在页面的onload事件之前)调用了directions_init函数,因此您的地图对象尚未初始化,并且为null。 So practically you are calling
所以实际上你在打电话
directionsDisplay.setMap(null);
Try calling directions_init from gmap_init or on any event that is triggered after onload. 尝试从gmap_init或onload之后触发的任何事件中调用directions_init。
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.