我专门创建了一个路线模板文件,以利用Google方向 . 我的脚本在Magento外面工作 . 不幸的是,当我将脚本移动到page / directions.phtml控制台时,会返回以下错误:
“未捕获的ReferenceError:未定义谷歌”
当我尝试点击test来触发calcRoute()函数时,我收到以下错误:
“未捕获的TypeError:无法调用未定义的方法'route'”
我认为这些错误与Google Maps API调用有关,但图形 Map 在页面上显示和运行正常 . 这些错误特别与调用google.maps.DirectionsService()有关,用于定义下面显示的javascript第2行的directionsService和最后调用的directionsService.route . 两者都与方向有关 .
为什么 Map 会显示,但是当脚本在我的html测试中工作时,方向会抛出错误?我很困惑 .
Javascript
var directionDisplay;
var directionsService = new google.maps.DirectionsService();
var map;
function directionsMap() {
directionsDisplay = new google.maps.DirectionsRenderer();
var chicago = new google.maps.LatLng(38.77627, -95.910965);
var mapOptions = {
zoom:4,
mapTypeId: google.maps.MapTypeId.ROADMAP,
center: chicago
}
map = new google.maps.Map(document.getElementById('map-directions'), mapOptions);
directionsDisplay.setMap(map);
//Place Markers
var baldwinsvilleMarker = new google.maps.Marker({
position: new google.maps.LatLng(00.00000, 00.00000),
map: map,
title:"store location 1"
});
var sacramentoMarker = new google.maps.Marker({
position: new google.maps.LatLng(00.00000, 00.00000),
map: map,
title:"store location 2"
});
var stLouisMarker = new google.maps.Marker({
position: new google.maps.LatLng(000.00000, -000.00000),
map: map,
title:"store location 3"
});
var catersvilleMarker = new google.maps.Marker({
position: new google.maps.LatLng(00.000000, -84.000000),
map: map,
title:"store location 4"
});
directionsDisplay.setMap(map);
directionsDisplay.setPanel(document.getElementById("get-directions"));
}
function calcRoute() {
console.log("calcRoute ran")
var start = document.getElementById('start').value;
var end = document.getElementById('end').value;
console.log(start + ' ' + end)
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);
}
});
}
HTML
#I am including this line in the document head
<script src="https://maps.googleapis.com/maps/api/js?v=3.exp&sensor=false"></script>
<style onload="directionsMap()">
#map-directions{width: 65%; height: 300px; float: left; border:5px solid #EEEEEE;}
#get-directions{width: 65%; float: left;}
.map-sidebar{width: 32%; height: 300px; float: right;}
</style>
<div id="map-directions"></div>
<div class="map-sidebar">
<h2>Get Directions</h2>
<input type="text" id="start" value="chicago, il"/>
<b>End: </b>
<select id="end" onchange="calcRoute();">
<option value="value 1">
store location 1
</option>
<option value="value 2">
store location 2
</option>
<option value="value 3">
store location 3
</option>
<option value="value 4">
store location 4
</option>
</select>
<button onclick="calcRoute();"> test</button>
</div>
<div id="get-directions"></div>
1 回答
您应该按照一步一步的跟注:
首先调用google Map api
然后调用你自己的JS
在
body onload=directionsMap()
中火directionsMap()
,而不是style
onload .我认为你的主要问题是,在谷歌完成加载之前,你正在调用
directionsMap()
函数 .所以我认为在jQuery load事件中调用
directionsMap()
的更好选择如下: