我专门创建了一个路线模板文件来利用 Google 路线。我的脚本在 Magento 之外工作。不幸的是,当我将脚本移动到 page/directions.phtml 控制台时返回以下错误:
“ Uncaught ReferenceError :谷歌未定义”
当我尝试单击触发 calcRoute() 函数的测试时,出现以下错误:
“未捕获类型错误:无法调用未定义的方法‘路由’”
我认为这些错误与 Google Maps API 调用有关,但是图形 map 在页面上显示和运行得很好。这些错误具体与调用 google.maps.DirectionsService() 来定义下面所示的 javascript 第 2 行的 DirectionsService 以及在最后调用的 DirectionsService.route 相关。两者都与方向有关。
当脚本按照我的 html 测试中的方式工作时,为什么 map 会显示,但方向会抛出错误?我很困惑。
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>
最佳答案
您应该按照如下所示的逐步调用进行操作:
首先调用google map api
然后调用自己的JS
在
body onload=directionsMap()
中触发directionsMap()
,而不是style
onload。
我认为您的主要问题是,您在 Google 完成加载之前调用 directionsMap()
函数。
所以我认为在 jQuery 加载事件中调用 directionsMap()
是更好的选择,例如:
$(function() {
directionsMap()
});
关于javascript - 尝试在 Magento 中使用 Google map 方向时出错(未捕获的 ReferenceError : google is not defined),我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/15511713/